HTML5-表单元素(Form-input元素)

表单元素

表单：是HTML中获取用户输入的手段，对于web应用系统极其重要，但是HTML定义的功能落后于表单的使用方式已经有很多年了。
HTML5中，整个表单已经彻底改造过，标准的步伐已经跟上表单的应用实践。
（比如：百度的输入框是一个表单，网页中用户的的登陆框也是一个表单…）
获取用户输入的方式多样，对应的表单样式也多样。
关键表单元素

// 属性：method action （作用：创建一个表单） //Method 表示用于发送form-data的http方法 //Action 表示当提交表单时向何处发送表单数据 //属性：Type Name

1.单行文本框和多行文本框

    
    


    

        
         
        

        
         
         
        

         
        
        

           input type="text" placeholder="请输入用户名1" maxlength="20"
        
        
        

           input type="text" placeholder="请输入用户名2" size="10"
        
        

         
        
        

         
        
        
        

         
        
    

2.按钮

    
    


    

        
        按钮
        
        
        
    

分析：
1.原理来讲：button元素和type=“button”实际应用还是有区别 的，button要比input按钮的功能多，button元素可以当任何按钮来使用，使用范围更广泛一些。
2.input button和input submit的区别：submit用于提交表单，使用范围比input button要小一些。
3.input btton通常用于和javascript一起使用并作为绑定事件处理。
4.input submit用于提交表单时，必须声明form里面的method属性，最好也添加action属性。

适用范围：button>input button>input submit

3.滑动条

4.只接受数字的输入框

5.复选框和单选框

    
    


    

        
        复选框
        

        
        单选框
        
        选择1
        
        选择2
    

6.选项列表输入框

    
    


    

        你最喜欢的水果是什么？
        
            
            西瓜
            香蕉
            菠萝
        
    

页面（Google Chrome 版本号71.0.3578.98） 中显示效果

在这里用到的选项列表输入框适用于，用户可以选择给出的列表中的信息，但不能自己进行输入。
这里就需要用到 datalist（用户可以从列表中选择信息，也可以自行输入）

    
    


    

        你最喜欢的水果是什么？
        
        
        
    

datalist 和 select的差别： datalist 可以手动输入列表中没有的元素。

7.文件导入框

type="file"有两个属性
Multiple 一次允许上传多个文件
Required 必须上传一个文件

同时需要注意的是，在使用表单提交文件时，需要设置如下内容

8.图片按钮

9.其他类型

在使用html5的过程中，还会涉及到一些其他的input类型，比如 隐藏数据项，获取时间，获取颜色，判断邮箱格式等等…