HTML5新增input类型及表单的初级验证

1.HTML5新增input类型

1.1 HTML5新增input类型——number

<input type="number" name="num" min="3" max="20" step="3" value="3">

属性	值	说明
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔
value	number	规定的默认值

1.2 HTML5新增input类型——range

<input type="range" name="range" min="3" max="20" step="3" value="3">

1.3 HTML5新增input类型——Date pickers

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

<input type="month" name="month">

<input type="week" name="week">

<input type="time" name="time">

<input type="datetime" name="datetime">

<input type="datetime-local" name="datetime-local">

类型	说明
date	选择日、月、年
month	选择月、年
week	选择周、年
time	选择时间（小时和分钟）
datetime	选择时间、日、月、年（UTC时间）
datetime-local	选择时间、日、月、年（本地时间）

2.表单的初级验证

2.1为什么要进行表单验证？

表单验证的好处：

减轻服务器的压力

保证数据的可行性和安全性

2.2表单初级验证的方法

placeholder

input类型的文本框提供一种提示，

可以描述文本框期待用户输入的内容，

提示语默认显示，当文本框中输入内容时提示语消失

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

填写用户名：<input type="text" name="name" placeholder="用户名由英文和数字组成" required>

填写搜索内容：<input type="search" name="search" placeholder="填写合法的搜索内容" required>

填写网址：<input type="url" name="url" placeholder="网址以http开头" required>

填写邮箱：<input type="email" name="email" placeholder="邮箱必须包含.和@" required>

填写密码：<input type="password" name="password" placeholder="填写5-10位中英文格式的密码" required>

填写年龄：<input type="number" name="num" required>

语法<input type="text" name="name" placeholder="用户名由英文和数字组成" required>

required

规定文本框填写内容不能为空，否则不允许用户提交表单

适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

语法

填写用户名：<input type="text" name="name" placeholder="用户名由英文和数字组成" required>