HTML在Web中的運用

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>控件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章