定义

input元素是基于Web的表单创建交互式控件，方便接受来自用户的数据。

默认style

行内块元素display: inline-block;
具有边框border属性
获取焦点的时候，默认是通过outline属性进行控制。

重要属性

type：input标签的工作方式由type属性决定。

取值	解释
text	单行文本区域、输入的文本可见【默认值】
password	单行文本区域，输入的文本被遮盖
number	输入数字的控件
radio	单选按钮，多个拥有相同name值的选项中选择一个
checkout	复选框
button	没有默认行为的按钮，按钮中的值显示其value属性的值
file	上传文件

name：input表单控件的名字【没有name属性时，不会一起提交表单】
value：值
size：默认值为20。仅指定一次可以看到多少个字符【与minlength和maxlength区分】。类似控制input的width。
minlength - maxlength：能够接受输入的最小-最大字符数
pattern：验证文本框的正则表达式
placeholder：简短的提示信息
disabled：布尔值。表示控件是否被禁用。【禁用的表单元素不会一起提交】
readonly：布尔值。表示控件是否可以编辑。【只读的表单元素将会一起提交】
required：布尔值。表示此值为必填项或提交前必须检查该值。

案例：



    
        input中type为text
    
    
        
            
                username1: 
                
            
            
                username2: 
                
            
            
                username3: 
                
            
            
                username4: 
                
            
            
                username5: 
                
            
            
                username6: 
                
            
            
                username7: 
                
            
            
                username8: 
                
            
            
                username9:

结果：

input中的常用属性.gif

input中的校验

一些伪类可用于设置表单元素的样式，以帮助用户查看其值是有效还是无效。即:valid（有效）和:invalid（无效）。



    
        input中type为text
        
    
    
        
            
                Choose a username:

结果：

input校验.png

使用

type="text"

作用：创建基本的单行输入。
属性：【以上列举的重要属性除外】

pattern：匹配正则表达式【不需要使用required属性就能够影响伪类】

type="password"

作用：作为一行纯文本编辑器控件呈现，其中文本被"(*)"或"(·)"等符号替换。

type=password的基本样式.png

属性：

autocomplete：可以让密码管理器自动输入密码。
取值：on、off、current-password、new-password
inputmode：指定输入模式
取值：text、numeric、tel、url、email
pattern：添加正则表达式的验证。

type="number"

作用：让用户输入一个数字，包含内置样式以拒绝非数字的输入。当此元素获取焦点之后，将会出现步进的箭头，方便用户操作。

type=number的最初样式.png

属性：

step：此属性可以设置步长的值。【可以是整数也可以是小数】
min/max：指定该字段的最大和最小值。
pattern：当type=number的时候，pattern属性将会失效，只需要使用min/max属性来控制即可。
size：此属性将会失效，我们只能通过css的width属性来控制input框的大小。
list：指定该属性来从中进行选择，该列表属性包含的ID作为其值。

案例：list属性



    
        input中type为text

结果：

a和list属性的初次使用.png

type="radio"

作用：单选按钮，允许在多个拥有相同的name值的选项中选择其中一个。
注意事项：

一个单选按钮组：有相同name属性的单选按钮组成。
每个单选按钮必须有value属性，否则提交的表单数据将只有name，没有对应的值。
默认选中的按钮：使用checked属性进行控制



    
        input中type为radio
    
    
        
            Please select your preferred contact method:
            
                
                Email
                
                Phone
                
                Mail
            
            
            
            Name

结果：

type=radio和FormData的初次使用.png

type="checkout"

作用：定义一个复选框，可以设定为选中或者未选中。
注意事项：

name：type=checkbox时，name的值可以不同，可以相同，后台可以组成一个Array。【type=radio的时候，name的值是一定相同的】
value：value的值如果没有填写，默认为"on"，建议添加value属性
checked：checkbox的默认选中的由checked属性决定。
案例：type=checkbox



    
        input中type为radio
    
    
        
            Choose your monster's features:

            
                
                Scales
            

            
                
                Horns

结果：

type=checkbox.png

type="button"

作用：创建一个没有默认行为的按钮；显示的值通过value属性控制，默认为空。【h5中通过元素

作用：表示是一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。
属性：button的属性和中的属性基本一致，

type：设置button的类型。取值有button、submit、reset、menu【打开一个指定元素定义的菜单】

注意事项

1、

HTML表单元素之

定义