1. input 系列标签

一般网页的登录页、注册页等都具有收集用户信息的表单效果。input 标签的 type 属性值不同，会展示不同的效果。这里需要注意的是，type 属性值不要拼错或多加空格，否则相当于设置了 input 标签的默认值 text，即文本框。

1.1 文本框和密码框

文本框和密码框是在网页中显示输入单行文本和密码的表单控件。常用的属性都是 placeholder ，表示占位符，用来提示用户该表单处应该输入什么内容。

<body>
    用户名：<input type="text" placeholder="请输入用户名">
    <br>
    密码：<input type="password" placeholder="请输入密码">
</body>

此外，还有 value 属性和 name 属性：

value 属性：用户输入的内容，提交之后会发送给后端服务器
name 属性：当前控件的含义，提交之后可以告诉后端，前端发送过去的数据是什么含义
后端服务器接收到前端客户端发送过去的数据格式：name 属性值 = value 属性值

1.2 单选框

常用的属性：

name 属性：name 属性对单选框有分组功能，有相同 name 属性值的单选框为一组，并且一组中只能有一个被同时选中，即多选一。
checked 属性：是否选中状态，默认选中。

<body>
  性别：
  <input type="radio" name="sex" checked> 女
  <input type="radio" name="sex"> 男
  <hr>
  爱好：
  <input type="radio" name="love" checked> 跳舞
  <input type="radio" name="love"> 阅读
  <input type="radio" name="love"> 运动
  <input type="radio" name="love"> 烹饪
</body>

1.3 多选框

checkbox 表示多选的表单控件，常用属性同单选框一样

<body>
  爱好：
  <input type="checkbox" name="love" checked> 跳舞
  <input type="checkbox" name="love"> 阅读
  <input type="checkbox" name="love" checked> 运动
  <input type="checkbox" name="love"> 烹饪
</body>

1.4 文件上传

选择文件的表单控件，常用属性：multiple --- 多文件选择（按住 Ctrl 键，可以选择上传多个文件）

<body>
  <input type="file">
</body>

<body>
  <input type="file" multiple>
</body>

1.5 按钮

有三种表示不同功能的按钮表单控件，点击提交按钮（submit）之后，会提交数据给后端服务器；重置按钮（reset）点击之后会恢复表单默认值；普通按钮默认无功能，但之后配合 js 会实现具体的功能。

需要注意的是，若要实现以上按钮的功能，需要配合 form 标签（表单域标签）使用，简单来说，就是用 form 标签把表单标签包裹起来使用。

<body>
    <!-- action 是提交的地址 -->
    <form action="">
      <input type="submit" />
      <input type="reset" />
      <input type="button" />
    </form>
    <hr>
    <!-- 按钮重命名 -->
    <form action="">
      <input type="submit" value="提交按钮" />
      <input type="reset" value="重置按钮" />
      <input type="button" value="普通按钮" />
    </form>
  </body>

八、表单标签之 input 系列标签