HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素

选择文件

<input>标签的[type]属性值为"file"时,表示文件选择控件,右侧的页面添加了一个文件选择控件,您可以尝试为网页添加一个文件。

我们可以用这个标签来实现上传头像,上传附件等功能。

 

[html] view plain copy
 
 HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
  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>  

这段代码就可以实现(伪)文件上传选择的功能:

 


HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
 

 

 

隐藏元素

有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden"。

 

<input>的[type]属性值为"hidden"表示隐藏输入域。

 

这种类型的输入标签是看不见的,但是是真实存在的。这个不可见的标签的 [value] 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话,可以使用这种类型的<input>标签。

 

[html] view plain copy
 
 HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素
  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


HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素