一、input类型详解
-
该图包含了新增的 input 类型
Number类型
示例：
<input type="number" name="demoNumber" min="1" max="100" step="1"/>
- 分析：
name: 标识表单提交时的key值
min: 标识当前输入框输入的最小值
max: 标识当前输入框输入的最大值
step: 标识点击增大/减小的时候变化的步长 - note：
这些属性都是可以省略的，只规定需要的部分即可
- Email类型
- 示例：
<input type="email" name="email" placeholder="请输入注册邮箱"/>
- note:
当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式
- URL类型
- 示例：
<input type="url" placeholder="请输入网址" name="url"/>
- note:
当表单在提交前，此文本框会自动校验是否符合URL的正则表达式
- Tel类型
- 示例：
<input type="tel" placeholder="输入电话" name="phone"/>
- range类型
- 示例：
<form oninput="output.value=parseInt(range.value)"/>
<input type="range" min="0" max="100" step="5" name="range" value="0"/>
<output name="output">0<output/>
</form>
- note:
- 此类型标签的加入，输入范围内的数据变得非常简单容易，而且非常标准
-
另外此标签可以跟表单新增加的output标签一块使用，达到一个联动的效果
- 日期类型
- 示例：
<input type="date" name="datedemo"/>
- 相关的日期类型还包括：
month、time、week、datetime-local、datetime - 示例：
<input type="time">
<input type="datetime">
<input type="month">
<input type="week">
<input type="datetime-local">
- search类型
- 示例：
<input type="search" results>
- note：
- 当你输入文字之后，右面会多出来一个叉，点击叉可以清除所有文字
- 如果规定results属性，左边就会自动出现一个放大镜图标
- color类型
- 示例：
<input type="color" name="colordemo"/>
二、HTML5表单新属性
-
常用属性：
-
placeholder：显示提示信息
-
-
autofocus：在当前页面中input标签加载完毕后获得焦点，但每个页面只允许出现一个autofocus
<input type="text" autofocus="autofocus"/>
-
required：必须在提交之前填写输入域（不能为空），它是表单验证最简单的一种方式方法，这一切都是由浏览器自动完成
<input type="text" name="usr_name" required="required" />
-
pattern：正则表达式校验，用于验证 input 域的模式（pattern），那些type=“email”或type=“url”的输入控件内置相关正则表达式，如果v输入值不符合其正则表达式，那表单将通不过验证，无法提交
<input type="text" pattern="[A-z]{3}/>
-
不常用属性：
-
max、min、step：这些上面介绍过，都是跟数字相关 -
multiple：用于文件上传，设置此属性后，允许一次选择多个文件上传
-
<form action="#" method="get">
Select images:
<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
-
datalist：当<datalist>元素的 id = <list>元素的 id，<option>元素被用作提示信息，会在 input 的建议区域作为提议显示出来，选定一个值后，其他选项不会再出现
<input list="cars">
<datalist id="cars">
<option value="BMW" label="$43K">
<option value="Ford" label="$13K">
<option value="Volvo" label="$25K">
</datalist>
在 Chrome 下是这个效果：
但是在 Firefox 中却变成了这样：
-
form：也就是说，任何一个标签都可以指定它所属于一个表单，而不是必须在其中进行包裹
<input type="text" form="demoform" name="demo"/>
- form表单新增加的属性
-
novalidate属性规定在提交表单时不应该验证 form或input域
<form action="" method="POST" novalidate="true"></form>
-
autocomplete浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用，autocomplete应该用以保护用户敏感数据，避免本地浏览器对它们进行不安全的存储
autocomplete值 |
作用 |
|---|---|
| on | 该字段无需保护，值可以被保存和恢复 |
| off | 该字段需要保护，值不可以保存 |
| unspecified | 是<form>的默认设置，如果没有被包含在表单中或没有指定，则表现为on |
相关文章推荐：
HTML5 简介（四）：新的表单类型、表单验证等特性介绍
