前端入门学习笔记（十二）HTML5基础（六）表单

之前的学习笔记中，也有涉及到表单，但是在HTML5中，表单添加了不少新的特性，添加了多个新属性和输入类型。

表单创建

HTML5的表单的创建，与HTML的表单创建方式相同。效果在此处便不再展示。 ``` ```

HTML5表单的新属性

1.placeholder 占位符

HTML5 添加了一个名为 placeholder 的新属性。在 <input> 和 <textarea> 元素上，此属性提供一种提示，描述输入域所期待的值。

placeholder 翻译为占位符，占位符就是先占住一个固定的位置，等着你再往里面添加内容的符号，广泛用于计算机中各类文档的编辑。在网页页面中最常见的就是灰色的提示字体。

<form>
   <input type="text" name="ID" placeholder="ID" />
   <input type="text" name="PS" placeholder="Password" />
   <input type="submit" value="提交" />
</form>

效果如下

2.autofocus 自动聚焦

在页面载入时自动聚焦

<form>
    昵称: <input type="text" name="昵称" autofocus><br>
    密码: <input type="text" name="密码"><br>
    <input type="submit">
</form>

展示效果如下，很明显可以看到，昵称因为加了autofocus而被选中

3.required 带必填字段的表单 && autocomplete 自动完成表单填写

required 属性将会要求在提交之前，必须填写完毕

<form>
    昵称: <input type="text" name="昵称" autocomplete="on" required /><br>
    密码: <input type="text" name="密码" autocomplete="off" required/><br>
    <input type="submit">
</form>

此时点击提交，将不会有任何反应，因为密码尚未填写

各位应该有注意到，还有一个属性为autocomplete，即自动完成填写。
autocomplete 规定 form 或 input 域应该拥有自动完成功能（取决于on 或者 off）。经常与required搭配使用。

4.search 创建搜索框

search 为一种新的输入类型，可以创建搜索框。通常与 submit 搭配。

扫描二维码关注公众号，回复： 3254222 查看本文章

<input type="search" name="searchitem" />

5.datalist 搜索选项列表

datalist 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

<input list="browsers" />
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

6.邮箱等输入类型

HTML5 拥有多个新的输入类型，包括 email，tel，url，date，time 等。

    <input type="email" name="email" placeholder="[email protected]" />
    <br />
    <input type="tel" name="usrtel" placeholder="666.666.6666" />
    <br />
    <input type="url" name="homepage" placeholder="example.com" />

更多的类型可以查询文档，或者在IDE中就可以查看到
这里写图片描述