![01f137c92824e9a2c4aa88aceb6d60ca.png](https://i-blog.csdnimg.cn/blog_migrate/8d119bcc04c7cd9b42f52fb0541520dd.jpeg)
文章背景
1.在其他版本的HTML中,表单包含的元素非常有限,并且属性也不多,尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码
2.以上的不足都已经在html5中被克服,HTML5在以上的基础上增加了许多标签和属性,为开发人员带来了极大的方便
![143291fb5f7d938dd73cb8551f967a33.png](https://i-blog.csdnimg.cn/blog_migrate/cf4f42d1cd6df0a31d4dbf6b5e4288ee.jpeg)
电子邮件类型< input type="email" />
功能就是输入E-mail地址的文本框
注意:输入的内容中必须包含“@”,"@"后面必须具有内容
代码示例:
< body>
< form action="">
< p>
邮箱:< input type="email"/>
< /p>
< p>
< input type="submit" />
< input type="reset" />
< /p>
< /fprm>
< /body>
图例为:
![f5e5eb1b15191585b9fd10ae87bc0403.png](https://i-blog.csdnimg.cn/blog_migrate/fbc53ec36fad16bb465a5074d17127fe.jpeg)
搜索类型< 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>
图例为:
![0dec566b9bcbcff0b35e3f4b1b13661b.png](https://i-blog.csdnimg.cn/blog_migrate/31d1511bc543a11b0cb665a9b0a5d5a0.jpeg)
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>
图例为:
![24f5e1bdbf859aa3dc50cc131c848088.png](https://i-blog.csdnimg.cn/blog_migrate/1bf7108badffd4db026de3a58088539c.jpeg)
颜色类型< 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>
图例为:
![19a55390a748b95cd920bbef1aa31de8.png](https://i-blog.csdnimg.cn/blog_migrate/49288ad218aaa7558e2f58fbbe25ceb2.jpeg)
数字类型< 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>
图例为:
![fc85977c0346d971de455c73e174943c.png](https://i-blog.csdnimg.cn/blog_migrate/dcfee5e48c7449afec228f71244a4178.jpeg)
范围类型< 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>
图例为:
![fa9808fdea024e4a81c02185c6403323.png](https://i-blog.csdnimg.cn/blog_migrate/2f346fb84d3582c1bb776811e83d0c72.jpeg)
日期类型< 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>
图例为:
![330e232c8916e107d3c34c18af0b5d07.png](https://i-blog.csdnimg.cn/blog_migrate/f53467fef761f62a60dea723e04fa658.jpeg)
周类型< input type="week"/>
功能与date类型相似,只能选择周
月类型< input type="month"/>
功能与date类型相似,但只能选择月份
由于周类型与月类型一样,代码就不写了,想练习的朋友们可以自己练习一下。
![0874c0f53ecd6dce49b3df486780bf6d.png](https://i-blog.csdnimg.cn/blog_migrate/d34dd9eddcb308b3d5fbae77dbd001ee.jpeg)
(ps:如果您觉得有用,请点赞转发,让更多人看到哦)