HTML基礎之表單(二)

(3)文件上傳

HTML定義了標準的文件上傳控件,可以通過此控件將本地文件上傳到網站上去,具體如下所示。

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>文件上傳</title>
6 </head>
7 <body>
8 <form>
9 <table>
10     <tr>
11         <td><input type="file" name="picture" accept=".jpg,.png" /></td>
12     </tr>
13 </table>
14 </form>
15 </body>
16 </html>

運行結果如下圖所示。


點擊【瀏覽】運行結果如下圖所示。


選擇文件之後點擊【打開】運行結果如下圖所示。


上述代碼實現了文件上傳功能,接下來詳細講解實現代碼。第11行是文件上傳的主要內容,其中<input>標籤的類型爲“file”,並且指定接收的文件後綴名爲“.jpg,.png”,即“accept”的值。

(4)提交與組合表單數據

在用戶填寫選擇完成之後需要進行提交,提交涉及到提交方式、接收頁面等信息。表單中數據還可以進行組合,使整個表單簡潔明瞭,具體如下所示。

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             姓:
12             <input type="text" name="firstname" value="簡書">
13             <br>
14             名:
15             <input type="text" name="lastname" value="隼與魚">
16             <br><br>
17             <input type="submit" value="Submit">
18         </fieldset>
19          <fieldset>
20             <legend>用戶性別</legend>
21                 男<input type="radio" checked="checked"
22                         name="gender" value="male" />
23                 <br><br>
24                 女<input type="radio" name="gender" value="female" />
25         </fieldset>
26     </form>
27 </body>
28 </html>

運行結果如下圖所示。


上述代碼中第918行是將用戶姓名(姓、名)和Submit提交按鈕組合成爲一部分內容。第1925行是將用戶性別作爲另一部分的內容,最終實現將不同的內容分屬於不同的部分,使表單簡潔明瞭。

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