表单元素常记

1. 表单简介

• 表单分为表单元素与控件元素二部分
• 表单元素仅一个: <form>
• 表单控件元素,根据类型不同,有多个

2. 表单元素<form>

2.1 常用属性

序号	属性	描述
1	action	表单提交的 URL 地址(处理表单请求的脚本)
2	method	表单提交类型:GET/POST
3	enctype	设置表单提交数据的编码方式
4	name	表单唯一名称,与 ID 同义
5	target	打开请求 URL 的方式,如果_blank

2.1 请求类型method

• web 请求方式有二种: 超链接与表单提交
• 超链接就是使用<a>标签发起请求,其实就是GET请求
• GET: 默认提交类型,表单数据以查询字符串形式附加到 URL 上
• POST: 请求内容在请求体中
• 请求类型属性action的取值

序号	允许值	描述
1	GET	默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2	POST	表单数据放在请求体中发送,数据量更大也更安全

2.3 编码方式enctype

序号	允许值	适用场景	描述
1	application/x-www-form-urlencoded	key=value	默认值,使用 URL 编码,GET/POST 均适合
2	multipart/form-data	文件上传	采用二进制流处理,会把文件域中的内容封装到请求参数中,适合大文件
3	text/plain	电子邮件	如action="mailto:URL

2.4 表单名称name

序号	功能	描述
1	标识表单元素	与id一样,用来唯一标识该表单元素
2	绑定表单元素	用于表单控件元素的 form 属性,用来绑定所属表单
3	访问表单元素	快捷访问内部控件元素,如form.input.value

2.5 打开方式target

序号	允许值	描述
1	_self	默认值,当前窗口打开提交的 URL
2	_blank	新窗口打开提交的 URL
3	_parent	父窗口打开提交的 URL
4	_top	顶层窗口打开提交的 URL
5	to name	iframe 中的name=’’配合用，指定在iframe 中打开

---

3. 表单控件元素<input>

3.1 常用属性

序号	属性	描述
1	type	控件类型,如文本框, 复选框…
2	name	请求参数的名称,对应于脚本处理的变量名
3	value	请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4	form	控件所属表单
5	placeholder	仅限输入框text和password,输入框的提示信息
6	list	仅限输入框text和password,下拉框智能提示
7	autocomplate	仅限输入框text和password,自动完成(历史记录)
8	maxlength	仅限输入框text/password, 允许输入最大字符数量
9	checked	仅限单选框radio, 复选框checkbox(布尔属性)
10	readonly	元素只读,但通过 JavaScript 可修改(布尔属性)
11	disabled	元素禁用,(布尔属性)
12	autofocus	自动获取焦点,一个表单仅限一个控件
13	src	仅限图像域images, 图像 URL 地址
14	width	仅限图像域images, 图像宽度
15	height	仅限图像域images, 图像高度

3.2 type类型

• 常用类型

序号	类型	描述
1	<input type="text">	单行文本框 (默认值)
2	<input type="password">	密码输入框
3	<input type="radio">	单选框
4	<input type="checkbox">	复选框
5	<input type="image">	图像域/提交表单
6	<input type="file">	文件上传域
7	<input type="hidden">	隐藏域(仅以服务端可见)

• html5 新增类型

序号	类型	描述
1	<input type="email">	电子邮件
2	<input type="data">	日期
2	<input type="data">	日期
4	<input type="datetime-local">	本地日期时间
5	<input type="tel">	电话号码
6	<input type="url">	URL 地址
7	<input type="number">	数值
8	<input type="range">	范围拖动条
9	<input type="search">	搜索框/移动
10	<input type="color">	拾色器

3.3 常用事件属性

序号	事件属性	描述
1	onfocus	获取焦点时触发
2	onblur	失去焦点时触发
3	onchange	失去焦点,且值发生变化时触发
4	oninput	值发生变化(不等失去焦点)时触发
5	onkeydown	按下键盘时触发
6	onkeyup	抬起键盘时触发
7	onclick	鼠标单击时触发
8	onselect	选择内容文本时触发