三、HTML 5 表单

3.1 form 标签

form标签是功能性标签，用于表单提交，将所有的表单元书写在form标签内。

通过form标签id属性和其他表单元素form属性产生绑定，用于提交。

HTML 5 表单元素可以不书写在form标签内，使用属性产生绑定

<!-- html 5 form标签改变 -->
    <form action="" id="biaodan"></form>
    <input type="text" value="请输入用户名" form="biaodan">

    <!-- 之前的写法 -->
    <form action="">
        <p>
            <input type="text">
        </p>
        <p>
            <input type="submit" value="提交表单">
        </p>
    </form>

3.2 label标签

label标签可以直接将要控制的表单书写在label标签内部，省略不写for属性

<p>
    <input type="radio" name="sex" id="nv"><label for="nv">女</label>
</p>
<!-- label 标签改变 直接将表单书写在label标签内部 -->
<p>
    <label>
        <input type="radio" name="sex">男
    </label>
</p>

女

男

3.3 placeholder属性

占位符：

<p>
    <!-- placeholder 占位符 -->
    用户名：<input type="text" placeholder="请输入用户名">
</p>
<p>
    <!-- 不使用 placeholder 占位符  使用value -->
    昵称：<input type="text" value="请输入用户名">
</p>

用户名：

昵称：

3.4 autofocus属性

focus 焦点

autofocus自动获取焦点（提高用户体验）

<p>
    <!-- placeholder 占位符   autofocus 自动获取焦点-->
    用户名：<input type="text" placeholder="请输入用户名" autofocus>
</p>

用户名：

3.5 required 属性

必填项（表单提交时会进行验证，如果不书写，则无法提交）

<p>
      <!-- 不使用 placeholder 占位符  使用value required 必填项-->
       昵称：<input type="text" value="请输入用户名" required>
</p>

昵称：

3.6 datalist自动感应

datalist自动感应标签

通过其他表单元素list属性和datalist标签id属性产生绑定。

<!-- 自动感应的标签 -->
<p>
    你学会的技能：<input type="text" list="ganying">
    <datalist id="ganying">
        <option value="html">网页制作</option>
        <option value="css">样式书写</option>
        <option value="js">js交互</option>
    </datalist>
</p>

你学会的技能：

3.7 新的输入表单元素

密码：password
搜索框： search
网址：url   会对网址进行正则验证
电子邮箱：email
数字：number  可以设置最大最小和默认值
电话：tel
拖拽条：range  可以设置最大最小和默认值
日期：date
周：week
颜色：color




<p>
    用户名：<input type="text">
</p>
<p>
    密码：<input type="password">
</p>
<p>
    搜索框：<input type="search" placeholder="占位符">
</p>
<p>
    url（网址）: <input type="url" required placeholder="进行正则验证">
</p>
<p>
    电子邮箱：<input type="email">
</p>
<p>
    数字：<input type="number" min="1" max="100" value="50">
</p>
<p>
    电话：<input type="tel">
</p>
<p>
    <!-- 拖拽条用法类似number min是最小值 max是最大值 -->
    拖拽条：<input type="range" min="1" max="200" value="50">
</p>
<p>
    日期：<input type="date">
</p>
<p>
    周：<input type="week">
</p>
<p>
    颜色：<input type="color">
</p>
<p>
    <input type="submit" value="提交表单">
</p>

用户名：

密码：

搜索框：

url（网址）:

电子邮箱：

数字：

电话：

拖拽条：

日期：

周：

颜色：