(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行是將用戶性別作爲另一部分的內容,最終實現將不同的內容分屬於不同的部分,使表單簡潔明瞭。