【HTML】表单应用

一、表单标签

• 表单标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>	指定一个预先定义的输入控件选项列表，html5新增
<keygen>	定义了表单的密钥对生成器字段，新标准已废弃
<output>	定义一个计算结果，html5新增

• 示例
  

<!-- 
常见表单属性：
name：属性标识表单域的名称。
type：属性标识表单控件的类型
value：指定表单控件元素 value 的值
 -->
<form action="demo_form.php" method="get">
	<fieldset>
		<legend>fieldset框的标题</legend>
		<br />账号: <input type="text" name="fname">
		<br />密码: <input type="password" name="lname">
		<br />介绍: <textarea name="textarea">我是一个文本框</textarea>
		<br />性别：
		<!-- label通过for属性，绑定input组件对应的id，实现点击label选中input -->
		<label for="man">男</label>
		<input type="radio" name="sex" id="man" value="man">
		<label for="woman">女</label>
		<input type="radio" name="sex" id="woman" value="woman">
		<br />爱好: 
			<input type="checkbox" name="like" id="like1" value="唱歌" /><label for="like1">唱歌</label>
			<input type="checkbox" name="like" id="like2" value="跳舞" /><label for="like2">跳舞</label>
			<input type="checkbox" name="like" id="like3" value="游泳" /><label for="like3">游泳</label>
			<input type="checkbox" name="like" id="like4" value="健身" /><label for="like4">健身</label>
		<br />国籍: 
		<select name="nationality">
			<optgroup label="第一级">
				<option value="China">中国</option>
			</optgroup>
			<optgroup label="第二级">
				<option value="other">其他国</option>
			</optgroup>
		</select>
		<br />省份: 
		<!-- input通过list属性，绑定datalist组件对应的id -->
		<input list="browsers" name="browser">
		<datalist id="browsers">
			<option value="江西省">
			<option value="其他省">
		</datalist>
		<br />
		<button type="reset">重置按钮</button>
		<button type="submit">提交按钮</button>
		<button type="button">空按钮</button>
		<br /><br />
	</fieldset>
</form>

• 示例：input标签html5新增type属性

<form action="" autocomplete="on">
	<!-- 限制用户必须输入email类型 -->
	邮箱：<input type="email" name="user_email" multiple><br>
	<!-- 限制用户必须输入url类型 -->
	地址：<input type="url" name="user_url"><br>
	<div>
		<!-- 限制用户必须输入数字类型 -->
		数字：<input type="number" name="user_num" placeholder="请输入数字"><br>
	</div>
	<!-- 是用来只允许输入一段范围内数值的文本框，它具有min属性与max属性，
	及step（数字间隔）属性，可以指定每次拖动的步幅 -->
	0 <input type="range" name="user_range" min="0" max="1000" step="50"> 1000 <br>
	<!-- 产生一个搜索意义的表单 -->
	搜索：<input type="search" name="user_search" autofocus><br>
	<!-- 生成一个颜色选择的表单 -->
	颜色：<input type="color" name="user_color"><br>
	<!-- 限制用户必须输入时间类型 -->
	时间：<input type="time" name="user_time"><br>
	<!-- 限制用户必须输入日期类型 -->
	日期：<input type="date" name="user_date"><br>
	<!-- 限制用户必须输入月类型 -->
	月份：<input type="month" name="user_month"><br>
	<!-- 限制用户必须输入周类型 -->
	周数：<input type="week" name="user_week"><br>
	<!-- 选取本地时间 -->
	本地时间：<input type="datetime-local" name="user_local"><br>
	<!--  -->
	<input type="text" name="user_txt" id="" pattern="^([0-9]){7,18}(x|X)?$">
	<!--  -->
	<input type="submit" value="提交">
</form>

二、表单属性

2.1、form 标签属性

属性	值	描述
accept-charset	character_set	规定服务器可处理的表单数据字符集
action	URL	规定当提交表单时向何处发送表单数据。
enctype	application/x-www-form-urlencoded/multipart/form-data/text/plain	规定在向服务器发送表单数据之前如何对其进行编码。（适用于 method=“post” 的情况）
method	get post	规定用于发送表单数据的 HTTP 方法。
name	text	规定表单的名称。
target	_blank、_self、_parent、_top	规定在何处打开 action URL。
autocomplete	on off	规定是否启用表单的自动完成功能，html5新增
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证，html5新增

2.2、input 标签 type 属性

<input type="button" value="点我" onclick="msg()">

• input 标签 type 属性

type值	描述
button	定义可点击的按钮
checkbox	定义复选框
file	定义文件选择字段和 “浏览…” 按钮，供文件上传。
hidden	定义隐藏输入字段，input不可见，但值会上传
image	定义图像作为提交按钮，必须和 src 属性 和 alt 属性结合使用
password	定义密码字段（字段中的字符会被遮蔽）
radio	定义单选按钮
reset	定义重置按钮（重置所有的表单值为默认值）
submit	定义提交按钮
text	默认。定义一个单行的文本字段

• input 标签 type 属性（HTML5新增）

type值	描述
color	定义拾色器
date	定义 date 控件（包括年、月、日，不包括时间）
datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）
datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）
email	定义用于 e-mail 地址的字段
month	定义 month 和 year 控件（不带时区）
number	定义用于输入数字的字段
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）
search	定义用于输入搜索字符串的文本字段
tel	定义用于输入电话号码的字段。
time	定义用于输入时间的控件（不带时区）
url	定义用于输入 URL 的字段
week	定义 week 和 year 控件（不带时区）

2.3、input 标签 other 属性

<input type="button" disabled" value="禁用按钮">

• input 标签其他属性

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
alt	text	定义图像输入的替代文本。 (只针对type=“image”)
checked	checked	checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled	disabled	disabled 属性规定应该禁用的 <input> 元素。
name	text	name 属性规定 <input> 元素的名称。
readonly	readonly	readonly 属性规定输入字段是只读的
size	number	size 属性规定以字符数计的 <input> 元素的可见宽度
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
value	text	指定 <input> 元素 value 的值。

• input 标签其他属性（HTML5新增）

属性	值	描述
autocomplete	on off	autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocus	autofocus	属性规定当页面加载时 <input> 元素应该自动获得焦点。
form	form_id	form 属性规定 元素所属的一个或多个表单。
formaction	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”)
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)。
formmethod	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”)
formnovalidate	formnovalidate	formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formtarget	_blank _self _parent _top framename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”)
height	pixels	规定 <input>元素的高度。(只针对type=“image”)
list	datalist_id	属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
max	number date	属性规定 <input> 元素的最大值。
maxlength	number	属性规定 <input> 元素中允许的最大字符数。
min	number date	属性规定 元素的最小值
multiple	multiple	属性规定允许用户输入到 <input> 元素的多个值。
pattern	regexp	pattern 属性规定用于验证 <input> 元素的值的正则表达式
placeholder	text	placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息
required	required	属性规定必需在提交表单之前填写输入字段
step	number	step 属性规定 元素的合法数字间隔。
width	pixels	width 属性规定 <input> 元素的宽度。 (只针对type=“image”)

2.4、textarea 标签属性

• 常用属性

属性	值	描述
cols	number	规定文本区域内可见的宽度
disabled	disabled	规定禁用文本区域
name	text	规定文本区域的名称
readonly	readonly	规定文本区域为只读
rows	number	规定文本区域内可见的行数

• HTML5新增属性

属性	值	描述
autofocus	autofocus	规定当页面加载时，文本区域自动获得焦点
form	form_id	定义文本区域所属的一个或多个表单
maxlength	number	规定文本区域允许的最大字符数
placeholder	text	规定一个简短的提示，描述文本区域期望的输入值
required	required	规定文本区域是必需的/必填的
wrap	hard、soft	规定当提交表单时，文本区域中的文本应该怎样换行

2.5、label 与 select 标签属性

• label 常用属性

属性	值	描述
for	element_id	规定 label 与哪个表单元素绑定
form	form_id	规定 label 字段所属的一个或多个表单，html5新增

• select 常用属性

属性	值	描述
disabled	disabled	当该属性为 true 时，会禁用下拉列表
multiple	multiple	当该属性为 true 时，可选择多个选项
name	text	定义下拉列表的名称
size	number	规定下拉列表中可见选项的数目
autofocus	autofocus	规定在页面加载时下拉列表自动获得焦点，html5新增
form	form_id	规定 label 字段所属的一个或多个表单，html5新增
required	required	规定用户在提交表单前必须选择一个下拉列表中的选项，html5新增

2.6、option 与 optgroup 标签属性

• option 常用属性

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

• optgroup 常用属性

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