HTML頁面在Web中主要是將用戶輸入數據提交給後臺,然後將後臺返回的數據展現給用戶,接下來演示HTML在Web中的具體運用,如下所示。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>用戶註冊</title>
6 </head>
7 <body>
8 <form name="test" action="test.py" method="post">
9 <fieldset>
10 <legend>用戶註冊</legend>
11 <fieldset>
12 <legend>基本信息</legend>
13 <table>
14 <tr>
15 <td>用戶名:</td>
16 <td><input type="text" name="username"></td>
17 </tr>
18 <tr>
19 <td>密碼:</td>
20 <td><input type="password" name="password"></td>
21 </tr>
22 <tr>
23 <td>性別:</td>
24 <td>
25 男<input type="radio" checked="checked"
26 name="gender" value="male" />
27 </td>
28 <td>
29 女<input type="radio" name="gender" value="female" />
30 </td>
31 </tr>
32 <tr>
33 <td>電話:</td>
34 <td><input type="text" name="tel"></td>
35 </tr>
36 <tr>
37 <td>郵箱:</td>
38 <td><input type="email" name="email"></td>
39 </tr>
40 </table>
41 </fieldset>
42 <fieldset>
43 <legend>其他信息</legend>
44 <table>
45 <tr>
46 <td>就讀學校</td>
47 <td>
48 <select>
49 <option value="TSINGHUA">清華大學</option>
50 <option value="PKU">北京大學</option>
51 <option value="BUAA">北京航空航天大學</option>
52 <option value="UIBE">對外經濟貿易大學</option>
53 <option value="BIT">北京理工大學</option>
54 <option value="BUU">北京聯合大學</option>
55 <option value="RUC">中國人民大學</option>
56 </select>
57 </td>
58 </tr>
59 <tr>
60 <td>愛好:</td>
61 </tr>
62 <tr>
63 <td><input type="checkbox" name="movie">電影</td>
64 <td><input type="checkbox" name="sport">運動</td>
65 <td><input type="checkbox" name="book">看書</td>
66 <td><input type="checkbox" name="game">遊戲</td>
67 </tr>
68 <tr>
69 <td><input type="checkbox" name="music">音樂</td>
70 <td><input type="checkbox" name="food">美食</td>
71 <td><input type="checkbox" name="tour">旅遊</td>
72 <td><input type="checkbox" name="programming">編程</td>
73 </tr>
74
75 <tr>
76 <td>說明:</td>
77 <td>
78 <textarea name="comment"
79 rows="10" cols="50"></textarea>
80 </td>
81 </tr>
82 </table>
83 </fieldset>
84 <fieldset>
85 <legend>上傳照片</legend>
86 <table>
87 <tr>
88 <td>上傳照片:
89 <input type="file" name="picture"
90 accept=".jpg,.png" />
91 </td> </tr>
92 <tr>
93 <td>
94 <input type="submit" name="submit" value="註冊">
95 </td>
96 </tr>
97 </table>
98 </fieldset>
99 </fieldset>
100 </form>
101
102 </body>
103 </html>
上述代碼是HTML在Web開發中用戶註冊界面設計,運行結果如下圖所示。
上述代碼實現了表單內容的整合,代碼實現在上面內容中已經有所介紹,此處不再贅述。
注意:一個表單中可以使用多個<submit>控件。