HTML5新增的6个属性，你全都掌握了吗

上一篇文章我们说了HTML5新增的input，这篇文章我们就来说一下HTML5新增了哪些属性呢？

HTML5新增的表单属性，不仅能通过HTML5本身属性来验证，而且表单项能脱离form的约束，形成良好的布局。下面我们来学习HTML5为表单新增的属性。

1.placeholder < input type="text" placeholder="请输入用户名"/>

作用就是用来默认提示的，

代码示例：

< body>

​ < form action="">

​ < p>

​ 用户名 ：< input type="text" name="name" placeholder="请输入用户名"/>

​ < /p>

​ < p>

​ < input type="submit"/>

​ < /p>

​ < /form>

< /body>

图例为：

2.multiple< input type="email" multiple/>

作用就是支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用

作用就是支持在一个域中输入多个值，逗号隔开，一般配合邮箱和URL使用

< body>

​ < form action="">

​ < p>

​ 邮箱 ：< input type="email" multiple name="email"/>

​ < /p>

​ < p>

​ < input type="submit"/>

​ < /p>

​ < /form>

< /body>

图例为：

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>

图例为：

6.min和max< input type=“number” min=“0” max=“100”/>

作用就是定制元素允许的最小数字和最大数字、

牛刀小试：

接下来这个练习就交给大家练习巩固一下啦。

（ps:如果您觉得有用，请点赞转发，让更多人看到哦）

---

小伙伴也可以加一下QQ群，可以获取资源以及更多学习方法哦

QQ群：1126277960 （暗号：zhihu）