HTML个人学习笔记（day 4）

七、表单标签学习(表单标签)

    7.1.1 input系列标签- all

     input标签的介绍：<input> 标签用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式。

     场景：在网页中显示收集用户信息的表单效果

     type属性值：

标签名        type属性值                 说明
input           text            文本框,用于输入单行文本
input         password           密码框,用于输入密码
input          radio              单选框,用于多选一
input         checbox             多选框，用于多选多
input           file            文本选择,用于之后上传文件   
input          submit             提交按钮,用于提交
input          reset              重置按钮，用于重置
input          button      普通按钮,默认无功能,之后配合js添加功能    

     7.1.2 input系列标签- 文本框 

      input文本框标签：< input type="text" name= " " id= " " >

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

      常用属性：

   属性名                    说明
placeholder      占位符,提示用户输入内容的文本

用户名: <input type="text" placeholder="请输入用户账号:">

      7.1.3 input系列标签- 单选框

       input单选框标签：< input type="radio" name=" " id=" " >

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

       常用属性:    

属性名                                    说明
 name          分组,有相同name属性值的单选框为一组，一组中同时只能由一个被选中
checked                                 默认选中

<input type="radio" name="sex" >男

        注意点：

•  name属性对于单选框有分组功能

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

       7.1.4 input系列标签- 多选框

        input单选框标签：< input type="checkbox" name=" " id=" " >

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

属性名                       说明
 name          	   设置或返回 checkbox 的名称
checked                    默认选中

<input type="checkbox" name="" checked>女

       7.1.5 input系列标签- 文件选择

        input文件选择标签：< input type="file" name=" " id=" " >

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

        常用属性:

 属性名             说明
multiple         多文件选择

<!-- 可以选中多个文件上去 -->
<input type="file" multiple>

         7.1.6 input系列标签- 按钮

           input按钮标签的介绍：在网页中显示的表单控件

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

           type属性值：

标签名      type属性值                      说明
input        submit          提交按钮,点击之后提交数据给后端服务器
input        reset             重置按钮,点击之后恢复表单默认值  
input        button          普通按钮,默认无功能，之后配合js添加功能

           注意点：

•     如果需要实现以上按钮功能,需要配合form标签使用

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

•     谷歌浏览器中button默认是提交按钮

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

<form action=" ">
    <!-- 提交按钮 -->
    <input type="submit" value="免费注册">
    <!-- 重置标签 -->
    <input type="reset"> 
    <input type="button" value="普通按钮">
</form>

         7.1.7 input系列标签- select下拉菜单

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

           标签组成：1. select标签:下拉菜单的整体

                             2. option标签:下拉菜单的每一项

<select>
      <option>北京</option>
      <option>上海</option>
      <option selected>广州</option>
</select>

            常见属性：

•      selected：下拉菜单的默认选中

          7.1.8 input系列标签- textarea文本域标签

            input系列标签textarea文本域标签的介绍：<textarea> 标签定义多行的文本输入控件。

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

            常见属性：

 cols: 规定了文本域内宽度
 rows: 规定了文本域内高度
 <textarea cols="50" rows="20" ></textarea>

            注意点：

•      右下角可以拖拽改变大小

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

          7.1.9 input系列标签- label标签

            input系列标签label标签的介绍：用于为输入控件定义文本标签（label）——即显示在输入控件旁边的说明性文字。

            场景：常用于绑定内容与表单标签的关系(点击字体可以选中)

            

 使用方法1(比较复杂):
                  1. 使用label标签把内容 (如:文本) 包裹起来
                  2. 在表单标签上添加id属性
                  3. 在label标签的for属性中设置对应的id属性值
 性别:<input type="radio" name="sex" id="nan"> <label for="nan">男</label>

 使用方法2(比较简单):
                  1. 直接使用label标签把内容 (如:文本) 和表单标签一起包裹起来
                  2. 需要把label标签的for属性删除即可
 <label><input type="radio" name="sex">女</label>

           7.1.10 input系列标签- 字符实体

             input标签字符实体的介绍：字符实体通俗讲就是网页文件中复杂的符号代码和一些标点的代码。例如小于号 < ，大于号 >， 双引号 "等。

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

             常见字符实体：

  描述        实体名称
  空格         &nbsp

---

the end！