学习笔记之HTML5表单

最新推荐文章于 2021-06-11 13:09:46 发布

天然呆ftt

最新推荐文章于 2021-06-11 13:09:46 发布

阅读量449

点赞数

CC 4.0 BY-SA版权

文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/feng_en_t/article/details/85287030

1. 表单基本结构

首先先通过一个简单的登录界面例子来了解表单的基本结构。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻页面</title>
		<link href="css/style.css" rel="stylesheet" />
	</head>
	<body>
		<form method="post" action="">
			<h3>请输入账号密码</h3>
			<label for="user_name">账号：</label>
			<input type="text" name="user_name" size="20" /><br />
			<label for="password">密码：</label>
			<input type="text" name="password" size="20" />
			<p>
				<input type="reset" value="取消" name="back" />
				<input type="submit" value="登录" name="ok" />
			</p>
		</form>
	</body>
</html>

通过上面例子，一个完整的表单结构应该由下面三部分组成：

① 表单框（<form>标签）：<form>标签是一个包含框，里面包含所有表单对象。表单框定义提交表单数据的各种属性，如提交字符编码、与服务器交互的URL、提交方式等。

② 表单对象（<input>、<select>、<textarea>）：用于采集用户输入或选择的数据，如文本框、文本区域、密码框、隐藏域、单选框、复选框、下拉选择框及文件上传框等。

③ 按钮（<input>、<button>标签）：用于将数据发送给服务器，还可以用来控制其他脚本行为，如提交、重置，以及不包含任何行为的一般按钮。

<form>标签：该标签就像一个容器，其中放置各种表单对象。

语法：

<form method="post" action="" enctype="" target="" autocomplete="" novalidate="">

① method属性：用于设置发送数据的方式，设置值有post和get两种。

get方式：利用get方式发送数据时，数据会直接加在URL之后，安全性比较差，并且有255个字符的字数限制，适用于数据量少的表单。

post方式：是将数据封装之后再发送，字符串长度没有限制，数据安全性比较高。对于需要保密的信息，如：用户账号、密码、身份证号、地址以及电话等，通常会采用post方式进行发送。

② action属性：表单通常会与ASP或PHP等数据库程序配合使用，属性action用来指出发送的目的地。

如：action="server.php"表示将表单送到server.php网页进行下一步处理。如果不使用数据库程序，也可以将表单发送到电子邮件信箱。

语法：

<form method="post" action="mailto:zhangsan@mail.com?subject=xxxx" enctype="text/plain">

mailto是发送邮件到设置的Email邮箱，"?subject=xxxx"设置邮箱主题。

③ enctype属性：是表单发送的编码方式，只有method="post"时才有效。有3种模式：

enctype="application/x-www-form-urlencoded"：此为默认值，如果enctype省略不写，则表示采取此种编码模式。

enctype="multipart/form-data"：用于上传文件的时候。

enctype="text/plain"：将表单发送到电子信箱时，enctype的值必须设为"text/plain”，否则将会出现乱码。

④ target属性：指定提交到哪一个窗口，属性值共有5个。

_blank：打开窗口。

_self：当前窗口。

_parent：上一层窗口（父窗口）。

_top：最上层窗口。

框架名称：直接指定窗口或框架名称。

⑤ autocomplete属性：用来设置input组件是否使用自动完成功能，是HTML5新增的属性值，有on（使用）和off（不使用）两种。

⑥ novalidate属性：用来设置是否要在发送表单时验证表单，如需要验证则填入novalidate即可，novalidate属性也是HTML5新增的，目前IE并不支持novalidate属性。

2. 表单对象

1）输入控件：输入组件是表单组件中最常用的，主要是让用户输入数据。

文本框（text）、多行文本框（textarea）、密码域（password）。HTML5新增的输入组件：date、number、color、range等。

2）列表组件：包括select组件与datalist组件。

① select组件：由<select>标签与<option>标签组成。

语法：<select>标签用来定义列表框，<option>标签用来设置列表中的选项。

<select>
	<option>选项一</option>
	<option>选项二</option>
	<option>选项三</option>
	...
</select>

示例：通过<optgroup>标签将城市分组，selected属性设置下列菜单默认值为“青岛”。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻页面</title>
		<link href="css/style.css" rel="stylesheet" />
	</head>
	<body>
		<form>所在城市：
			<select name="选择城市">
				<optgroup label="山东省">
					<option value="潍坊">潍坊</option>
					<option value="青岛" selected="selected">青岛</option>
				</optgroup>
				<optgroup label="山西省">
					<option value="太原">太原</option>
					<option value="榆次">榆次</option>
				</optgroup>
			</select>
		</form>
	</body>
</html>

注意：

<select>标签可以通过下面的属性定制列表框：

size：设置列表框中可以显示的选项个数。

multiple：设置列表框中的选项是否支持多选。

<option>标签可以通过下面的属性定义列表项目的值和是否被选。

value：设置选项的初始值。

selected：表示此选项为默认选择项。

② datalist组件：由<datalist>与<option>标签组成，必须与input组件的list属性一起使用。

datalist组件的功能类似于自造词列表，主要是让用户只要输入第一个字，就可以从列表中找出符合的词语。

3）选择组件：有两种，一种是单选按钮（radio），一种是复选框（checkbox）。选择控件一般都会以组的形式使用，形成控件组。

① 单选按钮（<input type="radio">）：实际是一个圆形的选择框。多个单选按钮可以合并为一个单选按钮组，组中的name值必须相同。

示例：checked属性表示选中状态。

<form>所在城市：
	<label><input type="radio" name="RadionGroup1" value="北京"/>北京</label>
	<label><input type="radio" name="RadionGroup1" value="上海"/>上海</label>
	<label><input type="radio" name="RadionGroup1" value="保密" checked=""/>保密</label>
</form>

② 复选框（<input type="checkbox">：组可以允许多选选择。它的外观是一个矩形框。

示例：checked属性表示选中状态。

<form>喜欢吃的水果：
	<label><input type="radio" name="checkboxGroup1" value="香蕉"/>香蕉</label>
	<label><input type="radio" name="checkboxGroup1" value="苹果"/>苹果</label>
	<label><input type="radio" name="checkboxGroup1" value="柿子" checked=""/>柿子</label>
	<label><input type="radio" name="checkboxGroup1" value="雪莲"/>雪莲</label>
</form>

4）按钮组件：有3种。

① 表单填写完成之后，单击“提交”按钮（submit）将表单发送；

② 提供用户清除表单属性的“重置”按钮（reset）；

③ 普通按钮（button），这种按钮本身并无任何作用，通常会配合javascript脚本来完成想要的效果。

3. HTML5新增输入类型

1）Email类型

email类型的input元素用法如下：

<input type="email" name="user_email"/>

示例：

<form action="demo_form.php" method="get">
	请输入您的Email地址：<input type="email" name="user_email" /><br />
	<input type="submit" />
</form>

2）url类型

url类型的input元素专门用于输入URL地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是URL地址格式的文本，则会提交数据到服务器；如果不是URL地址格式的文本，则不允许提交。

url类型的input元素用法：

<input type="url" name="user_url" />

示例：

<form action="demo_form.php" method="get">
     请输入网址：<input type="url" name="user_url" /><br />
     <input type="submit" />
</form>

3）number类型

number类型的input元素提供用于输入数值的文本框。用户还可以设定对所接受的数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。

示例：

<form action="demo_form.php" method="get">
	请输入数值：<input type="number" name="number1" min="1" max="20" step="4" /><br />
	<input type="submit" />
</form>

number类型属性：

① max：规定允许的最大值；

② min：规定允许的最小值；

③ step：规定合法的数字间隔（如果step="4"，则合法的数是“-4，0，4，8等）；

④ value：规定默认值。

4）range类型

range类型的input元素提供用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。

用户可以设定对所接受的数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果输入的数字不在限定范围之内，则会出现错误提示。

示例：

<form action="demo_form.php" method="get">
	请输入数值：<input type="range" name="range1" min="1" max="30" />
	<input type="submit" />
</form>

注意：不同浏览器，显示效果会不同。

5）日期选择器

输入类型	HTML代码	说明
date	<input type="date">	选取日、月、年
month	<input type="month">	选取月、年
week	<input type="week">	选取周和年
time	<input type="time">	选取时间（小时和分钟）
datetime	<input type="datetime">	选取时间、日、月、年（UTC时间）
datetime-local	<input type="datetime-local">	选取时间、日、月、年（本地时间）

6）search类型

search类型的input元素提供用于输入搜索关键词的文本框。

search类型提供的搜索框不只是Google或百度的搜索框，而是任意网站，即任意网页中的任意一个搜索框。目前大多数网站的搜索框都是用<input type="text">的方式来实现的。而HTML5中定义了专用于搜索框的search类型。

示例：

<form action="demo_form.php" method="get">
	请输入搜索关键词：<input type="search" name="search1" />
	<input type="submit" value="Go"/>
</form>

7）tel类型

tel类型的input元素提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码还包括其他字符，如“+” “-” “（” “）”等，例如：86-0536-8888888。

示例：

<form action="demo_form.php" method="get">
	请输入电话号码：<input type="tel" name="tel1" />
	<input type="submit" value="提交"/>
</form>

8）颜色选择器

color类型的input元素提供专门用于选择颜色的文本框。它允许用户调用系统的选色器，令输入颜色非常方便。

示例：

<form action="demo_form.php" method="get">
	请选择一种颜色：<input type="color" name="color1" />
	<input type="submit" value="提交"/>
</form>

4. 新增的输入控制属性

HTML5不但为input元素增加了新的输入类型，而且新增了几个input属性，用于指定输入类型的行为和限制。

1）autocomplete属性

该属性可以帮助用户在input类型的输入框中实现自动完成内容输入，这些input类型包括：text、search、url、telephone、email、password、datepickers、range以及color。目前只有Opera浏览器支持该属性。有“on”和“off”。

<input type="url" name="url1" autocomplete="on">

2）autofocus属性

它是一个布尔值，可以使得在页面加载时，某表单控件自动获得焦点。这些控件可以是文本框、复选框、单选按钮、普通按钮等所有<input>标签的类型。

<input type="text" name="user_name" autofocus="autofocus">

3）form属性

4）formaction属性

① formaction：用于重写表单的action属性。

② formenctype：用于重写表单的enctype属性。

③ formmethod：用于重写表单的method属性。

④ formnovalidate：用于重写表单的novalidate属性。

⑤ formtarget：用于重写表单的target属性。

5）height和width属性

height和width属性规定用于image类型的input标签的图像高度和宽度，这两个属性只适用于image类型的<input>标签。

6）list属性

list属性用于指定输入框绑定哪一个datalist元素，其值是某个datalist的id。

目前IE浏览器不支持该属性。

7）min、max、step属性

① max属性：规定输入框所允许的最大值。

② min属性：规则输入框所允许的最小值。

③ step属性：为输入框规定合法的数字间隔（或称为“步进”。如果step="4"，则合法的数值是-4、0、4、8等）。

8）multiple属性

该属性支持一次性选择多个文件，并且该属性同样支持新增的email类型。

示例：

<form action="test.asp" method="get">
	请输入网址：<input type="file" name="img" multiple="multiple"/>
	<input type="submit" value="提交"/>
</form>

9）pattern属性

该属性用于验证input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配，适用于以下类型的<input>标签：text、search、url、telephone、email、password。

允许用户自定义一个正则表达式，而用户的输入必须符合正则表达式所指定的规则。

10）placeholder属性

用于为input类型的输入框提供一种提示（hint），这些提示可以描述输入框期待用户输入何种内容，在输入框为空时显示，而当输入框获得焦点时则会消失。placeholder属性适用于以下类型的<input>标签：text、search、url、telephone、email、password。

示例：

<form action="test.asp" method="get">
	请输入邮政编码：<input type="text" name="zip_code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码"/>
	<input type="submit" value="提交"/>
</form>

11）required属性

用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

适用于以下类型的<input>标签：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。

5. 新增表单元素

1）datalist元素

用于为输入框提供一个可选的列表，用户可以直接选择列表中的某一预设的项，从而免去输入的麻烦。

该列表由datalist中的option元素创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。

注意：每一个option元素都必须设置value值。

2）keygen元素

该元素是密钥对生成器，能够使得用户验证更为可靠。用户提交表单时会生成两个键：私钥和公钥。私钥会被存储在客户端，公钥会被发送到服务器。公钥可以用于之后验证用户的客户端证书。

示例：

<form action="/test.asp" method="get">
	请输入用户名：<input type="text" name="user_name" /><br />
	请选择加密强度：<keygen name="security" /><br />
	<input type="submit" value="提交" />
</form>

3）output元素

用于在浏览器中显示计算结果或脚本输出，包含完整的开始和结束标签。

语法：<output name="">Text</output>

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>test</title>
		<script type="text/javascript">
			function multi(){
				a=parseInt(prompt("请输入第1个数字。",0));
				b=parseInt(prompt("请输入第2个数字。",0));
				document.forms["form"]["result"].value=a*b;
			}
		</script>
	</head>
	<body onload="multi()">
		<form action="/test.asp" method="get" name="form">
			两数的乘积为：<output name="result"></output>
		</form>
	</body>
</html>

6. 新增表单属性

1）autocomplete属性

form元素的autocomplete属性用于规定form中所有元素都拥有自动完成功能。

当autocomplete属性用于整个form时，所有从属于该form的元素便都具备自动完成功能。

如果要使个别元素关闭自动完成功能，则单独为该元素指定“autocomplete="off"”即可。

2）novalidate属性

用于在提交表单时取消整个表单的验证，即，关闭对表单内所有元素的有效性检查。

如果要只取消表单中较少部分内容的验证而不妨碍提交大部分内容，则可以将formnovalidate属性单独用于form中的这些元素。

示例：

<form action="/test.asp" method="get" novalidate="true">
	请输入电子邮箱地址：<input type="email"  name="user_email"/>
	<input type="submit" value="提交" />
</form>