8、HTML标签学习之表单标签

input系列标签：

☞场景:在网页中显示收集用户信息的表单：如登录页、注册页

☞标签名：input

          input标签可以通过type属性值的不同，展示不同效果

①input系列标签之文本框（text和password）

☞场景：在网页中显示输入单行文本的表单控件

☞常用属性：placeholder:占位符，提示用户输入内容的文本

文本框：<input type="text" placeholder="请输入用户名"><br>
密码框: <input type="password" placeholder="请输入密码"><br>

②input系列标签之单选功能和默认选中（radio）

☞场景：在网页中显示多选一的单选表单控件

☞常用属性：name:分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中；

                     chcked:默认选中（checkbox多选控件也可以用）

☞注意：name属性对于单选框有分组功能

              有相同name属性值的单选框为一组，一组只能同时有一个被选中

性别：<input type="radio" name="sex" checked>男
     <input type="radio" name="sex">女 <br>
    多选框<input type="checkbox" checked>

③input系列标签之文件选择（file）

☞场景：在网页中显示文件选择的表单控件

☞常用属性：multiple:多文件选择（反之选一个）

上传多个文件<input type="file" multiple>

④input系列标签之按钮（submit、reset、button）

☞场景：在网页中显示不同功能的按钮表单控件

☞常用属性：submit：提交按钮，点击之后提交数据给后端服务器

                      reset：重置按钮，点击之后恢复表单默认值

                      button：普通按钮，默认无功能，之后配合js添加功能

☞注意点：如果需要实现以上按钮功能，需要配合form标签使用

                  form使用方法：用form标签把表单标签一起包裹起来即可

    <form action="">
        用户名：<input type="text" placeholder="请输入用户名">
        <br>
        <br>
        密码框: <input type="password" placeholder="请输入密码">
        <br>
        <br>
        <!-- value为按钮名字修改 -->
        提交按钮:<input type="submit" value="提交按钮">
        <br>
        重置按钮:<input type="reset">
        <br>
        普通按钮:<input type="button" value="普通按钮">
    </form>

⑤button按钮标签

☞场景：在网页中显示用户点击的按钮

☞type属性值（同input的按钮系列）：

                   submit：提交按钮，点击之后提交数据给后端服务器

                    reset：重置按钮，点击之后恢复表单默认值

                    button：普通按钮，默认无功能，之后配合js添加功能

☞注意点：谷歌浏览器中button默认是提交按钮

                  button标签是双标签，更便于包裹其他内容：文字、图片等

<form action="">
    用户名：<input type="text" placeholder="请输入用户名">
    <br>
    <br>
    密码框: <input type="password" placeholder="请输入密码">
    <br>
    <br>
    <button>我是按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮，没有任何功能</button>
</form>

⑥select下拉菜单标签

☞场景：在网页中提供多个选择项的下拉菜单表单控件

☞标签组成：select标签：下拉菜单的整体

                     option标签：下拉菜单的每一项

☞常见属性：selected：下拉菜单的默认选中

<select name="" id="">
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="" selected>海口</option><!-- 默认选中 -->
    <option value="">深圳</option>
</select>

⑦textarea文本域标签

☞场景：在网页中提供可输入多行文本的表单控件

☞常见属性（了解）：

                     cols:规定了文本域内可见宽度

                     rows:规定了文本域内可见行数

☞注意点：右下角可以拖拽改变大小

                  实际开发时针对于样式效果推荐用css设置

<textarea name="" id="" cols="30" rows="10">
    
</textarea>

⑧label标签

☞场景：常用于绑定内容于表单标签的关系

☞常用：单选标签和多选标签

☞使用方法①：(不推荐)

        a. 使用label标签把内容（如文本）包裹起来

        b. 在表单标签上添加id属性

        c. 在label标签的for属性中设置对应的id属性值

☞使用方法②：

        a. 直接使用label标签把内容（如文本）和表单标签一起包裹起来

        b. 需要把label标签的for属性删除即可

性别：
<input type="radio" name="sex" id="nan"> <label for="nan">男</label> <!-- 方法1 -->
<label> <input type="radio" name="sex">女</label><!-- 方法2 -->

⑨语义化标签

（目标：能够认识开发中常用的没有语义布局标签（div、span）和有语义的布局标签）

☞没有语义化标签（div、span）：

☞场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

               div标签：一行只显示一个

               span标签：一行可以显示多个

普通文字
<div>这是div标签</div>
<div>这是div标签</div>
<span>这是span标签</span>
<span>这是span标签</span>

☞有语义化标签  ---  手机端常用的标签（了解）：

☞场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

☞标签：header（网页头部）、nav（网页导航）、footer（网页底部）、aside（网页侧边栏）、section（网页区块）、article（网页文章）

☞注意点：以上标签显示特点和div一致，但是比div多了不同的语义

<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>

⑩字符实体

（目标：能通过字符字体在网页中显示特殊符号）

☞场景：在网页中展示特殊符号效果时，需要使用字符实体替代

☞结构：&英文；

☞常见字符实体： （空格）