（12）html表单<form>之一_html panel-body中form 和script-优快云博客

本文链接：https://blog.youkuaiyun.com/mxd395/article/details/23895429

本文详细介绍了HTML表单的各种元素及其属性，包括文本输入框、密码框、复选框、单选按钮、下拉列表、文件上传控件等，并通过实例展示了如何使用这些表单元素。

form主要用于收集用户反馈的信息，需要注意的是form不能嵌套form。即使网页中有多个form，用户每次也只能向服务器发送一个表单的数据。

（一）<form>元素的主要特性

1. action特性指示提交的表单交由服务器上的那一个程序处理，如：action=“***.php”

2. method特性指明表单数据以何种形式发送给服务器（get或者post）

3. id和name特性，都唯一标识网页中的form元素

4. onsubmit特性常用于在表单提交给服务器之前，浏览器端对提交数据进行检查，onsubmit的值通常是一个JS的函数，该函数一般定义在<head>元素中。

5. onreset特性的值也是一个JS函数，若表单包含一个reset按钮用于清楚表单所有数据，当reset按钮按下时，先调用onreset特性的值对应的脚本程序。

6. enctype特性用于在以post方式向服务器发送数据时指定浏览器的编码方式。共有两种编码方式：

application/x-www-form-urlencoded：这也是默认方式，将+，空格等非字母数字字符转换为其他字符以传送给服务器端。

multipart/form-data：该方式允许将数据以多个部分的方式进行发送，每个连续部分对应一个完整表单控件，常用于用户向服务器传送文件或照片时。每部分有一个可选内容类型头来指明控件数据类型。

7. accept-charset特性用于指明一系列用户可能输入且服务器能够处理的字符编码格式，如UTF-8等，以空格或逗号隔开字符集列表。

8. target特性指明表单提交后，将在那个窗口打开表单结果。

（二）表单控件——用于从网站访问者收集反馈数据

1. 单行文本输入控件——<input>，特性如下：

type：必有特性，值为text时，创建的文本框输入为明文；值为password时，文本框输入会隐藏

name：必有特性，用于服务器接收端名称与值对应。

value: 为文本输入空间提供一个初始值。

size：指定文本输入空间的宽度，单位为字符。

maxlength：指定文本框能够输入的最大字符数。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

2. 多行文本输入控件——<textarea>，特性如下：

name：必有特性，用于服务器接收端名称与值对应。

rows：指定行数，即文本区高度。

cols：指定文本列数，即文本区宽度。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

3. 按钮——常用于表单提交或者触发脚本

（1）使用<input>元素创建按钮，特性如下：

type：必有特性，指定按钮类型，type="submit"则点击按钮提交表单；type=“button”创建点击按钮时触发客户端脚本按钮；type="reset"创建加载网页时能自动将表单控件重置为初始值的按钮。

name：必有特性，用于服务器接收端名称与值对应。

value： 用于指定按钮上显示的文本。

onclick：用于点击按钮时出发一个脚本，其值为JS的函数名。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

（2）使用<input>元素创建图像按钮

type：必有特性，指定按钮类型，type="image"。

src：制定图像文件来源。

alt：为图像提供备选文本，当无法加载图像时，显示该文本。

点击该图像，浏览器就像服务器提交表单，其中该按钮提交的是图像name.x和name.y坐标

（3）使用<button>元素创建图像按钮(与input类似)

	<button type="submit">button_submit</button>
	<button type="reset">button_reset</button>
	<button type="button" onclick="button_img()"><img src="submit.png" alt="button_img"></button>

元素创建图像按钮(与input类似)

4. 复选框——<input type=“checkbox”>，特性如下：

type：必有特性，type=“checkbox”

name：必有特性，控件名称，多个复选框可以共享同一个名称。

value： 复选框选中时，该value的值传递给服务器端，默认value值为“on”。

checked： 用于指示该复选框已经选中。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

5. 单选框——<input type=“radio”>，特性如下：

type：必有特性，type=“radio”

name：必有特性，控件名称，多个单选框可以共享同一个名称。

value： 用于指示该选项选中时发送给服务器的值。

checked： 用于指示该单选框已经选中。

size：指示单选按钮的大小。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

6. 下拉框——<select>和<option>，特性如下：

	<select name="select_test" >
		<option selected="selected" value="1">小学</option>
		<option value="2">初中</option>
		<option value="3">高中</option>
		<option value="4">大学</option>
		<option value="5">硕士</option>
		<option value="6">博士</option>
	</select>

<select>元素包含以下特性：

name：控件名称，唯一标识该下拉框。

size：用于表示一个滚动列表，指定同时有多少条目可以看到。

multiple： 变为多选下拉框，可以选中多条记录（按住ctrl键实现多选）。

<option>元素包含以下特性：

select：用于指定加载网页时哪一个项被默认选中。

value： 用于指示该选项选中时发送给服务器的值。

label：为选项设置标签的一种替换方式。

使用<optgroup>元素和label特性进行分组选项：

	<select name="optgroup_test">
		<optgroup label="language">
			<option value="PHP">PHP</option>
			<option value="JAVA">JAVA</option>
		</optgroup>
		<optgroup label="system">
			<option value="win">Windows</option>
			<option value="unix">Unix</option>
			<option value="linux">Linux</option>
		</optgroup>
	</select>

7.用于文件上传的文本选择框——<input type=“file”>，特性如下

type：必有特性，type=“file”

name：必有特性，控件名称。

需要注意的是：有文件上传时，建议将<form>的的enctype特性的值设置为multipart/form-data,从而使每个控件的数据独立的发送给服务器端。

8.隐藏空间——<input type=“hidden”>
有时希望在网页间传递信息而不让用户在网页上看到（审查代码时可以看到）。

9.标签——<label>

	<label for="username">用户名</label>
	<input type="text" id="username" name="username"  value="xdm" />

如上所示，label使用了for特性指明与该标签相关的表单控件，for特性的值须与控件id相对应。也可以不使用for特性而是用如下形式：<label>用户名<input type=“text” name=“username” value=“xdm” /> </label>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>表单学习</title>
	</head>
	
	<body>
		<form method="post" enctype="multipart/form-data">
			<table border="1">
				<tr>
					<td><label for="username">用户名</label></td>
					<td colspan="3">
						<input type="text" id="username" name="username"  value="xdm" />
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td colspan="3">
						<input type="password" name="password"  value="123456" />
					</td>
				</tr>
				<tr>
					<td>性别</td>
					<td><input type="radio" name="radio_test" value="boy" checked="checked">男</td>
					<td colspan="2"><input type="radio" name="radio_test" value="girl">女</td>
				</tr>
				<tr>
					<td>最高学历</td>
					<td colspan="3">
						<select name="select_test" >
							<option selected="selected" value="1">小学</option>
							<option value="2">初中</option>
							<option value="3">高中</option>
							<option value="4">大学</option>
							<option value="5">硕士</option>
							<option value="6">博士</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>掌握自然语言</td>
					<td colspan="3">
						<select name="multiple_test" multiple="multiple">
							<option selected="selected" value="1">英语</option>
							<option value="2">中文</option>
							<option value="3">日语</option>
							<option value="4">德语</option>
							<option value="5">法语</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>爱好</td>
					<td colspan="3">
						<textarea name="beizhu" rows="3" cols="20"></textarea>
					</td>
				</tr>
				<tr>
					<td>前端技能：</td>
					<td><input type="checkbox" name="checkbox_test" checked="checked" value="CSS">CSS</input></td>
					<td><input type="checkbox" name="checkbox_test" checked="checked" value="HTML">HTML</input></td>
					<td><input type="checkbox" name="checkbox_test" value="JS">JS</input></td>
				</tr>
				<tr>
					<td>其他技能</td>
					<td colspan="3">
						<select name="optgroup_test">
							<optgroup label="language">
								<option value="PHP">PHP</option>
								<option value="JAVA">JAVA</option>
							</optgroup>
							<optgroup label="system">
								<option value="win">Windows</option>
								<option value="unix">Unix</option>
								<option value="linux">Linux</option>
							</optgroup>
						</select>
					</td>
				</tr>
				<tr>
					<td>简历文件</td>
					<td colspan="3">
						<input type="file" name="fileupload">
					</td>
				</tr>					
				<tr>
					<td><input type="submit" name="input_submit" value="input_submit" /></td>
					<td><input type="reset" name="input_reset" value="input_reset" /></td>
					<td colspan="2"><input type="button" name="input_button" value="input_button" onclick="input_buttom()" /></td>
				</tr>
				<tr>
					<td colspan="4"><input type="image" src="submit.png" alt="image_submit" name="image_submit" /></td>
				</tr>
				<tr>
					<td><button type="submit">button_submit</button></td>
					<td><button type="reset">button_reset</button></td>
					<td colspan="2"><button type="button" onclick="button_img()"><img src="submit.png" alt="button_img"></button></td>
				</tr>			
			</table>
		</form>
	</body>
</html>

这里我们给出一个总结效果图：