JavaScript学习（二十八）——表单和表单元素

空城机
388 阅读6分钟

表单的用处很多，在制作网页，特别是制作动态网页时常常会用到。表单是实现动态网页的一种主要的外在形式。

什么是表单

一个HTML文档中，当用户填写完信息后做提交操作，将表上，经过服务器处理程序后，再将用户所需信息传送回客户HTML表单是HTML页面与浏览器实现交互的重要手段。是收集信息，具体说是收集测览者的信息。例如，在网上活提供的表单网页，如用户名、密码、联系方式等信息，如图要包括文本框、单选按钮、复选框、按钮等。

表单标记<form>

表单是网页上的一个特定区域。这个区域是由一对<form>标记定 义的。在<form>与</form>之间的一切都属于表单的内容。 在表单的<form>标记中，还可以设置表单的基本属性，包括表单的名称、处重起序、传送方式等。一般情况下， 表单的处理程序action和提交方式method是必不可少的参数。

处理程序action属性

真正处理表单的数据脚本或程序在 action属性里，这个值可以是程序或者脚本的一个完整URL.具体语法如下：

<form action="URL">..</form>
参数说明:
URL:表单提交的地址。

说明
在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址，如发送E-mail等。
<form action="mailto:mingsoft@mingsoft.com"></form>
上面定义了表单规交的地址为一个邮件， 当程序运行后会将表单中收集到的内容以电子邮件的形式发送出去。

表单名称name属性

名称属性name用于给表单命名。这一属性不是表单的必选属性，但是为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能符合的名称，如登录的表单可以命名为login。不同的表单尽量用不同的名称，以避免混乱。具体语法如下:
<form name="form name">... </form>参数说明:
form name: 为表单起的名字。

提交方式method属性

表单的method属性用来定义处理程序从表单中获得信息的方式，可取值为get或post,它决定了表单中已收集的数据是用什么方式提交到服务器的。具体语法如下:
<form method=" method"> ... </form>

method=get:使用这种方式提交表单时，表单数据会被视为CGI或ASP的参数发送，也就是来访者输入的数据会附加在URL之后，由用户端直接发送至服务器，所以速度会比post快，但缺点是数据长度不能太长。在没有指定method的情形下，一般都会视get为默认值。
method=post:  使用这种设置时，表单数据是与URL分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制。缺点是速度会比get慢。

编码方式enctype属性

表单中的enctype参数用于设置表单信息提交的编码方式。具体语法如下:
<form enctype="value"...</form>参数说明.

value的取值

取值描述
Test/plain以纯文本的形式传送
application/x-www-form-urlencoded默认的编码形式
multipart/form-dataMIME编码，上传文件的表单必须选择该项

 

输入标记<input>

输入标记<input>是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。语法如下：

<form>

<input name="field_name" type="type_name">

</form>

field_name:控件名称

type_name：控件类型

输入类控件的type可选值

取值描述取值描述
text文字域submit提交按钮
password密码域，用户在页面输入时不显示具体的内容，以*代替reset重置按钮
radio单选按钮image图像域，图像提交按钮
checkbox复选框hidden隐藏域，不显示在页面上，只将内容传递到服务器上
button普通按钮file文件域

文字域text

text属性用来设定在表单的文本域中，输入任何类型的文本、数字和字母。输入的内容以单行显示。语法如下：

<input type="text" name="field_name" maxlength=max_value size=size_value value="field_value">

例子：在页面中使用文字域，做一个人口调查的页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body >	
		<form>
			<h3 align="center">人口调查</h3>
			姓名：<input type="text" name="username" size=20 /><br />
			性别：<input type="text" name="sex" size=4 maxlength="1"/>&nbsp;&nbsp;
			年龄：<input type="text" name="age" size=4 maxlength="3"/><br />
			居住地址：<input type="text" name="address" size=50 />
		</form>
	</body>
</html>

 

密码域password

在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以*或圆点显示。

例子：创建一个修改密码的页面

<form>
			<h3 align="center">修改密码</h3>
			用户名：<input type="text" name="username" size=15 /><br />
			原密码：<input type="password" name="oldpassword" maxlength="8" size="15"/><br />
			新密码：<input type="text" name="newpassword" maxlength="8" size="15"/><br />
			确认新密码：<input type="text" name="newpassword2" maxlength="8" size=15 />
		</form>

 

重置按钮reset

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

<form >
			<h3 align="center">人口调查</h3>
			姓名：<input type="text" name="username" size=20 /><br />
			性别：<input type="text" name="sex" size=4 maxlength="1"/>&nbsp;&nbsp;
			年龄：<input type="text" name="age" size=4 maxlength="3"/><br />
			居住地址：<input type="text" name="address" size=50 />
			<input type="submit" value="提交" />
			<input type="reset" value="重置" />
</form>

 

文本域标记<textarea>

在HTML中还有一种特殊定义的文本样式，称为文本域。它与文字字段的区别在于可以添加多行文字，从而输入更多的文本。语法如下：

<textarea name="textname" value="text_value" rows=rows_value cols=cols_value></textarea>

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

 

菜单和列表标记<select>和<option>

菜单列表类的控件主要用来选择给定答案中的一种， 这类选择往往答案比较多，使用单选按钮比较浪费空间。可以说，菜单列表类的控件主要是为了节省页面空间而设计的。菜单和列表都是通过<select>和<option>标记来实现的。
菜单是种最节省空间的方式，正常状态下只能看到个选项，单击按钮打开菜单后才能看到部的选项。

列表可以显示一定数量的选项，如果超过了这个数量，会自动出现滚动条。具体语法如下:

<select name="select_name" size=select_size multiple="multiple">
<option value="option_value" selected="selected">选项</option>
<option value="option_value">选项</option>
</select>

 

表单验证

验证表单中输入的内容是否符合要求是JavaScript 最常用的功能之一.。在提交表单前进行表单验证，可以节约服务器的处理器周期，为用户节省等待的时间。
表单验证通常发生在内容输入结束，表单提交之前。表单的onsubmit事件处理器中有一组函数负责验证。如果输入中包含非法数据，处理器会返回false,显示一条信息，同时取消提交。如果输入的内容合法，则返回true,提交正常进行。本节将介绍一些表单验证常用的技术。

1. 验证表单内容是否为空

下面制作一个简单的用户登录界面，并且验证用户名和密码不能为空，如果为空则给出提示。运行结果如图所示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function check(){
				if(form1.value==""){
					alert("请输入用户名！");
					return false;
				}
				if(form2.value==""){
					alert("请输入密码！");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body >	
		<form>
			用户名：<input type="text" name="form1" id="form1"/> <br />
			密  &nbsp;&nbsp;  码：<input type="text" name="form2" id="form2"/><br />
		</form>
		<input type="button" name="enter" onclick="check()" value="登录" />
		<input type="button" name="close" onclick="" value="取消"/>
	</body>
</html>

 


 

avatar
文章
阅读
粉丝