1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>选项卡组织表单</title> 8 <style type="text/css"> 9 @import "js/dijit/themes/tundra/tundra.css"; 10 @import "js/dojo/resources/dojo.css" 11 </style> 12 <script type="text/javascript" 13 src="js/dojo/dojo.js" 14 djConfig="parseOnLoad: true"></script> </head> 15 <script type="text/javascript"> 16 dojo.require("dojo.parser"); 17 dojo.require("dijit.layout.ContentPane"); 18 dojo.require("dijit.layout.TabContainer"); 19 dojo.require("dijit.form.ValidationTextBox"); 20 dojo.require("dijit.form.DateTextBox"); 21 </script> 22 <style> 23 .formContainer { 24 width:600px; 25 height:600px; 26 } 27 label { 28 width:150px; 29 float:left; 30 } 31 </style> 32 <body class="tundra"> 33 <div class="formContainer" dojoType="dijit.layout.TabContainer" 34 style="width:600px;height:600px"> 35 36 37 38 <div dojoType="dijit.layout.ContentPane" title="Personal Data"> 39 <label for="first_name">First Name:</label> 40 <input type="text" name="first_name" id="first_name" 41 size="30" /><br/> 42 <label for="last_name">Last Name:</label> 43 <input type="text" name="last_name" id="last_name" 44 size="30" /><br/> 45 <label for="middle_initial">Middle Initial:</label> 46 <input type="text" name="middle_initial" id="middle_initial" 47 size="1" /><br/> 48 </div> 49 50 51 <div dojoType="dijit.layout.ContentPane" title="Address"> 52 <label for="address_line_1">Address Line 1:</label> 53 <input type="text" name="address_line_1" id="address_line_1" 54 size="30" /><br/> 55 <label for="address_line_2">Address Line 2:</label> 56 <input type="text" name="address_line_2" id="address_line_2" 57 size="30" /><br/> 58 <label for="city">City:</label> 59 <input type="text" name="city" id="city" 60 size="30" /><br/> 61 <label for="state">State:</label> 62 <input type="text" name="state" id="state" 63 size="2" /><br/> 64 <label for="postal_code">Postal Code:</label> 65 <input type="text" name="postal_code" id="postal_code" 66 size="15" /><br/> 67 <label for="country">Country:</label> 68 <input type="text" name="country" id="country" 69 size="30" /><br/> 70 <label for="date_move">Date of Move to this Address:</label> 71 <input type="text" name="date_move" id="date_move" 72 size="11" /><br/> 73 </div> 74 <div dojoType="dijit.layout.ContentPane" title="Phones"> 75 <label for="home_phone">Home Phone:</label> 76 <input type="text" name="home_phone" id="home_phone" 77 size="30" /><br/> 78 <label for="work_phone">Work Phone:</label> 79 <input type="text" name="work_phone" id="work_phone" 80 size="30" /><br/> 81 <label for="cell_phone">Cell Phone:</label> 82 <input type="text" name="cell_phone" id="cell_phone" 83 size="30" /><br/> 84 </div> 85 86 </div> 87 </body> 88 </html>