![cb67ab39449232a4cddd4c7fd3ce29fd.png](https://img-blog.csdnimg.cn/img_convert/cb67ab39449232a4cddd4c7fd3ce29fd.png)
文章背景
1.在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码
2.以上的不足都已经在html5中被克服,HTML5在以上的基础上增加了许多标签和属性,为开发人员带来了极大的方便
![df5fcd49aac895649adec1b4a29c6449.png](https://img-blog.csdnimg.cn/img_convert/df5fcd49aac895649adec1b4a29c6449.png)
电子邮件类型< input type="email" />
功能就是输入E-mail地址的文本框
注意:输入的内容中必须包含“@”,"@"后面必须具有内容
代码示例:
< body>
< form action="">
< p>
邮箱:< input type="email"/>
< /p>
< p>
< input type="submit" />
< input type="reset" />
< /p>
< /fprm>
< /body>
图例为:
![b51edbb7353e47f929f5e1f121c205f0.png](https://img-blog.csdnimg.cn/img_convert/b51edbb7353e47f929f5e1f121c205f0.png)
搜索类型< input type="search" />
功能就是输入搜索关键字的文本框
代码示例:
< body>
< form action="">
< p>
邮箱:< input type="email"/>
< /p>
< p>
搜索:
< input type="search" />`
< /p>
< p>
< input type="submit" />
< input type="reset" />
< /p>
< /fprm>
< /body>
图例为:
![e160cf3a16f38e51bbb981a6219149d6.png](https://img-blog.csdnimg.cn/img_convert/e160cf3a16f38e51bbb981a6219149d6.png)
URL类型< input type="url"/>
功能就是输入WEB站点的文本框
注意:输入的内容中必须包含“http://”,后面必须有内容
代码示例:
< body>
< form action="">
< p>
邮箱:< input type="email"/>
< /p>
< p>
搜索: < input type="search" />
< /p>
< p>
网站类型:
< input type="url" />`
< /p>
< p>
< input type="submit" />
< input type="reset" />
< /p>
< /fprm>
< /body>
图例为:
![99444460e72ec0111f5e4e872b8ccc19.png](https://img-blog.csdnimg.cn/img_convert/99444460e72ec0111f5e4e872b8ccc19.png)
颜色类型< input type="color" />
功能就是预定义的颜色拾取控件
代码示例:
< body>
< form action="">
< p>
邮箱:< input type="email"/>
< /p>
< p>
搜索: < input type="search" />
< /p>
< p>
网站类型:
< input type="url" />`
< /p>
< p>
颜色:`` < input type="color" />
< /p>
< p>
< input type="submit" />
< input type="reset" />
< /p>
< /fprm>
图例为:
![2c0caeb01b4f2f06cffbbf0189bc181a.png](https://img-blog.csdnimg.cn/img_convert/2c0caeb01b4f2f06cffbbf0189bc181a.png)
数字类型< input type="number"/>
只能接受数字
属性:
min:当前域能接受的最小值
max:当前域能接受的最大值
step:决定了域所接受值递增或递减的步长,默认值为1
代码示例:
< body>
< form action="">
< p>
邮箱:< input type="email"/>
< /p>
< p>
搜索: < input type="search" />
< /p>
< p>
网站类型:
< input type="url" />`
< /p>
< p>
颜色:`` < input type="color" />
< /p>
< p>
成绩:< input type="number" min="0" max="300" step="5"/>
< /p>
< p>
< input type="submit" />
< input type="reset" />
< /p>
< /fprm>
图例为:
![3d910ab7e22a5c58e6fb58fac22992e1.png](https://img-blog.csdnimg.cn/img_convert/3d910ab7e22a5c58e6fb58fac22992e1.png)
范围类型< input type="range" min="0" max="100" value="80" />
允许用户选择一个范围内的值
属性:
min:范围的下限值
max:范围的上限制
step:声明该值递增或递减的步长
value:设置初始值
代码示例:
< body>
< form action="">
< p>
邮箱:< input type="email"/>
< /p>
< p>
搜索: < input type="search" />
< /p>
< p>
网站类型:
< input type="url" />`
< /p>
< p>
颜色:`` < input type="color" />
< /p>
< p>
成绩:< input type="number" min="0" max="300" step="5"/>
< /p>
< p>
范围:< input type="range" min="0" max="100" value="80"/>
< /p>
< p>
< input type="submit" />
< input type="reset" />
< /p>
< /fprm>
图例为:
![feecf0936bdc9a7ea9621e4a48233f3f.png](https://img-blog.csdnimg.cn/img_convert/feecf0936bdc9a7ea9621e4a48233f3f.png)
日期类型< input type="date"/>
功能就是创建一个日期输入域
代码示例:
< body>
< form action="">
< p>
邮箱:< input type="email"/>
< /p>
< p>
搜索: < input type="search" />
< /p>
< p>
网站类型:
< input type="url" />`
< /p>
< p>
颜色:`` < input type="color" />
< /p>
< p>
成绩:< input type="number" min="0" max="300" step="5"/>
< /p>
< p>
范围:< input type="range" min="0" max="100" value="80"/>
< /p>
< p>
日期:< input type="date"/>
< /p>
< p>
< input type="submit" />
< input type="reset" />
< /p>
< /fprm>
图例为:
![b0395be888903ba333b802f0740cc1b2.png](https://img-blog.csdnimg.cn/img_convert/b0395be888903ba333b802f0740cc1b2.png)
周类型< input type="week"/>
功能与date类型相似,只能选择周
月类型< input type="month"/>
功能与date类型相似,但只能选择月份
由于周类型与月类型一样,代码就不写了,想练习的朋友们可以自己练习一下。
![42c17f04f28e36b73adc1626e5105595.png](https://img-blog.csdnimg.cn/img_convert/42c17f04f28e36b73adc1626e5105595.png)
(ps:如果您觉得有用,请点赞转发,让更多人看到哦)