前端学习---HTML---表单

文章目录

• [1、 新的 input 类型](#1、 新的 input 类型)
• 2、新的表单元素
• • 2.1、\<datalist>
  • 2.2、\<output>
  • [2.3、\<progress> 和 \<meter>](#2.3、<progress> 和 <meter>)
• [3、 新的表单属性](#3、 新的表单属性)
• • [3.1、适用于 \<form> 的属性](#3.1、适用于 <form> 的属性)
  • [3.2、适用于 \<input> 的常用属性](#3.2、适用于 <input> 的常用属性)
• [4、 表单验证（Validation）](#4、 表单验证（Validation）)
• 5、综合示例

HTML5 对表单进行了大幅增强，引入了许多新的 input 类型、元素和属性，让表单功能更强大、交互更友好，同时也简化了前端开发。

1、 新的 input 类型

HTML5 为 <input> 增加了多个专用类型，以便在移动端调出合适的键盘，并提供内置的输入校验。

类型	描述
email	用于输入电子邮件地址，提交时会自动检查格式（必须包含 @ 和域名）。
url	用于输入网址，要求符合 URL 格式（如 http:// 开头）。
tel	用于输入电话号码，不强制格式，但在移动端会弹出数字键盘。
number	只能输入数字，可设置 min、max、step 控制范围。
range	滑动条，同样支持 min、max、step。
date	日期选择器（年-月-日），浏览器会提供日历控件。
time	时间选择器（时:分）。
datetime-local	本地日期和时间，无时区。
month	选择年份和月份。
week	选择年份和周数。
color	颜色选择器，点击会弹出取色面板。
search	搜索框，在某些浏览器中输入时会出现清除按钮。

示例：

<input type="email" placeholder="输入邮箱">
<input type="range" min="0" max="100" value="50">
<input type="date">

2、新的表单元素

HTML5 增加了几个语义化元素，用于构建更清晰、更易访问的表单。

2.1、<datalist>

为输入框提供预定义选项列表，用户既可输入也可选择。需通过 list 属性关联。

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Edge">
</datalist>

2.2、<output>

表示计算结果或用户操作的输出，常用于脚本动态显示值。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="20"> =
  <output name="result" for="a b">70</output>
</form>

2.3、<progress> 和 <meter>

<progress> 显示任务的完成进度（如文件上传）。

<meter> 表示已知范围内的度量值（如磁盘使用量）。

3、 新的表单属性

HTML5 为 <form> 和 <input> 增加了很多实用属性，减少了 JavaScript 代码量。

3.1、适用于 <form> 的属性

novalidate：提交时跳过浏览器内置验证。

autocomplete：设置表单是否启用自动填充（on / off）。

3.2、适用于 <input> 的常用属性

placeholder：输入框内的占位提示文本。

required：必填字段，提交前不能为空。

pattern：用正则表达式自定义输入格式（如手机号）。

autofocus：页面加载时自动聚焦到此输入框。

multiple：允许输入多个值（如 email 类型可输入多个邮箱，用逗号分隔）。

min / max / step：限制数字或日期范围及步长。

form：让 input 元素放在表单外部也能关联指定表单（通过表单的 id）。

<input type="text" pattern="[A-Za-z]{3,10}" title="3到10个字母" required>
<input type="file" multiple>

4、 表单验证（Validation）

HTML5 内置了表单验证功能，无需写 JavaScript 即可进行基本的输入检查。

自动验证：根据 type、required、pattern 等自动触发。

CSS 伪类：可用 :valid 和 :invalid 为不同状态的输入框设置样式。

约束验证 API：通过 JavaScript 访问 checkValidity()、setCustomValidity() 等方法自定义验证行为。

阻止浏览器默认验证提示：

如果需要自定义验证提示，可在 form 上设置 novalidate 属性，然后用 JavaScript 接管。

5、综合示例

<form action="/submit" method="post">
  <label for="name">姓名（必填）:</label>
  <input type="text" id="name" name="name" required placeholder="请输入姓名">

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" placeholder="example@domain.com">

  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" min="18" max="100">

  <label for="color">喜欢的颜色:</label>
  <input type="color" id="color" name="color">

  <label for="browser">选择浏览器:</label>
  <input list="browsers" id="browser" name="browser">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
  </datalist>

  <button type="submit">提交</button>
</form>