HTML 表单用于搜集不同类型的用户输入，
表单是网页中收集用户输入的重要元素，通过表单可以实现用户注册、登录、搜索等各种交互功能。
<!DOCTYPE html>
<html>
<body>
<h2>HTML 表单</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</form>
<p>如果单击"提交"按钮，表单数据将被发送到名为"/action_page.php"的页面。</p>
</body>
</html>
目录
1.HTML--表单元素
1.1.form--表单起始
HTML <form> 表单用于收集用户输入。
<form>
.
form elements
.
</form><form> 元素定义 HTML 表单。
HTML 表单包含表单元素。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
1.2.input--输入
HTML <input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
这是本章中使用的类型:
| 类型 | 描述 |
|---|---|
| <input type="text"> | 定义常规文本输入。 |
| <input type="radio"> | 定义单选按钮输入（选择多个选择之一） |
| <input type="checkbox"> | 定义提交按钮（提交表单） |
| <input type="submit"> | 显示提交按钮（用于提交表单） |
| <input type="button"> | 显示可单击的按钮 |
1.2.3.文本输入
<input type="text"> 定义用于文本输入的单行输入字段:
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html> <!-- HTML文档的根元素 -->
<body> <!-- 文档主体部分 -->
<!-- 二级标题，描述这部分内容是文本输入框 -->
<h2>input 文本输入框</h2>
<!-- 表单开始标签（未设置action和method属性，默认提交到当前页面） -->
<form>
<!-- 第一个输入框的标签，for属性关联到id为fname的输入框 -->
<label for="fname">First name:</label><br>
<!-- 文本输入框
type="text" 定义单行文本输入
id="fname" 唯一标识符
name="fname" 提交时的参数名
value="John" 默认值 -->
<input type="text" id="fname" name="fname" value="John"><br>
<!-- 第二个输入框的标签 -->
<label for="lname">Last name:</label><br>
<!-- 第二个文本输入框 -->
<input type="text" id="lname" name="lname" value="Doe">
</form>
<!-- 说明性段落1：关于表单外观的说明 -->
<p>请注意，表单本身是不可见的。</p>
<!-- 说明性段落2：关于输入框默认宽度的说明 -->
<p>另请注意，文本输入字段的默认宽度为 20 个字符。</p>
</body> <!-- 文档主体结束 -->
</html> <!-- HTML文档结束 -->
注释: 表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
1.3.label--属性
注意上面例子中 <label> 元素的用法。
<label> 标签为许多表单元素定义了一个标签。
<label> 元素对于屏幕阅读器用户很有用，因为当用户关注输入元素时，屏幕阅读器会大声读出标签。
<label> 元素还可以帮助那些很难单击很小区域（例如单选按钮或复选框）的用户，因为当用户单击 <label> 元素中的文本时，它会切换单选按钮/复选框。
<label> 标签的 for 属性应该等于 input 元素的 id 属性，以便将它们绑定在一起。
1.4.radio--单选
<input type="radio"> 定义单选按钮。
单选按钮允许用户在有限数量的选项中选择其中之一:
<!DOCTYPE html>
<html>
<body>
<h2>Radio 单选按钮</h2>
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">其他</label>
</form>
</body>
</html>
一个按钮一个标签，
1.5.checkbox--多选
<input type="checkbox"> 定义复选框，也就是允许多选
复选框允许用户从有限的选项中选择零个或多个选项。
<!DOCTYPE html>
<html>
<body>
<h2>复选框</h2>
<p><strong>input type="checkbox"</strong> 定义了一个复选框：</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> 我有一辆自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> 我有一辆车</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> 我有一条船</label><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
1.6.submit--提交
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。
表单处理程序在表单的 action 属性中指定:
<!DOCTYPE html>
<html>
<body>
<h2>HTML 表单</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</form>
<p>如果单击"提交"按钮，表单数据将被发送到名为"/action_page.php"的页面。</p>
</body>
</html>
1.7.name--input必带
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
如果省略 name 属性，则根本不会发送输入字段的值。
<!DOCTYPE html>
<html>
<body>
<h2>name 属性</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="提交">
</form>
<p>如果单击"提交"按钮，表单数据将被发送到名为"/action_page.php"的页面。</p>
<p>请注意，"First name"字段的值将不会被提交，因为 input 元素没有 name 属性。</p>
</body>
</html>
1.8.select--下拉列表
<select> 元素定义下拉列表:
<!DOCTYPE html>
<html>
<body>
<h2>select 元素</h2>
<p>select 元素定义了一个下拉列表：</p>
<form action="/action_page.php">
<label for="cars">选择一辆车：</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
<option> 元素定义待选择的选项。
列表通常会把首个选项显示为被选选项。
您能够通过添加 selected 属性来定义预定义选项。
可见值:
使用 size 属性指定可见值的数量:
<!DOCTYPE html>
<html>
<body>
<h2>可见的选项值</h2>
<p>使用 size 属性指定可见值的数量。</p>
<form action="/action_page.php">
<label for="cars">选择一辆车：</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
</body>
</html>
允许多选:
使用 multiple 属性允许用户选择多个值:
<!DOCTYPE html>
<html>
<body>
<h2>允许选择多项</h2>
<p>使用 multiple 属性允许用户选择多个值。</p>
<form action="/action_page.php">
<label for="cars">选择一辆车：</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit">
</form>
<p>按住 Ctrl (windows) / Command (Mac) 按钮选择多个选项。</p>
</body>
</html>
1.9.textarea--文本域
<textarea> 元素定义多行输入字段（文本域）:
<!DOCTYPE html>
<html>
<body>
<h2>textarea 文本区域</h2>
<p>textarea 元素定义了一个多行输入字段。</p>
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">猫在花园里玩耍。</textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
1.10.fieldset--分组
fieldset：领域集；legend：说明
<fieldset> 元素用于将表单中的相关数据分组。
<legend> 元素定义 <fieldset> 元素的标题。
<!DOCTYPE html>
<html>
<body>
<h2>使用 Fieldset 对表单数据进行分组</h2>
<p>fieldset 元素用于对表单中的相关数据进行分组，legend 元素定义了 fieldset 元素的标题。</p>
<form action="/action_page.php">
<fieldset>
<legend>个人资料：</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>
1.11.datalist--预定义列表
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
<!DOCTYPE html>
<html>
<body>
<h2>datalist 元素</h2>
<p>datalist 元素指定输入元素的预定义选项列表。</p>
<form action="/action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>注意：</b> Safari 12.1 之前的版本不支持 datalist 标签。</p>
</body>
</html>
1.12.output--计算结果
<output> 元素表示计算结果（类似于脚本执行的计算）。
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<html> <!-- HTML文档的根元素 -->
<body> <!-- 文档主体部分 -->
<!-- 二级标题，说明这部分内容是关于output元素 -->
<h2>output 元素</h2>
<!-- 段落说明output元素的作用 -->
<p>output 元素表示计算的结果。</p>
<!-- 表单开始标签
action="/action_page.php" 指定表单提交地址
oninput 事件在输入值改变时触发计算 -->
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<!-- 范围滑块输入框
type="range" 定义滑块控件
id="a" 唯一标识符
name="a" 提交时的参数名
value="50" 默认值 -->
0
<input type="range" id="a" name="a" value="50">
<!-- 数字输入框
type="number" 定义数字输入
id="b" 唯一标识符
name="b" 提交时的参数名
value="50" 默认值 -->
100 +
<input type="number" id="b" name="b" value="50">
<!-- 输出计算结果
name="x" 输出结果的名称
for="a b" 指定关联的输入元素 -->
=
<output name="x" for="a b"></output>
<!-- 换行 -->
<br><br>
<!-- 提交按钮 -->
<input type="submit">
</form>
<!-- 浏览器兼容性说明 -->
<p><strong>注意：</strong>Edge 13 之前的版本不支持 output 元素。</p>
</body> <!-- 文档主体结束 -->
</html> <!-- HTML文档结束 -->
2.HTML--表单属性
本章介绍 HTML <form> 元素的不同属性。
2.1.Action 属性
action 属性定义提交表单时要执行的操作。
通常，当用户单击"提交"按钮时，表单数据将发送到服务器上的文件中。
在下面的例子中，表单数据被发送到名为 "action_page.php" 的文件。该文件包含处理表单数据的服务器端脚本:
<!DOCTYPE html>
<html>
<body>
<h2>HTML 表单</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</form>
<p>如果单击"提交"按钮，表单数据将被发送到名为"/action_page.php"的页面。</p>
</body>
</html>
提示: 如果省略 action 属性，则将 action 设置为当前页面。
2.2.Target 属性
target 属性规定提交表单后在何处显示响应。
target 属性可设置以下值之一:
| 值 | 描述 |
|---|---|
| _blank | 响应显示在新窗口或选项卡中。 |
| _self | 响应显示在当前窗口中。 |
| _parent | 响应显示在父框架中。 |
| _top | 响应显示在窗口的整个 body 中。 |
| framename | 响应显示在命名的 iframe 中。 |
默认值为 _self ，这意味着响应将在当前窗口中打开。
2.3.Method 属性
method 属性指定提交表单数据时要使用的 HTTP 方法。
表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP post 事务（使用 method="post"）发送。
提交表单数据时，默认的 HTTP 方法是 GET。
<!DOCTYPE html>
<html>
<body>
<h2>method 方法属性</h2>
<p>此表单将使用 GET 方法提交：</p>
<form action="/action_page.php" target="_blank" method="get">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="提交">
</form>
<p>提交后，请注意表单值在新浏览器选项卡的地址栏中可见。</p>
</body>
</html>
关于 GET 的注意事项:
- 以名称/值对的形式将表单数据追加到 URL
- 永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
- URL 的长度受到限制（2048 个字符）
- 对于用户希望将结果添加为书签的表单提交很有用
- GET 适用于非安全数据，例如 Google 中的查询字符串
关于 POST 的注意事项:
- 将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
- POST 没有大小限制，可用于发送大量数据。
2.4.Autocomplete 属性
autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。
<!DOCTYPE html>
<html>
<body>
<h1>表单 autocomplete 自动完成属性</h1>
<p>填写并提交表格，然后重新加载页面，再次开始填写表格——看看自动完成是如何工作的。</p>
<p>然后，尝试将自动完成设置为"off"。</p>
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email"><br><br>
<input type="submit">
</form>
</body>
</html>
2.5.Novalidate 属性
novalidate 属性是一个布尔属性。
如果已设置，它规定提交时不应验证表单数据。
| 属性 | 描述 |
|---|---|
| accept-charset | 规定用于表单提交的字符编码。 |
| action | 规定提交表单时将表单数据发送到何处。 |
| autocomplete | 规定表单是否应打开自动完成（填写）功能。 |
| enctype | 规定将表单数据提交到服务器时应如何编码 (仅供 method="post") |
| method | 规定发送表单数据时要使用的 HTTP 方法。 |
| name | 规定表单名称。 |
| novalidate | 规定提交时不应验证表单。 |
| rel | 规定链接资源和当前文档之间的关系。 |
| target | 规定提交表单后在何处显示接收到的响应。 |
3.HTML--输入类型
类型(type) |
描述 |
示例代码 |
典型用途 |
|---|---|---|---|
|
普通按钮 |
|
触发JavaScript操作 |
|
复选框 |
|
多项选择 |
|
颜色选择器 |
|
选择颜色值
|
|
日期选择器 |
|
选择日期 |
|
本地日期时间 |
|
选择日期和时间（无时区） |
|
邮箱输入框 |
|
输入电子邮件地址（带验证） |
|
文件上传 |
|
上传文件 |
|
隐藏字段 |
|
存储不可见数据 |
|
图像按钮 |
|
用图片作为提交按钮 |
|
年月选择 |
|
选择年和月 |
|
数字输入 |
|
输入数字（可设范围） |
|
密码框 |
|
输入密码（显示为圆点） |
|
单选按钮 |
|
单项选择（同name分组） |
|
滑块控件 |
|
选择数值范围 |
|
重置按钮 |
|
重置表单数据 |
|
搜索框 |
|
搜索输入（某些浏览器有清除按钮） |
|
提交按钮 |
|
提交表单数据 |
|
电话号码 |
|
输入电话号码（移动设备可能调出数字键盘） |
|
文本输入 |
|
单行文本输入（默认类型） |
|
时间选择 |
|
选择时间 |
|
URL输入 |
|
输入URL地址（带验证） |
|
周选择器 |
|
选择年和周 |
输入限制
以下是一些常见输入限制的列表:
| 属性 | 描述 |
|---|---|
| checked | 指定在页面加载时应预先选择输入字段（对于 type="checkbox" 或 type="radio"） |
| disabled | 规定输入字段应该被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定通过其检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法修改）。 |
| required | 规定输入字段是必需的（必需填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。/td> |
4.HTML--输入属性
以下是HTML <input>元素常用属性的总结表格：
属性 |
描述 |
示例 |
|---|---|---|
value |
设置输入字段的初始值 |
|
readonly |
设置字段为只读（可复制/高亮但不可编辑） |
|
disabled |
禁用输入字段（不可交互/不提交数据） |
|
size |
设置输入框可见宽度（字符数） |
|
maxlength |
允许输入的最大字符数 |
|
min/max |
设置数值/日期的最小/最大值 |
|
multiple |
允许输入多个值 |
|
pattern |
用正则表达式验证输入格式 |
|
placeholder |
显示输入提示文本 |
|
required |
设置必填字段 |
|
step |
设置数值增减步长 |
|
autofocus |
页面加载时自动聚焦 |
|
height/width |
设置图像按钮尺寸 |
|
list |
关联预定义选项的 |
|
autocomplete |
启用/禁用自动填充 |
|
下面是HTML <input> 元素的不同 form* 属性。
4.1.form--定位表单
input 的form 属性规定 <input> 元素所属的表单。
此属性的值必须等于它所属的 <form> 元素的 id 属性。
<!DOCTYPE html>
<html>
<body>
<h1>input form 属性</h1>
<p>form 属性指定输入元素所属的表单。</p>
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="提交">
</form>
<p>下面的"Last name"字段在表单元素之外，但仍然是表单的一部分。</p>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
</body>
</html>
4.2.formaction--特殊处理
input 的 formaction 属性规定当提交表单时，对输入（数据）进行处理的文件的 URL。
注释: 该属性会覆盖 form 元素的 <form> 属性。
formaction 属性适用于以下输入类型:submit 和 image。
<!DOCTYPE html>
<html>
<body>
<h1>input formaction 属性</h1>
<p>formaction 属性指定将在提交表单时处理输入的文件的 URL。</p>
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="提交">
<input type="submit" formaction="/action_page2.php" value="以管理员身份提交">
</form>
</body>
</html>
4.3.formenctype--编码属性
input 的 formenctype 属性指定提交时应如何编码表单数据（仅适用于 method="post" 的表单）。
注释: 此属性将覆盖 <form> 元素的 enctype 属性。
formenctype 属性适用于以下输入类型:submit 和 image。
<!DOCTYPE html>
<html>
<body>
<h1>input formenctype 属性</h1>
<p>formenctype 属性指定表单数据在提交时应如何编码。</p>
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data" value="提交为 Multipart/form-data">
</form>
</body>
</html>
属性 |
适用元素 |
覆盖对象 |
作用描述 |
常用值/示例 |
|---|---|---|---|---|
formmethod |
|
|
指定表单提交的HTTP方法（GET/POST） |
|
formtarget |
|
|
指定表单提交后响应的打开位置 |
|
formnovalidate |
|
|
跳过表单验证提交 |
|
novalidate |
|
无 |
禁用整个表单的验证 |
|
补充说明：
GET vs POST
GET：数据在URL中可见（不安全，有长度限制）
POST：数据在请求体中（较安全，无长度限制）
典型应用场景
同一表单提供两种提交方式（如预览用GET，正式提交用POST）
提交到不同窗口（如主窗口和弹窗）
临时跳过验证（如"保存草稿"按钮）