持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

表单

为什么说表单在 HTML 中很重要的原因:

表单是允许接收用户输入的信息, 其他元素仅是用来向用户展示信息。
在 HTML 元素中, 可以与服务端进行通信的只有表单。

目前, 在真实的 Web 应用或网站中, 有哪些是由表单完成的:

网站的用户注册和登录功能
搜索功能中的搜索框
写博客的发布功能

`<form>`元素

作用：

用来接收用户输入的信息
与服务端进行通信(向服务端提交信息)

属性：

action属性: 设置提交表单的服务端地址
method属性: 设置提交表单时的请求类型

①：GET

②：POST
enctype属性: 设置表单提交时的MIME类型，主要可以实现文件上传

表单可以划分两个组成部分:

1、

元素: 表单的容器元素

2、表单组件元素: 才是真正用来接收用户输入的信息

`<input>`元素

input元素: 空元素

1、属性:

type属性: 设置输入框的类型
value属性: 设置输入框的默认值
disabled属性: 设置输入框是否可用(只设置属性名)
readonly属性: 设置输入框是否为只读
HTML5新增属性
- autofocus属性: 设置输入框自动获取焦点
- placeholder属性: 设置输入框的默认提示内容，用来替代value属性为用户展示提示信息 2、输入框类型:
text: (单行)文本框
password: 密码框(显示与隐藏动态切换功能)
radio: 单选框
checkbox: 复选框
button: 按钮
submit: 提交按钮
reset: 重置按钮
file: 文件域
hidden: 隐藏域

HTML5新增

email: 电子邮件
url: URL地址
search: 搜索框
tel: 电话框
date: 日期控件
week: 星期控件
month: 月控件
color: 颜色控件
number: 数字控件

如下示例代码展示了input的多个属性：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>input元素</title>
</head>

<body>
  <form action="#">
    <input type="text" value="请输入你的用户名">
    <input type="text" placeholder="请输入你的用户名">
    <input type="password">
    <br>
    <!-- 
      单选框或复选框: 定义相同的name属性值, 表示为一组
      * checked属性: 表示当前单选框或复选框被选中
     -->
     
    <input type="radio" name="like"  checked>html
    <input type="radio" name="like">css
    <input type="radio" name="like">javascript

    <input type="checkbox" name="like" checked>html
    <input type="checkbox" name="like">css
    <input type="checkbox" name="like">javascript
    <br>
    <!-- 
      <input>元素: 按钮
      * button: 普通按钮
      * submit: 提交按钮(提交表单)
      * reset: 重置按钮
      <button>元素: 按钮

      <input type="button">与<button>的区别:
      * <input type="button">
        * 一般情况下, 配合<form>元素使用
      * <button>
        * 与<form>元素没有关系
     -->
    <input type="button" value="按钮">
    <button>按钮</button>

    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <br>
    <!-- 
      文件域: 一般用来实现文件上传或选择头像等功能
      * 数量设置
        * 单文件选择: 默认情况
        * 多文件选择: 设置multiple
      * 类型设置: 规定选择文件的类型
        * 默认: 可以选择任何类型
        * accept属性: 设置选择文件的类型
     -->
    <input type="file" multiple accept="video/*">
    <br>
    <!-- 一般用来存储一些不想用户知道的数据内容, 比如用户ID -->
    <input type="hidden">
    <br>
    <!-- 提供了Email地址格式的验证 -->
    <input type="email">
    <!-- 提供了URL地址格式的样式(验证不完整) -->
    <input type="url">
    <!-- 搜索框: 移动端显示(右下角按钮显示"搜索") -->
    <input type="search">
    <!-- 电话框: 移动端显示(软键盘显示数字) -->
    <input type="tel">
    <input type="date">
    <input type="week">
    <input type="month">
    <input type="color">
    <input type="number">
  </form>
</body>

</html>

`<label>`元素

元素: 一般配合input元素进行使用

1、作用: 为某个文本框提供文本提示内容

2、属性:

for属性: 设置的值与input元素的id属性值一致

如下代码展示了label元素配合input元素的使用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>label元素</title>
</head>

<body>
  <form action="#">
    <label for="username">用户名: </label>
    <input type="text" id="username" placeholder="请输入你的用户名">
    <label for="password">密码: </label>
    <input type="password" id="password">
  </form>
</body>

</html>

输入框样式

如下代码展示了如何设置输入框样式：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>输入框的样式</title>
  <style>
    input {
      /* 用来设置输入框的获取焦点时的外边框的样式 */
      outline: groove;
      /* 用来设置输入框的边框 */
      border: none;
      border-bottom: .5px solid rgb(141, 41, 41);
    }
  </style>
</head>

<body>
  <form action="#">
    <label for="username">用户名: </label>
    <input type="text" id="username" placeholder="请输入你的用户名">
    <label for="password">密码: </label>
    <input type="password" id="password">
  </form>
</body>

</html>

`textarea`元素

<textarea>元素: 多行文本框

1、属性:

cols: 设置文本域的可视宽度。必须是正数, 默认值为20

rows: 设置文本域的可视高度。必须是正数

2、特点: 允许用户调整在HTML页面中显示区域

如下实例代码展示了textarea元素的使用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>textarea元素</title>
  <style>
    textarea {
      outline: none;
      /* 禁止用户改变文本域的显示区域 */
      resize: none;
    }
  </style>
</head>

<body>
  <form action="#"> 
    <textarea cols="30" rows="10"></textarea>
  </form>
</body>

</html>

`<select>元素`

<select>元素: 下拉列表

1、默认情况下, 下拉单选

2、设置为下拉多选

multiple属性: 表示多选

size属性: 设置显示几个选项

3、元素: 列表项目

属性:

selected: 设置当前项目被选中

分组: 将<option>元素放在<optgroup>元素中

如下代码展示了select元素的使用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>select元素</title>
</head>

<body>
  <form action="#">
    <select>
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="chongqing">重庆</option>
    </select>
    <select multiple size="3">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="chongqing">重庆</option>
    </select>
    <select>
      <optgroup>
        <option value="html">html</option>
        <option value="css">css</option>
        <option value="javascript">javascript</option>
      </optgroup>
      <optgroup>
        <option value="html5">html5</option>
        <option value="css3" selected>css3</option>
        <option value="ecmascript6">ecmascript6</option>
      </optgroup>
    </select>
  </form>
</body>

</html>

组合表单元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组合表单元素</title>
</head>

<body>
  <form action="#">
    <!-- 将表单组件元素进行分组 -->
    <fieldset>
      <!-- 为每个分组设置一个标题 -->
      <legend>19级启嘉班</legend>
      <!-- 表单组件元素 -->
      <label for="username">用户名: </label>
      <input type="text" id="username" placeholder="请输入你的用户名">
      <label for="password">密码: </label>
      <input type="password" id="password">
    </fieldset>
    <fieldset>
      <legend>18级启嘉班</legend>
      <label for="username">用户名: </label>
      <input type="text" id="username" placeholder="请输入你的用户名">
      <label for="password">密码: </label>
      <input type="password" id="password">
    </fieldset>
  </form>
</body>

</html>

datalist元素

元素（允许复用）:

作用: 提供了一组列表项.
与<select>元素的区别:

<select>元素: 必须在该元素内部定义<option>元素

<datalist>元素: 是一个独立的列表项

如下代码展示了datalist元素的使用方法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>datalist元素</title>
</head>

<body>
  <form action="#">
    <!-- 
      <input>元素与<datalist>元素配合使用
      * <input>元素设置list属性: 值与<datalist>元素的id属性值一致
      * <datalist>元素设置id属性
     -->
    <input list="cities">
    <input list="cities">

    <datalist id="cities">
      <option value="beijing">北京</option>
      <option value="shanghai" selected>上海</option>
      <option value="chongqing">重庆</option>
    </datalist>
  </form>
</body>

</html>

meter元素和progress元素

1、 <meter>元素: 刻度条

属性:

  value: 表示当前刻度的值(介于min和max之间的值)

min: 设置刻度的最小边界

   max: 设置刻度的最大边界

  low: 设置刻度的最小预警值

high: 设置刻度的最大预警值

2、 <progress>元素: 进度条

属性:

value: 表示当前进度的值

 max: 设置进度的最大值

如下代码展示了meter元素和progress元素的使用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>meter和progress元素</title>
</head>

<body>
  <form action="#">
    <meter value="30" min="0" max="100" low="40" high="80"></meter>
    <progress max="100" value="70"></progress>
  </form>
</body>

</html>

元素状态伪类选择器

:disabled伪类表示选中不可用的元素
:enabled伪类表示选中可用的元素
:checked伪类表示选中被选中的单选框或复选框

如下代码所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素状态伪类选择器</title>
  <style>
    /* :disabled伪类表示选中不可用的元素 */
    input:disabled {
      background-color: lightsalmon;
    }

    /* :enabled伪类表示选中可用的元素 */
    input:enabled {
      background-color: magenta;
    }

    /* :checked伪类表示选中被选中的单选框或复选框 */
    input:checked {
      box-shadow: 0 0 0 3px orange;
    }
  </style>
</head>

<body>
  <form action="#">
    <input type="text" placeholder="请输入你的用户名" disabled>
    <input type="text" placeholder="请输入你的地址">
    <input type="radio" name="like" checked>html
    <input type="radio" name="like">css
    <input type="radio" name="like">javascript
  </form>
</body>

</html>

表单验证

HTML5新增有关表单验证的内容:

一系列可用于验证的元素或类型, 比如 input type="email/url"
提供一系列用于验证的属性:

required属性: 验证是否为空
pattern属性: 验证与指定正则表达式是否一致
min属性: 验证是否小于最小值
max属性: 验证是否大于最大值
step属性: 验证是否符合步长
minlength属性: 验证内容的长度是否小于最小长度
maxlength属性: 验证并限制内容的长度是否大于最大长度

注意:

验证是在提交表单时进行验证，验证属性一般情况需要与DOM(visibility对象)配合使用

如下示例代码所示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单验证</title>
</head>

<body>
  <form action="#">
    <input type="text" placeholder="请输入你的用户名" required>
    <input type="text" placeholder="请输入你的地址" pattern="^[a-zA-Z0-9]{6,12}$">
    <input type="password" minlength="4" maxlength="8">
    <input type="number" min="2" max="10" step="2">
    <input type="submit" value="提交">
  </form>
</body>

</html>

【HTML】表单

表单

<form>元素

<input>元素

<label>元素