HTML&CSS基礎學習筆記1.25-input標籤的選擇文件和隱藏元素

選擇文件

<input>標籤的[type]屬性值爲"file"時,表示文件選擇控件,右側的頁面添加了一個文件選擇控件,您可以嘗試爲網頁添加一個文件。

我們可以用這個標籤來實現上傳頭像,上傳附件等功能。

 

[html] view plain copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <link rel="stylesheet" type="text/css" href="index.css">  
  6.     <title>表單</title>  
  7. </head>  
  8. <body>  
  9. <form action="/" method="get">  
  10.     <h2>input標籤 -- 選擇文件</h2>  
  11.     <p><input type="file" id="file"/></p>  
  12. </form>  
  13. </body>  
  14. </html>  

這段代碼就可以實現(僞)文件上傳選擇的功能:

 



 

 

 

隱藏元素

有時候我們編寫前端代碼的時候,可能需要把一些數據告訴後臺,但是這些數據又不想讓用戶看到,我們可以設置<input>標籤的[type]屬性爲"hidden"。

 

<input>的[type]屬性值爲"hidden"表示隱藏輸入域。

 

這種類型的輸入標籤是看不見的,但是是真實存在的。這個不可見的標籤的 [value] 屬性保存了一個要提交給 Web 服務器的任意字符串。如果想要提交併非用戶直接輸入的數據的話,可以使用這種類型的<input>標籤。

 

[html] view plain copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <link rel="stylesheet" type="text/css" href="index.css">  
  6.     <title>表單</title>  
  7. </head>  
  8. <body>  
  9. <form action="/" method="get">  
  10.     <h2>input標籤 -- 隱藏元素</h2>  
  11.     <p><input type="hidden" id="hidden"/></p>  
  12. </form>  
  13. </body>  
  14. </html>  


看看這段代碼,是不是有個東西不見了??

 

更多學習內容,就在碼芽網http://www.mayacoder.com/lesson/index



 

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