HTML5新增input属性

1 新增 input 属性

1.1 新增 type 值

1.1.1 date

可以选择⽇期

<input type="date" /> 

1.1.2 time

可以选择时间的输⼊框

<input type="time" /> 

1.1.3 month

可以选择年份⽉份的输⼊框

<input type="month" />

1.1.4 week

可以选择XX年XX周的输⼊框

<input type="week" /> 

1.1.5 search

⽐普通的⽂本框增加了⼀个可全部删除的按钮【可以点击右边的x来清除所有内容】

<input type="search" /> 

1.1.6 range

这是⼀个可拖动的滑动框

属性：

• min：定义滑动块的最⼩值

• max：定义滑动块的最⼤值

• value：定义默认值

• step：定义每次滑动的距离

<input type="range" min="0" max="10" step="1" /> 

1.1.7 url

能校验url的合法性【当提交的时候才会检测】

<form action="/" method="post" > 
    <input type="url" /> 
    <input type="submit" /> 
</form>

1.1.8 email

能够校验email的合法性

<form action="/" method="post" > 
    <input type="email" /> 
    <input type="submit" /> 
</form> 

1.1.9 number

能够输入数字的输入框

<form action="/" method="post" > 
    <input type="number" /> 
    <input type="submit" /> 
</form> 

1.2 新增的属性

1.2.1 placeholder

设置输⼊框的提示

<form action="/" method="post"> 
    <input type="text" name="username" placeholder="⽤户名" required="required" /> 
    <input type="submit" /> 
</form> 

1.2.2 multiple

可以选择多个值

<input type="file" multiple="multiple" /> 

1.2.3 required

设置输⼊框为必填框

<form action="/" method="post"> 
    <input type="text" name="username" placeholder="⽤户名" required="required" /> 
    <input type="submit" />
</form> 

1.2.4 autocomplete

设置下次是否⾃动完成

• 如果设置了，那么下次输⼊时会有上次输⼊的提示

• 输⼊框需要 name 属性才能使得 autocomplete ⽣效

• 可以把 autocomplete 放到 form 中作为属性，代表整个表单都可以 autocomplete

• 也可以在某个 输⼊框中设置 autocomplete="off" 来特定的不autocomplete

<form action="/" method="get" autocomplete="on" > 
    <input type="text" name="username" placeholder="⽤户名" required="required" autocomplete="off" /> 
    <input type="submit" /> 
</form> 

1.2.5 autofocus

设置是否⾃动获取焦点

<form action="/" method="post"> 
    <input type="text" name="username" placeholder="⽤户名" required="required" autofocus="autofocus" /> 
    <input type="submit" /> 
</form>