单的用途很多,在制作网页,特别是制作动态网页时常常会用到。表单主要用来收集客户端提供的相关信息,使网页具有交互功能。在网页制作的过程中,常常需要使用表单,如进行会员注册、网上调查和搜索等。访问者可以使用如文本域、列表框、复选框以及单选按钮之类的表单对象输入信息,然后单击某个按钮提交这些信息 。
标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容。 在表单的标记中,可以设置表单的基本属性,包括表单的名称、处理程序和传送方法等。
一般情况下,表单的处理程序action和传送方法method是必不可少的参数。
表单的method属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方法,可取值为get或post。
get:表单数据被传送到action属性指定的URL,然后这个新URL被送到处理程序上。
post:表单数据被包含在表单主体中,然后被送到处理程序上。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这里放入网页的标题</title>
</head>
<form name="form1" method="post" action="index.htm" >
姓名:
<input name="name" type="text" size="15" value="XXC"/>
<!-- 默认姓名为XXC -->
<br />
年龄:
<input name="age" type="text" size="10" value="15" maxlength="2" />
<!-- 这里设置了参数,默认年龄为15,最大长度为2 -->
</form>
<body>
</body>
</html>
效果
<!-- 2. 插入表单对象 <Input Type=“?”>
• "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这里放入网页的标题</title>
</head>
<body>
<form name="form1" method="post" action="index.htm">
用户名:
<input name="username" type="text" size="15" value="XXC"/>
<!-- 默认姓名为XXC -->
<br />
密码:
<input name="password" type="password" value="abcdef" size="10" maxlength="6" value="123456"/>
<!-- 设置默认密码为123456 -->
</form>
</body>
</html>
效果
<!-- 2. 插入表单对象 <Input Type=“?”>
• "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这里输入网页标题-单选按钮</title>
</head>
<body>
<form action="index.htm" method="post" name="form1">
性别:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" />
男
<input type="radio" name="radiobutton" value="radipbutton" />
女
</form>
</body>
</html>
效果
<!-- 2. 插入表单对象 <Input Type=“?”>
• "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框</title>
</head>
<body>
<form name="form1" method="post" action="index.htm">
爱好选择(可多选):
<input name="checkbox" type="checkbox" value="checkbox" checked="checked" />
游泳
<input name="checkbox1" type="checkbox" value="checkbox" />
打高尔夫
<input name="checkbox2" type="checkbox" value="checkbox" />
冲浪
<input name="checkbox3" type="checkbox" value="checkbox" />
看小说
</form>
</body>
</html>
效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>普通按钮</title>
</head>
<body>
<form name="form1" method="post" action="index.htm">
单击此按钮可以关闭窗口。
<br />
<input name="button" type="button" value="关闭窗口" onclick="window.close()" />
</form>
</body>
</html>
效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题-提交按钮</title>
</head>
<body>
<form name="form1" action="index.htm" method="post">
姓名:
<input name="textfield" type="text" size="15" value="XXC" />
<br />
年龄:
<input name="textfield2" type="text" size="10" value="15" />
<br />
性别:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" />
男
<input name="radiobutton" type="radio" value="radiobutton" />
女
<br/>
<input type="submit" name="submit" value="提交" />
</form>
</body>
</html>
效果
<!-- 2. 插入表单对象 <Input Type=“?”>
• "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件域</title>
</head>
<body>
<body>
<form name="form1" action="index.htm" method="post" enctype="mutipart/from-data">
上传照片:
<input name="textfield1" type="files" size="30" maxlength="32" />
<br />
</body>
</html>
效果
<!-- 2. 插入表单对象 <Input Type=“?”>
• "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON)" >
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题-下拉菜单</title>
</head>
<body>
<form name="form1" method="post" action="index.htm">
地区:
<select name="select">
<option value="北京" selected="selected">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="山东">山东</option>
<option value="河南">河南</option>
</select>
</form>
</body>
</html>
效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页标题-提交按钮</title>
</head>
<body>
<form name="form1" action="index.htm" method="post">
姓名:
<input name="textfield" type="text" size="15" value="XXC" />
<br />
年龄:
<input name="textfield2" type="text" size="10" value="15" />
<br />
性别:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" />
男
<input name="radiobutton" type="radio" value="radiobutton" />
女
<br/>
家庭住址:
<input name="textfield" type="text" size="30" value="华盛顿" />
<br />
联系电话:
<input name="textfield" type="text" size="30" value="1114511451111" />
<br />
您对我们的VAN具是否满意:
<input name="radiobutton" type="radio" value="radiobutton" checked="checked" />
非常满意
<input name="radiobutton" type="radio" value="radiobutton" />
一般
<input name="radiobutton" type="radio" value="radiobutton" />非常差
<br/>
意见:
<input name="textfield" type="text" size="30" value="东西很不错,没有意见" />
<input type="submit" name="submit" value="提交" />
</form>
</body>
</html>
效果