【响应式Web设计】读书笔记 - HTML5 表单（一） - 12

【简介】HTML5 表单元素、HTML5 的新输入类型

1. HTML5 表单元素

1.1 placeholder 占位符

在 input 元素上加入 placeholder 属性，其属性值就会默认显示为占位符文本，输入框获取焦点时该文本会自动消失。

<input tupe="text" placeholder="请输入">

可以使用 :placeholder-shown 伪类选择器来为 placeholder 属性添加样式。

input:placeholder-shown {
    color: #333;
}

1.2 required 必填字段

添加了 required 属性后，该字段变为必填字段，如果表单提交的时候，该必填字段没有任何信息，浏览器会给出警示信息。

<input tupe="text" placeholder="请输入" required >

1.3 autofocus 自动聚焦

autofocus 属性可以让表单在加载完成时即有一个表单域被默认选中。

<input tupe="text" placeholder="请输入" required autofocus >

1.4 autocomplete 自动补全

autocomplete 会使用浏览器默认提供的自动补全功能来辅助用户输入。默认是开启的，也可以设置关闭。

<input tupe="text" placeholder="请输入" required autofocus autocomplete="off" >

2. HTML5 的新输入类型

2.1 email 电子邮箱类型

用户需要输入符合电子邮箱地址的内容。

<input tupe="email" placeholder="abc@abc" required >

2.2 number 数字类型

用户需要输入数字类型。同时还提供了控制按钮（spinner controls），允许用户简单地点击向上和向下来改变数值。

<input tupe="number" max="10" min="1" >

2.3 url 网址类型

用于输入 URL 地址。

<input tupe="url" >

2.4 日期和时间类型

<input type="date" name="date">
<input type="week" name="week">
<input type="month" name="month">
<input type="time" name="time">

2.5 范围值

range 输入类型会生成一个滑动条。

<input type="range" min="1" max="10" value="5" name="range">