![f537aab97d394409e53291749108179d.png](https://img-blog.csdnimg.cn/img_convert/f537aab97d394409e53291749108179d.png)
上一篇文章我们说了HTML5新增的input,这篇文章我们就来说一下HTML5新增了哪些属性呢?
HTML5新增的表单属性,不仅能通过HTML5本身属性来验证,而且表单项能脱离form的约束,形成良好的布局。下面我们来学习HTML5为表单新增的属性。
![27bc84cfe414e24983d0928e574fad2c.png](https://img-blog.csdnimg.cn/img_convert/27bc84cfe414e24983d0928e574fad2c.png)
1.placeholder < input type="text" placeholder="请输入用户名"/>
作用就是用来默认提示的,
代码示例:
< body>
< form action="">
< p>
用户名 :< input type="text" name="name" placeholder="请输入用户名"/>
< /p>
< p>
< input type="submit"/>
< /p>
< /form>
< /body>
图例为:
![1ba4de04ecee9dd6808717eecdbd8a37.png](https://img-blog.csdnimg.cn/img_convert/1ba4de04ecee9dd6808717eecdbd8a37.png)
2.multiple< input type="email" multiple/>
作用就是支持在一个域中输入多个值,逗号隔开,一般配合邮箱和URL使用
< body>
< form action="">
< p>
邮箱 :< input type="email" multiple name="email"/>
< /p>
< p>
< input type="submit"/>
< /p>
< /form>
< /body>
图例为:
![c7a981e0b2f13f2b669cca66dbb34a79.png](https://img-blog.csdnimg.cn/img_convert/c7a981e0b2f13f2b669cca66dbb34a79.png)
3.autofocus< input type="text" autofocus/>
作用是自动获取焦点 比如说说打开百度,一打开就想锁定在搜索栏内,就要用到autofocus
4.required < input typr="text" required/>
作用是为了防止域为空提交表单时 就拿上述代码邮箱来举例,若邮箱忘记填写,是空,那么将提交不了
5.minlength和maxlength < input type="text" minlength="6" maxlength="12"/>
作用就是定制元素允许的最小字符和最大字符数
代码示例:
< body>
< form action="">
< p>
密码 :< input type="text" minlength="6" maxlength="12"/>
< /p>
< p>
< input type="submit"/>
< /p>
< /form>
< /body>
图例为:
![eee22151e093802b0ae9073469a9af24.png](https://img-blog.csdnimg.cn/img_convert/eee22151e093802b0ae9073469a9af24.png)
6.min和max< input type="number" min="0" max="100"/>
作用就是定制元素允许的最小数字和最大数字、
牛刀小试:
接下来这个练习就交给大家练习巩固一下啦。
![6c6ed9382bb36735d1cc94cc312615a6.png](https://img-blog.csdnimg.cn/img_convert/6c6ed9382bb36735d1cc94cc312615a6.png)
![f59e19010d1168385b75b88ce999f98e.png](https://img-blog.csdnimg.cn/img_convert/f59e19010d1168385b75b88ce999f98e.png)
(ps:如果您觉得有用,请点赞转发,让更多人看到哦)
小伙伴也可以加一下QQ群,可以获取资源以及更多学习方法哦
QQ群:1126277960 (暗号:zhihu)