HTML5的增强型表单 | 青训营笔记

这是我参与「第五届青训营」笔记创作活动的第一天

(一)新增加的表单类型

1、number类型

只能输入数字类型的表单

<input type="number" name="demoNumber" min="1" max="100" step="2"/>

• name:用来标识表单提交时的key值
• min:当前输入框输入的最小值
• max:当前输入框输入的最大值
• step：步长，也就是在点击增大或者减小的时候增加减少的步长

2、email类型

只能输入符合邮箱格式的内容，会进行自动校验

<input type="email" name="email" placeholder="请输入注册邮箱" />

3、url类型

会自动检验网址格式是否正确

<input type="url" placeholder="请输入网址" name="url" />

4、tel类型

只能输入符合电话格式的内容 <input type="tel" placeholder="输入电话" name="phone"/>

5、range类型

输入表单变成了滚动条的样子

<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />

6、date类型

可以选择日期

<input type="date" name="datedemo" />

与时间相关的还有以下类型

type	作用
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
month	选择一个月份
time	选择一个时间
week	选择周和年

7、color类型

用于进行颜色的选择

<input type="color"/>

8、search类型

用于搜索域

<input type="search"/>

(二)新增加的表单元素

1、datalist

元素规定输入域的选项列表,input的list属性与datalist的id绑定

 <input list="name">
 <datalist id="name">
    <option>demo</option>
    <option>test</option>
    <option>main</option>
 </datalist>

2、keygen

<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

使用样例：

<form action="" method="get">
      用户名: <input type="text" name="demo">
      加密: <keygen name="security">
      <input type="submit">
</form>

属性：

属性	值	描述
autofocus	autofocus	使字段在页面加载时获得焦点
challenge	challenge	将<keygen>的值设置为在提交时询问
disabled	disabled	禁用keygen 元素字段
form	form_id	定义该 keygen 字段所属的一个或多个表单
keytype	rsa dsa ec	定义密钥的安全算法
name	name	定义元素的唯一名称

3、output

用来定义不同类型的输出（比如：脚本的输出）

属性：

属性	描述
for	定义输出域相关的一个或多个元素，以空格隔开
form	定义输入字段所属的一个或多个表单，以空格隔开
name	定义对象的唯一名称（表单提交时使用）

使用样例：

<form oninput="n.value=parseInt(x.value)+parseInt(y.value)">
      <input type="number" id="x" value="0"> +
      <input type="number" id="y" value="0"> =
      <output name="n" for="x y">0</output>
</form>    

(三)新增加的表单属性

属性	描述
placehoder	简短的提示在用户输入值前会显示在输入域上
min 和 max	设置元素最小值与最大值
step	为输入域规定合法的数字间隔
required	是一个 boolean 属性。要求填写的输入域不能为空
pattern	描述了一个正则表达式用于验证<input> 元素的值
height 和 width	用于 image 类型的 <input> 标签的图像高度和宽度
autofocus	是一个 boolean 属性。规定在页面加载时，表单域自动地获得焦点
multiple	是一个 boolean 属性。规定<input> 元素中可选择多个值