本文最后更新于：8 个月前

由于Form表单涉及的内容众多，所以从《HTML基础——body部分》中单独抽离出来，进行归纳
内容包括：Form属性、表单标签

HTML基础——表单

示例：

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

HTML 表单用于搜集不同类型的用户输入

<form>元素定义 HTML 表单，<form>元素本身并不可见，可见的是<form>标签内包含的各个元素。

HTML表单包含表单元素，包括： input 元素、textarea元素、复选框、单选按钮、提交按钮等等

一、form属性

1
2
3

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
	...
</form>

属性	描述
action	规定向何处提交表单的地址（URL）（提交页面）
method	规定在提交表单时所用的 HTTP 方法（默认：GET），GET或POST
enctype^[1]	规定被提交数据的编码（默认：url-encoded）
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集
target^[2]	指示在何处打开 action URL，即在何处显示提交表单后接收到的响应（默认：_self）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
novalidate	规定浏览器不验证表单
name	规定识别表单的名称（对于 DOM 使用：document.forms.name），该值必须是所有表单中唯一的

[1] enctype

text/plain，不编码直接发送
application/x-www-form-urlencoded，默认值，编码所有字符（空格编码为+号，特殊符号转为 ASCII HEX 值）
multipart/form-data，不对字符编码，在使用包含文件上传控件的表单时，必须使用该值，即当表单包含<input type="file">时，使用此值

[2] target

_self：默认值。在相同浏览上下文中加载
_blank，提交表单后，打开一个新窗口显示接受到的响应
_parent：在当前上下文的父级浏览上下文中加载，如果没有父级，则与 _self 表现一致
_top：在最顶级的浏览上下文中（即当前上下文的一个没有父级的祖先浏览上下文），如果没有父级，则与 _self 表现一致

二、input元素

1、type属性

类型	描述
text	定义常规文本输入
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮输入
checkbox	定义复选框
file	定义输入字段和 “浏览”按钮，供文件上传，此时input表现为「块级元素」
image	定义图像形式的提交按钮
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
submit	定义提交按钮（提交表单）
reset	定义重置按钮。重置按钮会清除表单中的所有数据
hidden	定义隐藏的输入字段允许 Web 开发者包含用户不可见、不可改的数据，在用户提交表单时，这些数据会一并发送出用户不可见，但是可以通过浏览器开发工具获取该元素并修改

	以下为H5新增加的 type
date	定义日期输入，Internet Explorer、Firefox 或者 Chrome 不支持
week	定义周输入，
month	定义月份输入，Internet Explorer 或 Firefox 不支持
color	定义颜色选择器，Internet Explorer 和 Safari 不支持
email	定义邮箱输入，加入了输入验证
number	定义数字输入
range	定义滑块输入器
search	Internet Explorer 9（以及更早的版本）或 Safari 不支持
url	定义url输入

示例：

上述示例的代码如下：

<form>
    text:<input type="text" name="id" placeholder="id" value="" style="border: 2px solid gray"><br/>
    password:<input type="password" value="123456" style="border: 2px solid gray"><br>
    radio:<input type="radio" name="sex" value="male" checked > 男  
    <input type="radio" name="sex" value="female" > 女<br/>
    checkbox:<input type="checkbox" name="scales" id="scales_id" checked>
    <label for="scales_id">Scales</label>
    <input type="checkbox" name="horns" id="horns_id">
    <label for="horns_id">Horns</label><br>
    file:<input type="file" name="file_demo" >
    iamge:<input type="image" name="image_demo" alt="图片按钮" src="https://qiuzcc-typora-images.oss-cn-shenzhen.aliyuncs.com/images/2022/202209291029065.webp?x-oss-process=image/resize,h_100,m_lfit"> <br>
    button:<input type="button" value="click and console will log(click me)" onclick="console.log('click me')"><br>
    <input type="submit" placeholder="submit" style="border: 2px solid gray"><br>
    <input type="reset"><br>
    <input type="hidden" name="hidden_id" value="3456"><br>
    date：<input type="date" style="border: 1px solid gray"><br>
    week：<input type="week" style="border: 1px solid gray"><br>
    month：<input type="month" style="border: 1px solid gray"><br>
    color:<input type="color"><br>
    email:<input type="email" value="123" style="border: 1px solid gray"><br>
    number:<input type="number" value="123" style="border: 1px solid gray"><br>
    range:<input type="range" step="1" min="1" max="5" value="1"><br>
    search:<input type="search" style="border: 1px solid gray" value="search text"><br>
    url:<input type="url" style="border: 1px solid gray" value="www.baidu"><br>
</form>

input标签所提交的数据格式为：name=value

注意，label中的for属性，对应的是目标元素的id值，而非name值，label的作用是为input提供更大的点击区域

<!--注意，label中的for属性，对应的是目标元素的id值，而非name值-->
<form>
    <input type="checkbox" name="scales" id="scales_id" checked>
    <label for="scales_id">Scales</label>
    <input type="checkbox" name="horns" id="horns_id">
    <label for="horns_id">Horns</label>
</form>

2、值属性

属性	值	描述
name	field_name	定义 input 元素的名称，拥有name属性的input标签的值才会被form表单提交
value	value	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
list^[1]	datalist-id	引用包含输入字段的预定义选项的 datalist
form	formname	规定输入字段所属的一个或多个表单
placeholder	text	规定帮助用户填写输入字段的提示

[1] list 使用示例

<form action="demo_form.asp">
    Webpage: <input type="url" list="url_list" name="link" />
    <datalist id="url_list">
    <option label="W3Schools" value="http://www.w3schools.com" />
    <option label="Google" value="http://www.google.com" />
    <option label="Microsoft" value="http://www.microsoft.com" />
    </datalist>
    <input type="submit" />
</form>

2、行为属性

属性	值	描述
disabled	disabled	当 input 元素加载时禁用此元素
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点
readonly	readonly	规定输入字段为只读
required	required	指示输入字段的值是必需的

3、限制、校验属性

属性	值	描述
autocomplete	on、off	规定是否使用输入字段的自动完成功能
max/min	number、date	规定输入字段的最大/小值。两者配合使用，来创建合法值的范围
step	number	规定输入字的的合法数字间隔
maxlength/minlength	number	规定输入字段中的字符的最大/小长度
pattern	regexp_pattern	规定输入字段的值的模式或格式例如 pattern=”[0-9]” 表示输入值必须是 0 与 9 之间的数字

4、type=image专有属性

属性	值	描述
width	px	定义 input 字段的宽度
height	px	定义 input 字段的高度
alt	text	定义图像输入的替代文本
src	URL	定义以提交按钮形式显示的图像的 URL

5、type=file专有属性

属性	值	描述
accept	mime_type	规定通过文件上传来提交的文件的类型如果不限制图像的格式，可以写为：accept=”image/*”
multiple	multiple	如果使用该属性，则允许一个以上的值

<form action="demo_form.asp" method="get">
  Select images: <input type="file" name="img" multiple="multiple" accept="image/gif, image/jpeg"/>
  <input type="submit" />
</form>

6、覆盖属性

用input元素的属性覆盖Form属性

属性	描述
formaction	覆盖表单的 action 属性。（适用于 type=”submit” 和 type=”image”）
formenctype	覆盖表单的 enctype 属性。（适用于 type=”submit” 和 type=”image”）
formmethod	覆盖表单的 method 属性。（适用于 type=”submit” 和 type=”image”）
formnovalidate	覆盖表单的 novalidate 属性。如果使用该属性，则提交表单时不进行验证。
formtarget	覆盖表单的 target 属性。（适用于 type=”submit” 和 type=”image”）

三、textarea元素

1
2
3

<form>
    <textarea name="textarea_demo" rows="3" cols="30" placeholder=“在这里输入文本内容”></textarea>
</form>

<textarea> 标签定义多行的文本输入控件

属性	值	描述
name	name_of_textarea	规定文本区的名称
cols	number	规定文本区内的可见宽度
rows	number	规定文本区内的可见行数
wrap	hard、soft	规定当在表单中提交时，文本区域中的文本如何换行
form	form_id	规定文本区域所属的一个或多个表单
maxlength	number	规定文本区域的最大字符数
placeholder	text	规定描述文本区域预期值的简短提示
readonly	readonly	规定文本区为只读
required	required	规定文本区域是必填的
disabled	disabled	规定禁用该文本区
dirname	textareaname.dir	规定被提交的 textarea 的文本方向
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点

四、下拉列表

<form>
    <select name="cars" multiple size="2">
        <option value="volvo">沃尔沃</option>
        <option value="saab">奔驰</option>
        <option value="fiat" selected>奥迪</option>
        <option value="audi">宝马</option>
    </select>
</form>

属性	值	描述
name	name	规定下拉列表的名称
form	form_id	规定文本区域所属的一个或多个表单
multiple	multiple	规定可选择多个选项，windows系统多选操作为：按住Ctrl + 鼠标单击
size	number	规定下拉列表中可见选项的数目
required	required	规定文本区域是必填的
disabled	disabled	规定禁用该下拉列表
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点

五、button元素

<button>和<input type="button">相似，但是两者的行为并不一致。在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处

请在 HTML 表单中使用 input 元素来创建按钮

六、fieldset 标签

示例：

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
    其它输入框：<input type="text">
</form>

作用：

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，比如有边界

可用来将表单内的相关元素分组

属性	值	描述
disabled	disabled	规定应该禁用 fieldset。
name	value	规定 fieldset 的名称
form	form_id	规定 fieldset 所属的一个或多个表单，`<fieldset form="form_id">`，提供在`<form>`标签外关联`<form>`的能力

七、GET和POST的区别

GET - 从指定的资源请求数据

GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求不应在处理敏感数据时使用，数据会作为URL的一部分，对所有人可见，而且会被保存到网络日志中
GET 请求有长度限制
编码类型：application/x-www-form-urlencoded

POST - 向指定的资源提交要被处理的数据

POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 请求对数据长度没有要求
编码类型：application/x-www-form-urlencoded或者multipart/form-data

参考：HTTP 方法：GET 对比 POST | 菜鸟教程 (runoob.com)

HTML > HTML基础

HTML基础——表单

http://timegogo.top/2022/11/01/HTML/HTML基础——表单/

作者

丘智聪

发布于

2022年11月1日

更新于

2023年7月16日

许可协议

性能优化——图片懒加载上一篇

HTTP缓存下一篇