表单容器

<form>：创建包含表单元素的容器，用于收集用户输入

<form action="" >
  <!-- 表单元素 -->
</form>

属性：

• action - 表单提交的服务器地址

• method - 提交方法 (get|post)

• target - 响应打开位置 (_blank|_self|_parent|_top)

• enctype - 编码类型 (application/x-www-form-urlencoded|multipart/form-data|text/plain)

• autocomplete - 自动完成 (on|off)

• novalidate - 不验证表单

• name - 表单名称

• accept-charset - 字符编码

表单控件

input 表单

包含输入框、单选框、复选框等

输入标签<input>是最常见的表单元素之一，他可以创建文本输入框、密码框、单选框、复选框等。

<input type="">

type 定义了输入框的类型：

type属性值	说明
text	单行文本框
password	密码框
radio	单选框
checkbox	复选框
file	文件域

• 文本框和密码框：

  <form>
    <ul>
      <li>
        账号：<input type="text" placeholder="请输入账号" name="username">
      </li>
      <li>
        密码：<input type="password" placeholder="请输入密码" name="pwd">
      </li>
    </ul>
    <button>登录</button>
  </form>

  常用属性说明：

  属性名	说明
  placeholder	提示信息
  name	元素名称
  maxlength	允许的最大字符数
  accesskey	使元素获得焦点的快捷键
  autocomplete	用于控制表单的自动填充行为，帮助浏览器决定是否根据用户历史输入自动填充字段值。取值on/off

• 单选框和复选框

  <form>
    <ul>
      <li>
        单选按钮：
        <input type="radio" name="gender" vaule="0">女
        <input type="radio" name="gender" value="1">男
      </li>
      <li>
        多选：
        <input type="checkbox" name="hobby" value="0">足球
        <input type="checkbox" name="hobby" value="1">篮球
        <input type="checkbox" name="hobby" value="2">乒乓球
      </li>
    </ul>
  </form>

  常用属性说明：

  属性名	说明
  name	表单名，也起到分组作用，标记同一组元素用于单选或多选操作
  value	表单值，选择选项后传到后台的值
  checked	是否默认选中

• 文件域

  <form>
    <ul>
      <li>
        上传文件：
        <input type="file" name="file" accept=".txt,.jpg,.mp4">
      </li>
    </ul>
  </form>

  常用属性说明：

  属性名	属性值
  multiple	允许选择多个文件
  accept	规定选择的文件类型，多个类型中间用逗号分隔

textarea 表单

<textarea> 是一个多行纯文本编辑控件，也叫文本域适用于允许用户输入大量自由格式文本的场景，例如评论或反馈表单。

<form>
  评论：
  <textarea name="comment" cols="30" rows="10"></textarea>
</form>

常见属性：

属性	说明
name	表单名
placeholder	提示信息
rows	可见行数, 正整数，默认=2
cols	可见列数，正整数，默认=20

select 下拉表单

<select>表示一个提供下拉菜单的控件

<form action="">
  <ul>
    <li>
      选择城市：
      <select name="" id="">
        <option value="Beijing">北京</option>
        <option value="Shanghai">上海</option>
        <option value="Shenzhen">深圳</option>
        <option value="Guangzhou">广州</option>
      </select>
    </li>
  </ul>
</form>

要想默认选中一个选项，就在对应 <option> 中添加 selected 属性

button 按钮

<form>
    <ul>
      <li>
        <button>搜索</button>
        <button disabled>不可点击按钮</button>
      </li>
    </ul>
</form>

表单中的<button>按钮具有表单提交的功能，它会将每个元素的name和value组合起来传到后台，示例：

辅助标签

<label>：关联输入控件的文本标签，提升可访问性（点击标签可聚焦输入框），提升用户体验。

使用场景：当单选框比较小时，可以设置点击单选框文字勾选单选框，提升用户体验

两种使用方式：

• 方式一：

  利用for和id相关联

  <label for="male">男</label>
  <input type="radio" id="male" name="sex" value="1">

• 方式二：

  直接包含

  <label>
    <input type="radio" name="sex" value="1">男
  </label>

其他表单组件

日期和时间选择器

<input type="date">

<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01">

<label for="meeting">会议时间：</label>
<input type="datetime-local" id="meeting" name="meeting">

常用属性说明

• type="date" - 日期选择器

• type="time" - 时间选择器

• type="datetime-local" - 本地日期时间选择器

• min - 最小日期/时间

• max - 最大日期/时间

• step - 时间步长

范围滑块

<input type="range">：允许用户通过拖动滑块选择数值范围。

<label for="volume">音量：</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" step="10">

常用属性说明

• type="range" - 输入类型为范围滑块

• min - 最小值

• max - 最大值

• step - 步长

• value - 默认值

进度条

<progress>：显示任务完成进度。

<label for="file">文件上传进度：</label>
<progress id="file" value="70" max="100">70%</progress>

常用属性说明

• value - 当前进度值

• max - 最大值