HTML标签汇总（基础表单部分）

HTML标签汇总（基础表单部分）

---

<form>

• 用于用户输入创建的HTML表单
• 表单包含<input>元素，比如文本字段，复选框，单选框，提交按钮等等
• 表单还可以包含menus、textarea、fieldset、legend和label元素
• 表单用于向服务器传输数据
• form元素是块级元素，前后会产生折行

属性	值	描述
accept	MIME_type	HTML5中不支持
accept-charset	charset_list	UTF-8——unicode字符编码 ISO-8859-1——拉丁字母表的字符编码 Gb2312——简体中文字符集
action	URL	规定当提交表单是向何处发送表单数据
autocomplete	on off	规定是否启用表单自动完成功能
enctype	application/x-www-form-urlencoded——在发送前编码所有内容（默认） multipart/form-data——不对字符编码。在使用包含文件上传控件的表单时使用 text/plain——空格转换为 “+” 加号，但不对特殊字符编码	规定在发送到服务器之前应该如何对表单进行编码
method	get post	规定用于发送form-data的HTTP方法
name	form_name	规定表单的名称
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证
target	_blank——在新窗口中打开 _self——默认。在相同的窗口打开 _parent——在父框架中打开 _top——在整个窗口中打开 framenane——在指定的框架中打开	规定在何处打开action URL

---

文本域

<form>
	名：
	<input type="text" name="firstname">
	<br />
	姓：
	<input type="text" name="lastname">
</form>

👇运行结果👇

---

密码域

<form>
	用户：
	<input type="text" name="user">
	<br />
	密码：
	<input type="password" name="password">
</form>

👇运行结果👇

---

复选框

<form>
	我喜欢自行车：
	<input type="checkbox" name="Bike">
	<br />
	我喜欢汽车：
	<input type="checkbox" name="Car">
</form>

👇运行结果👇

---

单选按钮

<form>
	男性：
	<input type="radio" checked="checked" name="Sex" value="male" />
	<br />
	女性：
	<input type="radio" name="Sex" value="female" />
</form>

👇运行结果👇

---

简单的下拉列表

<form>
	<select name="cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="fiat">Fiat</option>
		<option value="audi">Audi</option>
	</select>
</form>

👇运行结果👇

---

有预选值的下拉列表

<form>
	<select name="cars">
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="fiat" selected="selected">Fiat</option>
		<option value="audi">Audi</option>
	</select>
</form>

👇运行结果👇

---

多行文本输入

<textarea rows="10" cols="30"></textarea>

👇运行结果👇

---

按钮

<form>
	<input type="button" value="按钮">
</form>

👇运行结果👇

---

带“框”的表单

<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    <br>
    体重：<input type="text" />
  </fieldset>
</form>

👇运行结果👇

---

带有输入框和提交按钮的表单

<form action="/demo/demo_form.asp">
	First name:<br>
	<input type="text" name="firstname" value="周">
	<br>
	Last name:<br>
	<input type="text" name="lastname" value="杰伦">
	<br><br>
	<input type="submit" value="提交">
</form> 

👇运行结果👇

• 如果点击提交，表单会被发送到名为demo_form.asp的页面

---

带有复选框和提交按钮的表单

<form name="input" action="demo_form.asp" method="get">
	I have a bike:
	<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
	<br />
	I have a car: 
	<input type="checkbox" name="vehicle" value="Car" />
	<br />
	I have an airplane: 
	<input type="checkbox" name="vehicle" value="Airplane" />
	<br /><br />
	<input type="submit" value="提交" />
</form> 

👇运行结果👇

• 如果单击提交，表单会被发送到名为demo_form.asp的页面

---

带有单选框的提交按钮的表单

<form>
	<input type="radio" name="sex" value="male" checked>男
	<br>
	<input type="radio" name="sex" value="female">女
	<br /><br />
	<input type="submit" value="提交" />
</form> 

👇运行结果👇

• 如果单击提交，表单会被发送到名为demo_form.asp的页面

---

从表单发送电子邮件

<form action="MAILTO:demo@qq.com" method="post" enctype="text/plain">
	姓名：<br />
	<input type="text" name="name" value="周杰伦" size="20">
	<br />
	电邮：<br />
	<input type="text" name="mail" value="abc.com" size="20">
	<br />
	内容：<br />
	<input type="text" name="comment" value="你好！" size="40">
	<br /><br />
	<input type="submit" value="发送">
</form>

👇运行结果👇

• 单击发送，这个表单会发送到demo@qq.com

---

<input>

属性	值	描述
accept	mime_type	规定通过文件上传来提交的文件类型
alt	value	定义图像的替代文本。alt属性只能配合<input type="image">使用，用于在无法查看图像时提供备选信息
autocomplete	on off	规定是否使用输入字段的自动完成功能
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点（不适用与type="hidden"）
checked	checked	规定此input元素首次加载时应被选中
disabled	disabled	当input元素加载时禁用此元素
form	FormName	规定输入字段所属的表单
formaction	URL	覆盖表单的action属性 （适用于type=“submit"和type=“image”）
formenctype	application/x-www-form-urlencoded——在发送前编码所有内容（默认） multipart/form-data——不对字符编码。在使用包含文件上传控件的表单时使用 text/plain——空格转换为 “+” 加号，但不对特殊字符编码。	覆盖表单的enctype属性 （适于于type=“submit”和type=“image”）
formmethod	get post	覆盖表单的method属性 （适用于type=“submit”和type=“image”）
formnovalidate	formnovalidate	覆盖表单的novalidate属性如果使用该属性，则提交表单是不进行验证
formtarget	_blank——在新窗口中打开 _self——默认。在相同的窗口打开 _parent——在父框架中打开 _top—— 在整个窗口中打开 framenane——在指定的框架中打开	覆盖表单的target属性 （适用于type=“submit”和type=“image”）
height	pixels %	定义input字段的高度。 （适用于type=“image”）
width	pixels %	定义input字段的宽度。 （适用于type=“image”）
list	datalist-id	见表格底部详情
max	number date	规定输入字段的最大值
min	number date	规定输入字段的最小值
maxlength	number	规定输入字段子厚字符的最大长度
multiple	multiple	如果使用该属性，则允许一个以上的值
name	field_name	定义input元素名称
pattern	regexp_pattern	规定输入字段的值的模式或格式(正则表达式) 例如：pattern="[0-9]{3}"表示输入值必须是0到9之间的三个数字
placeholder	text	placeholder属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并在字段获得焦点时消失
readonly	readonly	规定输入字段为只读
required	required	规定输入框为必填
size	number_of_char	定义输入字段的宽度
src	URL	定义提交按钮的图像的URL src属性只能与<input ytpe="image">同时使用
step	number	规定输入字的合法数字间隔 例如，step=“3”，则合法数字应该是-3、0、3、6、以此类推 step属性可以与max以及min属性配合使用，已创建合法值的范围
type	button——定义可点击按钮 checkbox——定义复选框 file——定义文件上传按钮，定义输入字段和“浏览”按钮供文件上传 hidden——定义隐藏的输入字段，隐藏字段对用户是不可见的 image——定义图像形式的提交按钮 password——定义密码字段，该字段中的字符被掩码 radio——定义单选按钮 reset——定义重置按钮，重置按钮会清除表单中的所有数据。 submit——定义提交按钮，提交按钮会把表单数据发送到服务器 text——定义单行的输入字段，用户可在其中输入文本，默认宽度是20个字符	规定input元素的类型
value	value	规定input元素的值

list

<form action="/demo/demo_form.asp">
	网页：<input type="url" list="url_list" name="link" />
	<datalist id="url_list">
		<option label="W3School" value="http://www.w3school.com.cn" />
		<option label="Google" value="http://www.google.com" />
		<option label="Microsoft" value="http://www.microsoft.com" />
	</datalist>
	<input type="submit" />
</form>

👇运行结果👇

---

<textarea>

• 定义多行文本输入控件，容纳无限数量的文本
• 在文本输入区的文本行间，用“%OD%OA”（回车/换行）进行分隔

属性	值	描述
autofocus	autofocus	规定在页面加载后文本区域自动获得焦点
cols	number	规定文本区内的可见宽度
rows	number	规定文本内的可见行数
disabled	disabled	规定禁用该文本区
form	form_id	规定文本区域所属的表单
maxlength	number	规定文本区域的最大字符数
name	name_of_textarea	规定文本区的名称
placeholder	text	规定描述文本区域预期值的简短提示
readonly	readonly	规定文本区为只读
required	required	规定文本区域是必填的
wrap	hard soft	值为hard时，textarea中的文本换行（包含换行符）且必须规定cols属性 值为soft时，textarea中的文本不换行。默认值

---

<button>

• <button>控件 与<input type="button">相比，提供更为强大的功能和丰富的内容。
• <button>与</button>标签之间的所有内容都是按钮的内容，可以使用除了图像映射以外的所有内容。
• 始终为按钮规定type属性。因为IE的默认值是“button”，而其他浏览器的默认值是“submit”

属性	值	描述
autofocus	autofocus	规定当前界面加载时按钮应当自动获得焦点
disabled	disabled	规定禁用该按钮
form	form	规定按钮所属的表单
formaction	URL	覆盖form元素的action属性 （该属性与type="submit”配合使用）
formenctype	application/x-www-form-urlencoded——在发送前编码所有内容（默认） multipart/form-data——不对字符编码。在使用包含文件上传控件的表单时使用 text/plain——空格转换为 “+” 加号，但不对特殊字符编码。	覆盖form元素的enctype属性 （该属性与type="submit”配合使用）
formmethod	get post	覆盖form元素的method属性 （该属性与type="submit"配合使用）
formnovalidate	formnovalidate	覆盖form元素的novalidate属性 （该属性与type="submit"配合使用)
formtarget	_blank——在新窗口中打开 _self——默认。在相同的窗口打开 _parent——在父框架中打开 _top—— 在整个窗口中打开 framenane——在指定的框架中打开	覆盖form元素的target属性 （该属性与type="submit"配合使用）
mane	button_name	规定按钮的类型
type	button——提交按钮（除IE浏览器外的其他浏览器的默认值） reset——可点击按钮（IE浏览器的默认值） submit——重置按钮	规定按钮的类型
value	text	规定按钮的初始值

---

<select>

• <option>标签用于定义列表中的可用选项
• select元素是一种表单控制，可以在表单中接受用户输入

属性	值	描述
autofocus	autofocus	归档在页面加载后文本区域自动获得焦点
disabled	disabled	规定禁用该下拉列表
form	form_id	规定列表的所属表单
multiple	multiple	规定可选择多个选项
name	name	规定下拉列表的名称
required	required	规定文本区域是必填的
size	number	规定下拉列表中可见选项数目

---

<optgroup> 
<option>

<select>
  <optgroup label="男性">
    <option value="正义仲裁者">正义仲裁者</option>
    <option value="狂战士">狂战士</option>
  </optgroup>
  <optgroup label="女性">
    <option value="芙蕾雅">芙蕾雅</option>
    <option value="花花">花花</option>
  </optgroup>
</select>

👇运行结果👇

optgroup

属性	值	描述
label	text	为选项组规定描述
disabled	disabled	规定禁用该选项组

option

属性	值	描述
disabled	disabled	规定此选项应在首次加载是被禁用
label	text	定义当使用<optgroup>时所使用的标注
selected	selected	规定选项（在首次显示在列表时）表现为选中状态
value	text	定义送往服务器的选项值

---

<label>

• <label>标签为input元素定义标注（标记）
• label元素不会呈现任何特殊效果，不过它为鼠标用户改进了可用性。当用户选择该标签时，浏 览器会自动将焦点转到和标签相关的表单控件上
• <label>标签的for属性应当与相关元素的id属性相同

属性	值	描述
for	id	规定label绑定到哪个表单元素
form	formid	规定label字段所属的表单

---

<fieldset>

属性	值	描述
disabled	disabled	规定应该禁止使用fieldset
form	form_id	规定fieldset所属的表单
name	value	规定fieldset的名称

---

<legend>

• 为fieldset元素定义标题

---

<datalist>

• 定义选项列表，与input元素配合使用
• datalist及其选项不会被显示出来，他仅仅是金额发的输入值列表
• 请用input元素的list属性来绑定datalist

---

<keygen>

• 规定用与表单的密钥对生成器字段，当提交表单时，私钥存储在本地，公钥发动到服务器

属性	值	描述
autofocus	autofocus	使keygen字段在页面加载时获得焦点
challenge	challenge	如果使用，则将keygen的值设置为在提交时询问
disabled	disabled	禁用keygen字段
form	formname	定义keygen字段所属的表单
keytype	rsa	定义keytype。rsa生成密钥
name	rieldname	定义keygen元素的唯一名称name属性用于在提交表单时搜集字段的值

---

<output>

• 定义不同类型的输出，比如脚本的输出。

属性	值	描述
for	element_id	定义输出域相关的元素
form	form_id	定义输入字段所属的表单
name	name	第一对象的唯一名称（表单提交时使用）