||
在HTML表单中,input参数是最常用的控件标记,包括最常见的文本域、按钮抖擞采用这个标记。
这个标记的基本语法是:
<form>
<input name="控件名称" type="控件类型">
</form>
在这里,控件名称是为了便于程序对不同控件的区分,而type参数则是确定了这一个控件域的类型。在HTML中,input参数所包含的控件类型如下表中所示的值。
输入类控件的Type可选值
type取值 |
取值的含义 |
text |
文字字段 |
password |
密码域,用户在页面中输入的时候不显示具体的内容,以*代替 |
radio |
单选按钮 |
checkbox |
复选项 |
button |
普通按钮 |
submit |
提交按钮 |
reset |
重置按钮 |
image |
图形域,也成为图像提交按钮 |
hidden |
隐藏域,隐藏域将不显示在页面上,只将内容传递到服务器中 |
file |
文件域 |
而除了输入类型的控件之外,还有一些控件如文字区域、菜单列表是不是用input标记的。它们有自己的特定标记,如文字区域直接使用textarea标记,菜单标记需要使用select和option标记结合,这些在后面还将仔细介绍。
text:文字字段在网页中最常见的就是文本字段的表单,例如网页的用户登录区。文字字段的type属性值为text。而text类型的控件在页面中以单行文本框的形式显示,在页面中还可以设置控件的名称、控件的长度、最长字符数等。
语法:<input type="text" name="控件名称" size=控件的长度 maxlength=最多字符数value="文字字段的默认取值">
说明:在该语法中包含了很多参数,它们的含义和取值方法不同,见下表所示。其中name、size、maxlength参数一般是不会省略的参数。
text文字字段的参数表
参数类型 |
含义 |
name |
文字字段的名称,用于和页面中其他控件加以区别,命名时不能包含特殊字符,也不能以HTML预留字作为名称。 |
size |
定义文本框在页面中显示的长度,以字符作为单位 |
maxlength |
定义在文本框中最多可以输入的文字数 |
value |
用于定义文本框中的默认值 |
实例代码:
<html>
<head>
<title>在表单中添加文字字段</title>
</head>
<body>
下面是几种不同属性的文字字段:
<form name="example" action="deal.asp" method="post">
<!--添加一个长度为15的文本框-->
姓名:<input type="text" name="username" size=15>
<!--添加一个长度为15,但是最长字符只有2的文本框-->
年龄:<input type="text" name="age" size=15 maxlength=2>
<!--添加一个长度为15、但最多可输入30个字符,默认显示“http://”的文本框-->
个人主页:<input type="text" name="privateweb" size=15 maxlength=30 value="http://">
</form>
</body>
</html>
运行这段代码可看到几种不同大小的文字字段控件。
password:密码域在网页中有一种特殊的文本字段,它在页面中的效果和文本字段相同,但是当用户输入文字的时候,这些文字只显示“*”,这种控件称为密码域。
语法:<input type="password" name="控件名称" size=控件的长度 maxlength=最多字符数value="文字字段的默认取值">
说明:在该语法中包含了很多参数,它们的含义和取值如下表所示。其中name、size、maxlength参数一般是不会省略的参数。
text文字字段的参数表
参数类型 |
含义 |
name |
域的名称,用于和页面中其他控件加以区别,命名时不能包含特殊字符,也不能以HTML预留字作为名称。 |
size |
定义密码域的文本框在页面中显示的长度,以字符作为单位 |
maxlength |
定义在密码域的文本框中最多可以输入的文字数 |
value |
用于定义密码域的默认值,同样以“*”显示 |
实例代码:
<html>
<head>
<title>在表单中添加密码域</title>
</head>
<body>
下面是几种不同效果的密码域:
<form name="example" action="deal.asp" method="post">
<!--添加一个长度为22的密码域-->
登录密码:<input type="password" name="username" size=22>
<!--添加一个长度为22,但是最多可以输入30个字符的密码域-->
支付密码:<input type="password" name="age" size=22 maxlength=30>
<!--添加一个长度为22、最多可输入30个字符,默认密码设置为12345的密码域-->
原始密码:<input type="password" name="privateweb" size=22 maxlength=30 value="12345">
</form>
</body>
</html>
在页面中输入文字“html”,可以看到出现在文本框中的内容不是文字本身,而是4个星号“*”。
radio:单选按钮在网页中,单选按钮用来让浏览者进行单一选择,在页面中以圆框表示。在radio控件中必须要设置参数value的值。而对于一个选择中的所有单选按钮来说,往往要设定同样的一个名称,这样在传递的时候才能更好地对某一个选择内容的取值进行判断。
语法:<input type="raido" value="单选按钮的取值" name="单选按钮名称" checked>
说明:在该语法中,checked属性表示这一单选按钮默认被选中,而在一个单选框中只能有一项单选按钮控件设置为checked。value则用来设置用户选中该项目后,传送到处理程序中的值。
实例代码:
<html>
<head>
<title>在表单中添加单选按钮</title>
</head>
<body>
<h2>心理小测试:脱鞋方式见人心</h2>
<hr>
下班回家,在门口脱下了鞋子,从脱下鞋子的摆放形式,可以反映出你的性格的中心部分呢。试试看吧:
<hr>
<form name="example" action="deal.asp" method="post">
<input type="radio" name="test" value="answerA" checked>鞋尖朝入口处排好
<input type="radio" name="test" value="answerB" >鞋尖朝进来的方向排好
<input type="radio" name="test" value="answerC" >就是脱掉的样子
<input type="radio" name="test" value="answerD" >由同住在一起的人帮你脱
</form>
</body>
</html>
在网页设计中,有一些内容需要让浏览者以选择的形式填写,而选择的内容可以是一个,也可以是多个,这时就需要使用复选项控件checkbox。
复选项在页面中以一个方框来表示。
语法:<input type="checkbox" value="复选项的值" name="名称" checked>
说明:在该语法中,checked参数表示改选项在默认情况下已经被选中,一个选择中可以有多个复选项被选中。
实例代码:
<html>
<head>
<title>在表单中添加复选框</title>
</head>
<body>
请再下面的选项中选择您喜欢的运动:
<form name="example" action="deal.asp" method="post">
<input type="checkbox" name="test" value="A2" checked>竞走
<input type="checkbox" name="test" value="A3">体操
<input type="checkbox" name="test" value="A1" checked>保龄
<input type="checkbox" name="test" value="A4" >自行车
<input type="checkbox" name="test" value="A5" >登山
<input type="checkbox" name="test" value="A6" >长跑
<input type="checkbox" name="test" value="A7" >武术
<input type="checkbox" name="test" value="A8" >游泳
<input type="checkbox" name="test" value="A11" >网球
<input type="checkbox" name="test" value="A12" >篮球
<input type="checkbox" name="test" value="A9" >排球
<input type="checkbox" name="test" value="A10" >乒乓球
</form>
</body>
</html>
在网页中按钮也很常见,在提交页面,恢复选项的时候常常用到。普通按钮一般情况下要配合脚本来进行表单处理。
语法:<input type="button" name="按钮名" value="按钮的取值" onclick="处理程序">
说明:value的取值就是显示在按钮上面的文字,而在button中可以通过添加onclick参数来实现一些特殊的功能,onclick参数是设置当鼠标按下按钮的时候所进行的处理。
实例代码:
<html>
<head>
<title>在表单中添加普通按钮</title>
</head>
<body>
下面是几个有不同功能的按钮:
<form name="example" action="deal.asp" method="post">
<!--在页面中添加一个普通按钮-->
<input type="button" value="普通按钮" name="button1" >
<!--在页面中添加一个关闭当前窗口的按钮-->
<input type="button" name="close" value="关闭当前窗口" onclick="window.close()">
<!--在页面中添加一个打开新窗口的按钮-->
<input type="button" name="opennew" value="打开窗口" onclick="window.open()">
</form>
</body>
</html>
单击页面中的普通按钮页面不会有任何变化,因为在“普通按钮”按钮的代码中没有设置处理程序;如果单击“关闭当前窗口”按钮,会弹出一个关闭警告的窗口。
单击警告窗口中的【是(Y)】按钮,则会成功关闭当前窗口,否则返回。单击页面中的“打开窗口”按钮,会弹出一个新的窗口。
submit:提交按钮提交按钮是一种特殊的按钮,不需要设置onclick参数,在单击该类按钮时可以实现表单内容的提交。
语法:<input type="submit" name="按钮名" value="按钮的取值">
说明:在该语法中,value同样用来设置按钮上显示的文字。
实例代码:
<html>
<head>
<title>添加提交按钮</title>
</head>
<body>
下面是关于本网站的调查内容:
<form action="mailto:abcd@163.com" name="research" method="post">
<p>登录用户名:
<input name="username" type="text" size=20>
<p>登录密码:
<input name="password" type="password" size=20>
重复密码:
<input name="password2" type="password" size=20>
<hr>
<p>调查的具体内容:
<p>所在城市:
<input name="city" type="radio" value="radiobutton" checked>北京
<input name="city" type="radio" value="radiobutton">上海
<input name="city" type="radio" value="radiobutton">天津
<input name="city" type="radio" value="radiobutton">深圳
<input name="city" type="radio" value="radiobutton">其他 <input name="city" type="text">
<p>关心的内容:
<input name="content" type="checkbox" value="checkbox" checked>新闻栏目
<input name="content" type="checkbox" value="checkbox">体育栏目
<input name="content2" type="checkbox" value="checkbox">科技内容
<input name="content3" type="checkbox"
value="checkbox">动漫卡通
<input name="content4" type="checkbox" value="checkbox">财经证券
<input name="content5" type="checkbox" value="checkbox">娱乐生活
<input name="content6" type="checkbox" value="checkbox">汽车房产
<input name="content7" type="checkbox" value="checkbox">出国旅游
<p>
<input type="submit" name="Submit" value="提交">
</form>
</body>
</html>
由代码可知,本页面的信息将以电子邮件的形式传送。
单击页面中的“提交”按钮,会弹出一个打开如右图所示的提示窗口,提醒用户将会以电子邮件的方式将表单内容传送出去
reset:重置按钮在页面中还有一种特殊的按钮,成为重置按钮。这类按钮可以用来清除用户在页面中输入的信息。
语法:
<html>
<head>
<title>添加重置按钮</title>
</head>
<body>
下面是某网站的注册页面:
<form action="mailto:abcd@163.com" name="research" method="post">
<p>用户名:
<input name="username" type="text" size=20>
<p>登录密码:
<input name="password" type="password" size=20>
重复密码:
<input name="password2" type="password" size=20>
<p>证件类型:
<input name="papertype" type="text" size=20>
<p>证件号码:
<input name="papernum" type="text" size=20 maxlength=35>
<p>出生日期:
<input name="date" type="text" size=20>
<p>联系方式:
<input name="touch" type="text" size=20 maxlength=50>
<p>所在城市:
<input name="city" type="radio" value="radiobutton" checked>北京
<input name="city" type="radio" value="radiobutton">上海
<input name="city" type="radio" value="radiobutton">天津
<input name="city" type="radio" value="radiobutton">深圳
<input name="city" type="radio" value="radiobutton">其他 <input name="city" type="text">
<p>关心的栏目:
<input name="content" type="checkbox" value="checkbox" checked>新闻栏目
<input name="content" type="checkbox" value="checkbox">体育栏目
<input name="content2" type="checkbox"
value="checkbox">科技内容
<input name="content3" type="checkbox" value="checkbox">动漫卡通
<input name="content4" type="checkbox" value="checkbox">财经证券
<input name="content5" type="checkbox"
value="checkbox">娱乐生活
<input name="content6" type="checkbox" value="checkbox">汽车房产
<input name="content7" type="checkbox" value="checkbox">出国旅游
<p>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="reset" value="重置">
</form>
</body>
</html>
运行代码效果如左图所示。
在页面中还有一种控件形式,称为图像域,常用在创建特殊效果的按钮中,因此也常常被称为图像提交按钮。
语法:<input type="image" src="图像地址" name="图像域名称">
说明:在该语法中,图像地址可以是绝对地址或相对地址。
实例代码:
<html>
<head>
<title>添加图像提交按钮</title>
</head>
<body>
下面是关于本网站的调查内容:
<form action="mailto:abcd@163.com" name="research" method="post">
<p>登录用户名:
<input name="username" type="text" size=20>
<p>登录密码:
<input name="password" type="password" size=20>
重复密码:
<input name="password2" type="password" size=20>
<hr>
<p>关心的内容:
<input name="content" type="checkbox" value="checkbox" checked>新闻栏目
<input name="content" type="checkbox" value="checkbox">体育栏目
<input name="content2" type="checkbox" value="checkbox">科技内容
<input name="content3" type="checkbox"
value="checkbox">动漫卡通
<input name="content4" type="checkbox" value="checkbox">财经证券
<input name="content5" type="checkbox" value="checkbox">娱乐生活
<input name="content6" type="checkbox" value="checkbox">汽车房产
<input name="content7" type="checkbox" value="checkbox">出国旅游
<p>
<input type="image" src="pic01.jpg" name="image1">
</form>
</body>
</html>
运行这段代码的效果如下所示。
运行代码的效果
hidden:隐藏域表单中的隐藏域主要用来传递一些参数,而这些参数不需要在页面中显示。当浏览者提交表单的时候,隐藏域的内容会一起提交给处理程序。
语法;<input type="hidden" name="隐藏域名称" value="提交的值">
实例代码:
<html>
<head>
<title>在表单中添加隐藏域</title>
</head>
<body>
下面是几种不同属性的文字字段:
<form name="example" action="deal.asp" method="post">
<!--添加一个长度为15的文本框-->
姓名:<input type="text" name="username" size=15>
<!--添加一个长度为15,但是最长字符只有2的文本框-->
年龄:<input type="text" name="age" size=15 maxlength=2>
<!--添加一个长度为15、但最多可输入30个字符,默认显示“http://”的文本框-->
个人主页:<input type="text" name="privateweb" size=15 maxlength=30 value="http://">
<!--添加隐藏内容-->
<input type="hidden" name="page_id" value="example ">
</form>
</body>
</html>
运行这段代码,隐藏域的内容并不能显示在页面中,但是在提交表单的时候,其名称“page_id”和取值“example”将会同时传递给处理程序。
file:文件域文件域在上传文件时常常用到,它用于查找硬盘中的文件路径,然后通过表单将选中的文件上传。在设置电子邮件的附件、上传头像、发送文件的时候常常会看到这一控件。
语法:<input type="file" name="文件域的名称">
实例代码:
<html>
<head>
<title>添加文件域</title>
</head>
<body>
下面是某网站的注册页面:
<form action="mailto:abcd@163.com" name="research" method="post">
<p>用户名:
<input name="username" type="text" size=20>
<p>登录密码:
<input name="password" type="password" size=20>
<p>
重复密码:
<input name="password2" type="password" size=20>
<p>证件类型:
<input name="papertype" type="text" size=20>
<p>证件号码:
<input name="papernum" type="text" size=20 maxlength=35>
<p>联系方式:
<input name="touch" type="text" size=20 maxlength=50>
<p>所在城市:
<input name="city" type="radio" value="radiobutton" checked>北京
<input name="city" type="radio" value="radiobutton">上海
<input name="city" type="radio" value="radiobutton">天津
<input name="city" type="radio" value="radiobutton">深圳
<input name="city" type="radio" value="radiobutton">其他 <input name="city" type="text">
<p>
<!--在这里添加了一个文件域-->
请上传你的头像图片<input type="file" name="picture">
<p>关心的栏目:
<input name="content" type="checkbox" value="checkbox" checked>新闻栏目
<input name="content" type="checkbox" value="checkbox">体育栏目
<input name="content2" type="checkbox" value="checkbox">科技内容
<input name="content3" type="checkbox"
value="checkbox">动漫卡通
<input name="content4" type="checkbox" value="checkbox">财经证券
<input name="content5" type="checkbox" value="checkbox">娱乐生活
<input name="content6" type="checkbox" value="checkbox">汽车房产
<input name="content7" type="checkbox" value="checkbox">出国旅游
<p>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="reset" value="重置">
</form>
</body>
</html>