003-HTML之表单 - 技术栈

一.表单的认识

表单的用途很多，在制作网页中，特别是制作动态网页时常常会用到。表单主要用来收集客户提供的相关信息，使网页具有交互的功能。另外，表单是HTML页面与浏览器实现交互功能的重要手段。

在网页的制作过程中，常常需要使用表单，例如在进行用户注册时，就必须通过表单填写用户的相关信息

二.定义表单

1.表单域：<form>标签

在HTML中，<form></form>标签用于创建一个表单，即定义表的开始和结束位置，在标签对之间的一切都属于表单的内容

每个表单元素开始于form元素，可以包含所有的表单控件。还有任何必需的伴随数据，如控件的标签，处理数据的脚本或程序的位置。

在表单的<form>标签中，还可以设置表单的基本属性，包含表单的名称、处理程序、传送方法等，一般情况下，表单的处理程序action和传送方法method是必不可少的参数

2.处理动作属性action

真正处理表单的数据脚本或程序在action属性中，这个值可以是脚本或程序的一个完整的URL

语法格式如下：

html 复制代码

<form action="表单的处理程序">
...
</form>

在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中搜集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他形式的地址，例如发送E-mail等

3.表单名称属性name

名称属性name用于给表单命名。这一属性不是表单的必须属性，但是为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能相匹配的名称，例如注册页面的表单可以被命名为register。不同的表单尽量使用不同的名称，以避免混乱

语法格式为：

html 复制代码

<form name="表单名称">
...
</form>

4.传送方法method

表单的method属性用于定义处理程序从表单中获取信息的方式，可取值为get或post，它决定了表单中已收集的数据是用什么方法发送至服务器的

method=get：使用这种设置时，表单数据会被视为CGI或ASP的参数发送，也就是来访者输入的数据会附加在URL之后，由用户端直接发送的服务器，因此速度上会比post快，但是缺点是数据长度不能太长。在没有指定method的情形下，一般都会视get为默认值。

method=post：使用这种设置时，表单数据是与URL分开发送的，用户端的计算机会通知服务器来读取数据，因此通常没有数据长度上的限制。缺点是速度上比get慢

传送方法的语法格式如下：

html 复制代码

<form method="传送方式">
...
</form>

5.编码方式属性enctype

用于设置表单信息提交的编码方式

语法格式：

html 复制代码

<form enctype="编码方式">
...
</form>

编码方式的取值：

|-----------------------------------|----------------------|
| enctype取值 | 取值的含义 |
| text/plain | 以纯文本的形式传送 |
| application/x-www-form-urlencoded | 默认的编码形式 |
| multiparty/form-data | MIME编码，上传文件的表单必须选择该项 |

6.目标显示方式属性target

用来指定目标窗口的打开方式，往往用来显示表单的返回信息，如表单的内容是否成功提交、是否出错等

语法格式：

html 复制代码

<form target="目标窗口的打开方式">
...
</form>

目标窗口的打开方式有4个取值：

|---------|--------------------|
| 取值 | 含义 |
| _blank | 将返回的信息显示在新打开的窗口中 |
| _parent | 将返回的信息显示在父级的浏览器窗口中 |
| _self | 将返回的信息显示在当前浏览器窗口中 |
| _top | 将返回的信息显示在顶级浏览器窗口中 |

三.常用表单控件

在HTML表单中，input元素是最常用的输入类控件，包括最常见的文本框、按钮都是使用这个元素，该元素的基本语法如下：

html 复制代码

<form>
    <input name="控件名称" type="控件类型">
</form>

控件名称是为了便于程序区分不同的控件，type参数则是确定了控件的类型

type 值	描述	HTML 示例	功能与特点
`text`	单行文本输入	`<input type="text">`	默认类型，用于输入单行文本
`password`	密码输入	`<input type="password">`	输入内容会被隐藏（显示为圆点或星号）
`email`	邮箱地址输入	`<input type="email">`	包含基础邮箱格式验证，移动设备显示邮箱键盘
`url`	URL地址输入	`<input type="url">`	包含基础URL格式验证，移动设备显示URL键盘
`tel`	电话号码输入	`<input type="tel">`	移动设备显示电话号码键盘
`number`	数字输入	`<input type="number">`	只能输入数字，可设置min、max、step属性
`range`	范围滑块	`<input type="range">`	显示为滑块控件，可设置min、max、step属性
`date`	日期选择	`<input type="date">`	显示日期选择器
`time`	时间选择	`<input type="time">`	显示时间选择器
`datetime-local`	本地日期时间选择	`<input type="datetime-local">`	显示日期和时间选择器（不含时区）
`month`	年月选择	`<input type="month">`	显示年月选择器
`week`	周选择	`<input type="week">`	显示周选择器
`search`	搜索框	`<input type="search">`	样式可能与应用搜索框一致，可能有清除按钮
`color`	颜色选择	`<input type="color">`	显示颜色选择器
`file`	文件选择	`<input type="file">`	用于上传文件，可设置accept属性限制文件类型
`hidden`	隐藏字段	`<input type="hidden">`	不可见，用于存储需要提交但不显示的数据
`checkbox`	复选框	`<input type="checkbox">`	允许选择多个选项
`radio`	单选按钮	`<input type="radio">`	只能在一组选项中选择一个
`submit`	提交按钮	`<input type="submit">`	用于提交表单
`reset`	重置按钮	`<input type="reset">`	重置表单数据到初始状态
`button`	普通按钮	`<input type="button">`	普通按钮，需通过JavaScript添加功能
`image`	图像按钮	`<input type="image" src="...">`	显示为图像，点击可提交表单

1.文本框

文本框中可以任何类型的文本、数字或字母，输入的内容以单行显示

语法格式：

html 复制代码

<input type="text" name="控件名称" size="控件的长度" maxlength="最长字符数" value="文本框的默认取值">

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在表单中添加文本框</title>
	</head>
	<body>
		<h1>登入</h1>
		<form action="mail;mingri@qq.com" method="get" name="register">
			姓名：<input type="text" name="username" soze="20">
			<br/><br/>
			网址：<input type="text" name="URL" size=20 maxlength="50" value="http://">
		</form>
	</body>
</html>

效果：

2.密码框

输入文本域中的文字均以星号"*"或圆点显示

语法格式：

html 复制代码

<input type="password" name="控件名称" size="控件的长度" maxlength="最长字符数" value="密码框的默认取值">

3.单选按钮

单选按钮可以进行项目的单项选择，以一个圆框表示

语法格式：

html 复制代码

<input type="radio" value="单选按钮的取值" name="单选按钮名称" checked="checked">

在该语法中，checked属性表示这一单选按钮默认被选中，而在一个单选按钮组中只能有一项单选按钮控件被设置为checked。

value用来设置用户选中该项目后，传送到处理程序中的值

4.复选框

将type属性设置为：type="checkbox"

语法格式：

html 复制代码

<input type="checkbox" value="复选框的值" name="名称" checked="checked">

checked参数表示该选项在默认情况下已经被选中，一组复选框中可以有多个复选框被选中（也可以被默认选中）

5.普通按钮

普通按钮一般情况下要配合脚本来进行表单处理

语法格式：

html 复制代码

<input type="botton" value="按钮的取值" name="按钮名" onclick="处理程序">

value的取值就是显示在按钮上面的文字，而在button中可以通过添加onclick参数来实现一些特殊的功能，onclick参数就是设置当单击按钮时要进行的处理

6.提交按钮

提交按钮是一种特殊的按钮，不需要设置onclick参数，在单击该类按钮时可以实现表单内容的提交

语法格式：

html 复制代码

<input type="submit" name="按钮名" value="按钮的取值">

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登入页面</title>
	</head>
	<body>
		<form method="get" action="xxx.php" name="invest" enctype="text/plain">
			姓名：<input type="text" name="username" size="20"> <br/><br/>
			网址：<input type="text" name="url" size="20" maxlength="50" value="http://"> <br/><br/>
			密码：<input type="password" name='pwd' size="20" maxlength='8'> <br/><br/>
			确认密码：<input type="password" name='qurpwd' size="20" maxlength="8"> <br/><br/>
			请选择你喜欢的音乐：<input type="checkbox" name="m1" value="rock">摇滚乐 <input type="checkbox" name="m2" value="jazz">爵士乐 
			<input type="checkbox" name="m3" value="pop">流行乐 <br/><br/>
			请选择你居住的城市：<input type="radio" name="city" value="qingdao">青岛  <input type="radio" name="city" value="上海">上海 
			<input type="radio" name="city" value=chongqing"">重庆  <input type="radio" name="city" value="wuhang">武汉  
			<input type="radio" name="city" value="changsha">长沙 <br/><br/>
			<input type="submit" name="subimt" value="提交表单">
		</form>
	</body>
</html>

效果：

填写表单：

提交表单：

可见，提交表单后，返回的信息默认是在当前窗口，相当于设置target="_self"

现在改为：target="_blank"，则返回的信息显示在一个新打开的窗口中

还可以改一些默认选择值，添加checked参数

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登入页面</title>
	</head>
	<body>
		<form method="get" action="xxx.php" name="invest" enctype="text/plain" target='_blank'>
			姓名：<input type="text" name="username" size="20"> <br/><br/>
			网址：<input type="text" name="url" size="20" maxlength="50" value="http://"> <br/><br/>
			密码：<input type="password" name='pwd' size="20" maxlength='8'> <br/><br/>
			确认密码：<input type="password" name='qurpwd' size="20" maxlength="8"> <br/><br/>
			请选择你喜欢的音乐：<input type="checkbox" name="m1" value="rock" checked="checked">摇滚乐 <input type="checkbox" name="m2" value="jazz">爵士乐 
			<input type="checkbox" name="m3" value="pop" checked="checked">流行乐 <br/><br/>
			请选择你居住的城市：<input type="radio" name="city" value="qingdao">青岛  <input type="radio" name="city" value="上海">上海 
			<input type="radio" name="city" value=chongqing"">重庆  <input type="radio" name="city" value="wuhang" checked="checked">武汉  
			<input type="radio" name="city" value="changsha">长沙 <br/><br/>
			<input type="submit" name="subimt" value="提交表单">
		</form>
	</body>
</html>

效果：

提交表单：

点击了提交表单按钮，就可以把表单域form中的表单元素里面的值提交给后台服务器

7.重置按钮

单击重置按钮后，可以清除表单上的内容，恢复默认的表单内容设定

语法格式：

html 复制代码

<input type="reset" name="按钮名" value="按钮的取值">

8.label标签

<label>标签可以不写在<form>标签内，<label>标签的主要功能是为表单控件提供关联标签，提高可访问性和用户体验。<label>和<input>都可以放在<form>之外，但是这样它们的数据在表单提交时不会被包含（除非使用JavaScript手动处理）。此外，将标签和输入放在表单外可能会影响可访问性和代码结构

<label>标签用于在表单元素中定义标签，这些标签可以对其他一些表单控件元素（如单行文本框、密码框等）进行说明

<label>标签可以指定id、style、class等核心属性，也可以指定onclick等事件属性。

除此之外，<label>标签还有一个for属性，该属性用于指定<label>标签与哪个表单控件相关联

虽然<label>标签定义的标签只是输出普通的文本，但它生成的标签还有一个作用，当用户单击<label>标签生成的标签时，与该标签关联的表单控件元素就会获得焦点。也就是说，当用户单击<label>标签生成的标签时，浏览器会自动将焦点转义到和该标签相关联的表单控件元素上

标签和表单控件可以通过两种主要方式进行关联：

隐式关联：使用for属性，指定<label>标签的for属性值为所关联的表单控件的id属性
显式关联：将普通文本、表单控件一起放在<label>标签内部即可

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<label for="username">用户名：</label><input type="text" id="username">
		</form>
	 </body>
</html>

没有设置<label>标签时要填写用户名只能把鼠标移动到方框内，现在设置了<label>标签使它与文本框用户名相关联，当用户单击用户名时，光标自动移动到方框内，方便用户填写用户名

9.下拉表单<select>标签、<option>标签

菜单和列表类的控件主要用来选择给定答案中的一中，这类选择往往答案比较多，使用单选按钮比较浪费空间，可以说，菜单和列表类的控件主要是为了节省页面空间而设计的，菜单和列表都是通过<select>和<option>标签来实现的

语法格式：

html 复制代码

<select name="下拉菜单的名称">
    <option value="" selected="selected">选项1</option> 
    <option value="选项值">选项2</option>
    <option value="选项值">选项3</option>
    ...
</select>

|-----------|--------------|
| 菜单和列表标签属性 | 描述 |
| name | 定义列表的名称 |
| size | 设置列表中可见选项的数目 |
| multiple | 设置是否可以选择多个选项 |
| value | 设置选项的值 |
| selected | 设置选项显示为选中状态 |

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单和列表</title>
	</head>
	<body>
	<h3>兴趣调查</h3>
	<form method="post" name="invest">
		请选择你喜欢的音乐：<br/><br/>
		<select name="music" size="3" multiple="multiple">
			<option value="rock" selected="selected">摇滚乐</option>
			<option value="jazz">爵士乐</option>
			<option value="pop">流行乐</option>
			<option value="folk">民族乐</option>
			<option value="dj">打击乐</option>
		</select>
		<br/><br/>
		<select name="city">
			<option value="beijing" selected="selected">北京</option>
			<option value="shanghai">上海</option>
			<option value="nanjing">南京</option>
			<option value="changchun">长春</option>
		</select>
		<input type="submit" name="submit" value="提交表单">
	</form>
	</body>
</html>

10.文本域标签<textarea>

<textarea>与<input >文本框标签的的区别在于：文本域标签可以添加多行文字，允许输入更多的文本

这类控件在一些留言板、评论区中最常见

语法格式：

html 复制代码

<textarea name="文本域名称" value="文本域默认值" rows="行数" cols="列数">
</textarea>

|---------|---------|
| 文本域标签属性 | 描述 |
| name | 文本域的名称 |
| rows | 文本域的行数 |
| cols | 文本域的列数 |
| value | 文本域的默认值 |

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		欢迎留言：<textarea rows="5" cols="50">请输入留言</textarea>
	</body>
</html>

效果：