選擇文件
<input>標籤的[type]屬性值爲"file"時,表示文件選擇控件,右側的頁面添加了一個文件選擇控件,您可以嘗試爲網頁添加一個文件。
我們可以用這個標籤來實現上傳頭像,上傳附件等功能。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" type="text/css" href="index.css">
- <title>表單</title>
- </head>
- <body>
- <form action="/" method="get">
- <h2>input標籤 -- 選擇文件</h2>
- <p><input type="file" id="file"/></p>
- </form>
- </body>
- </html>
這段代碼就可以實現(僞)文件上傳選擇的功能:
隱藏元素
有時候我們編寫前端代碼的時候,可能需要把一些數據告訴後臺,但是這些數據又不想讓用戶看到,我們可以設置<input>標籤的[type]屬性爲"hidden"。
<input>的[type]屬性值爲"hidden"表示隱藏輸入域。
這種類型的輸入標籤是看不見的,但是是真實存在的。這個不可見的標籤的 [value] 屬性保存了一個要提交給 Web 服務器的任意字符串。如果想要提交併非用戶直接輸入的數據的話,可以使用這種類型的<input>標籤。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" type="text/css" href="index.css">
- <title>表單</title>
- </head>
- <body>
- <form action="/" method="get">
- <h2>input標籤 -- 隱藏元素</h2>
- <p><input type="hidden" id="hidden"/></p>
- </form>
- </body>
- </html>
看看這段代碼,是不是有個東西不見了??
更多學習內容,就在碼芽網http://www.mayacoder.com/lesson/index