HTML表单标记之输入标记属性的使用

HTML表单标记教程,这节主要讲解如何在网页中使用INPUT标记,主要介绍INPUT标记的属性的使用.
输入标记<input>是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。

基本语法 01 <Form> 02 <input name=”field＿name” type=”type＿name”> 03 </Form>

语法解释
<input>标记的属性如下表所示属性描述 name 域的名称 type 域的类型
在type属性中，包含以下属性值 type属性值描述 text 文字域 password 密码域 file 文件域 checkbox 复选框 radio 单选框 button 普通按钮 submit 提交按钮 reset 重置按钮 hidden 隐藏域 image 图像域(图像按钮)
#p# 文字域TEXT
text属性值用来设定在表单的文本域中，输入任何类型的文本、数字或字母。输入的内容以单行显示。

基本语法 <input type=”text” name=”field＿name” maxlength=value size=value value=”field＿value”>

语法解释
这些属性的含义如下表所示文字域属值描述 name 文字域的名称 maxlength 文字域的最大输入字符数 size 文字域的宽度 value 文字域的默认值文件范例:11-6.htm
在页面中插入文字域。
01 <!– —————————— –>
02 <!– 文件范例：11-6.htm –>
03 <!– 文件说明：插入文字域 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入文字域</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
12 姓名：<input type=”text” name=”username” size=20>
13 <br>
14 网址：<input type=”text” name=”URL” size=20 maxlength=50 value=”http://”>
15 <br>
16 </Form>
17 </body>
18 </html> 文件说明
第11行是表单标记，表单的名称为invest，将表单内容以电子邮件的方式传送，并使用get传输方式。第12行设定”性名”的文本框为20字符宽度，第14行设定”网址”的文本框为20字符宽度，但最大可以输入50个字符，并且显示”http://”的初始值。
#p# 密码域PASSWORD
在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号”∗”或圆点显示。

基本语法 <input type=”password” name=”field＿name” maxlength=value size=value>

语法解释
这些属性的含义如下表所示文字域属性描述 name 密码域的名称 maxlength 密码域的最大输入字符数 size 密码域的宽度（以字符为单位） value 密码域的默认值文件范例:11-7.htm
在页面中插入密码域。
01 <!– —————————— –>
02 <!– 文件范例：11-7.htm –>
03 <!– 文件说明：插入密码域 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入密码域</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
12 姓名：<input type=”text” name=”username” size=20>
13 <br>
14 网址：<input type=”text” name=”url” size=20 maxlength=50 value=”http://”>
15 <br>
16 密码：<input type=”password” name=”password” size=20 maxlength=8>
17 <br>
18 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8>
19 </Form>
20 </body>
21 </html> 文件说明
第16行和第18行是密码域。设定了密码域的尺寸、名称和最大输入字符数。
#p# 文件域FILE
文件域可以让用户在域的内部填写自己硬盘中的文件路径，然后通过表单上传，这是文件域的基本功能。如在线发送E-mail时常见的附件功能。有的时候要求用户将文件提交给网站，例如Office文档、浏览者的个人照片或者其它类型的文件，这时就要用到文件域。
文件域的外观是一个文本框加一个浏览按钮，用户既可以直接将要上传给网站的文件的路径写在文本框内，也可以单击浏览按钮，在自己的电脑中找到要上传的文件。

基本语法 <input type=”File” name=”field＿name”>

文件范例：11-8.htm
在页面中插入文件域。
01 <!– —————————— –>
02 <!– 文件范例：11-8.htm –>
03 <!– 文件说明：插入文件域 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入文件域</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
12 姓名：<input type=”text” name=”username” size=20><br>
13 网址：<input type=”text” name=”url” size=20 maxlength=50 value=”http://”><br>
14 密码：<input type=”password” name=”password” size=20 maxlength=8><br>
15 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8><br>
16 请上传你的照片：<input type=”file” name=”File”>
17 </Form>
18 </body>
19 </html> 文件说明
第16行就是插入的文件域。复选框CHECKBOX
浏览者填写表单时，有一些内容可以通过让浏览者进行选择的形式来实现。例如常见的网上调查，首先提出调查的问题，然后让浏览者在若干个选项中进行选择。又例如收集个人信息时，要求在个人爱好的选项中进行选择等。适应以上各种不同类型调查的需要，选择域分为两种。多选框：可以在若干选项中选择多个项目单选框：在若干选项只允许选择一项
复选框能够进行项目的多项选择，以一个方框表示。基本语法 <input type=”checkbox” name=”field＿name” checked value=”value”>

语法解释
checked表示此项被默认选中，value表示选中项目后传送到服务器端的值。文件范例：11-9.htm
在页面中插入复选框。
01 <!– —————————— –>
02 <!– 文件范例：11-9.htm –>
04 <!– 文件说明：插入复选框 –>
05 <!– —————————— –>
06 <html>
07 <head>
08 <title>插入复选框</title>
09 </head>
10 <body>
11 <h1>用户调查</h1>
12 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
13 姓名：<input type=”text” name=”username” size=20><br>
14 网址：<input type=”text” name=”url” size=20 maxlength=50 value=”http://”><br>
15 密码：<input type=”password” name=”password” size=20 maxlength=8><br>
16 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8><br>
17 请上传你的照片：<input type=”File” name=”File”><br>
18 请选择你喜欢的音乐：
19 <input type=”checkbox” name=”m1″ value=”rock” checked>摇滚乐
20 <input type=”checkbox” name=”m2″ value=”jazz”>爵士乐
21 <input type=”checkbox” name=”m3″ value=”pop”>流行乐
22 </Form>
23 </body>
24 </html> 文件说明
第18行到20行就是插入的复选框。其中每一个复选框有其独立的名称和值，”摇滚乐”项目是被默认选中的。
#p# 单选框RADIO
单选框能够进行项目的单项选择，以一个圆框选择。

基本语法 <input type=”radio” name=”field＿name” checked value=”‘value” >

语法解释
checked表示此项被默认选中，value表示选中项目后传送到服务器端的值。文件范例：11-10.htm
在页面中插入单选框。
01 <!– —————————— –>
02 <!– 文件范例：11-10.htm –>
03 <!– 文件说明：插入单选框 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入单选框</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
12 姓名：<input type=”text” name=”username” size=20><br>
13 网址：<input type=”text” name=”url” size=20 maxlength=50 value=”http://”><br>
14 密码：<input type=”password” name=”password” size=20 maxlength=8><br>
15 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8><br>
16 请上传你的照片：<input type=”File” name=”File”><br>
17 请选择你喜欢的音乐：
18 <input type=”checkbox” name=”m1″ value=”rock” checked>摇滚乐
19 <input type=”checkbox” name=”m2″ value=”jazz”>爵士乐
20 <input type=”checkbox” name=”m2″ value=”pop”>流行乐<br>
21 请选择你居住的城市：
22 <input type=”radio” name=”city” value=”beijing” checked>北京
23 <input type=”radio” name=”city” value=”shanghai”>上海
24 <input type=”radio” name=”city” value=”nanjing”>南京
25 </Form>
26 </body>
27 </html> 文件说明
第22行到第24行就是插入的单选框。其中每一个单选框的名称是相同的，有其独立的值，”北京”项目是被默认选中的。
#p# 普通按纽BUTTON
表单中的按钮起着至关重要的作用。按钮可以激发提交表单的动作，可以在用户需要修改表单的时候，将表单恢复到初始的状态，还可以依照程序的需要，发挥其它作用。普通按钮主要是配合JavaScript脚本来进行表单的处理。

基本语法 <input type=”button” name=”field＿name” value=”button＿text”>

语法解释
value值代表显示在按钮上面的文字。文件范例：11-11.htm
在页面中插入普通按钮。
01 <!– —————————— –>
02 <!– 文件范例：11-11.htm –>
03 <!– 文件说明：插入普通按钮 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入普通按钮</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
12 姓名：<input type=”text” name=”username” size=20><br>
13 网址：<input type=”text” name=”url” size=20 maxlength=50 value=”http://”><br>
14 密码：<input type=”password” name=”password” size=20 maxlength=8><br>
15 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8><br>
16 请上传你的照片：<input type=”File” name=”File”><br>
17 请选择你喜欢的音乐：
18 <input type=”checkbox” name=”m1″ value=”rock” checked>摇滚乐
19 <input type=”checkbox” name=”m2″ value=”jazz”>爵士乐
20 <input type=”checkbox” name=”m2″ value=”pop”>流行乐<br>
21 请选择你居住的城市：
22 <input type=”radio” name=”city” value=”beijing” checked>北京
23 <input type=”radio” name=”city” value=”shanghai”>上海
24 <input type=”radio” name=”city” value=”nanjing”>南京<br>
25 <input type=”button” name=”button” value=”普通按钮”>
26 </Form>
27 </body>
28 </html> 文件说明
第25行就是插入的普通按钮。
#p# 提交按纽SUBMIT
单击提交按钮后，可以实现表单内容的提交。

基本语法 <input type=”sbmit” name=”field＿name” value=”button＿text”>

文件范例：11-12.htm
在页面中插入提交按钮。
01 <!– —————————— –>
02 <!– 文件范例：11-12.htm –>
03 <!– 文件说明：插入提交按钮 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入提交按钮</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=post name=invest enctype=text/plain>
12 姓名：<input type=”text” name=”username” size=20><br>
13 网址：<input type=”text” name=”url” size=20 maxlength=50 value=”http://”><br>
14 密码：<input type=”password” name=”password” size=20 maxlength=8><br>
15 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8>br>
16 请上传你的照片：<input type=”File” name=”File”><br>
17 请选择你喜欢的音乐：
18 <input type=”checkbox” name=”m1″ value=”rock” checked>摇滚乐
19 <input type=”checkbox” name=”m2″ value=”jazz”>爵士乐
20 <input type=”checkbox” name=”m2″ value=”pop”>流行乐<br>
21 请选择你居住的城市：
22 <input type=”radio” name=”city” value=”beijing” checked>北京
23 <input type=”radio” name=”city” value=”shanghai”>上海
24 <input type=”radio” name=”city” value=”nanjing”>南京<br>
25 <input type=”submit” name=”submit” value=”提交表单”>
26 </Form>
27 </body>
28 </html> 文件说明
第25行就是插入的提交按钮。
#p# 重置按纽RESET
单击重置按钮后，可以清除表单的内容，恢复默认的表单内容设定。

基本语法 <input type=”reset” name=”field＿name” value=”button＿text”>

文件范例：11-13.htm
在页面中插入重置按钮。
01 <!– —————————— –>
02 <!– 文件范例：11-13.htm –>
03 <!– 文件说明：插入重置按钮 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入重置按钮</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
12 姓名：<input type=”text” name=”username” size=20><br>
13 网址：<input type=”text” name=”url” size=20 maxlengthH=50 value=”http://”><br>
14 密码：<input type=”password” name=”password” size=20 maxlength=8><br>
15 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8><br>
16 请上传你的照片：<input type=”file” name=”File”><br>
17 请选择你喜欢的音乐：
18 <input type=”checkbox” name=”m1″ value=”rock” checked>摇滚乐
19 <input type=”checkbox” name=”m2″ value=”jazz”>爵士乐
20 <input type=”checkbox” name=”m2″ value=”pop”>流行乐<br>
21 请选择你居住的城市：
22 <input type=”radio” name=”city” value=”beijing” checked>北京
23 <input type=”radio” name=”city” value=”shanghai”>上海
24 <input type=”radio” name=”city” value=”nanjing”>南京<br>
25 <input type=”submit” name=”submit” value=”提交表单”>
26 <input type=”reset” name=”reset” value=”重置表单”>
27 </Form>
28 </body>
29 </html> 文件说明
第26行就是插入的重置按钮。
#p# 图像域IMAGE
图像域是指可以用在提交按钮上的图片，这幅图片具有按钮的功能。使用默认的按钮形式往往会让人觉得单调。如果网页使用了较为丰富的色彩或稍微复杂的设计，再使用表单默认的按钮形式甚至会破坏整体的美感。这时可以使用图像域，创建和网页整体效果相统一的图像提交按钮。

基本语法 <input type=”image” name=”field＿name” src=”image＿url”>

文件范例：11-14.htm
在页面中插入图像提交按钮。
01 <!– —————————— –>
02 <!– 文件范例：11-14.htm –>
03 <!– 文件说明：插入图像提交按钮 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入图像提交按钮</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
12 姓名：<input type=”text” name=”username” size=20><br>
13 网址：<input type=”text” name=”url” size=20 maxlength=50 value=”http://”><br>
14 密码：<input type=”password” name=”password” size=20 maxlength=8><br>
15 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8><br>
16 请上传你的照片：<input type=”File” name=”File”><br>
17 请选择你喜欢的音乐：
18 <input type=”checkbox” name=”m1″ value=”rock” checked>摇滚乐
19 <input type=”checkbox” name=”m2″ value=”jazz”>爵士乐
20 <input type=”checkbox” name=”m2″ value=”pop”>流行乐<br>
21 请选择你居住的城市：
22 <input type=”radio” name=”city” value=”beijing” checked>北京
23 <input type=”radio” name=”city” value=”shanghai”>上海
24 <input type=”radio” name=”city” value=”nanjing”>南京<br>
25 <input type=”image” name=”image” src=”11-14.GIF”>
26 </Form>
27 </body>
28 </html> 文件说明
第25行就是插入的图像提交按钮。
#p# 隐藏域HIDDEN
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到浏览器。

基本语法 <input type=”hidden” name=”field＿name” value=”value”>

文件范例：11-15.htm
在页面中插入表单隐藏域。
01 <!– —————————— –>
02 <!– 文件范例：11-15.htm –>
03 <!– 文件说明：插入隐藏域 –>
04 <!– —————————— –>
05 <html>
06 <head>
07 <title>插入隐藏域</title>
08 </head>
09 <body>
10 <h1>用户调查</h1>
11 <Form action=mailto:tslxg@hotmail.com method=get name=invest>
12 姓名：<input type=”text” name=”username” size=20><br>
13 网址：<input type=”text” name=”url” size=20 maxlength=50 value=”http://”><br>
14 密码：<input type=”password” name=”password” size=20 maxlength=8><br>
15 确认密码：<input type=”password” name=”password_confirm” size=20 maxlength=8><br>
16 请上传你的照片：<input type=”file” name=”File”><br>
17 请选择你喜欢的音乐：
18 <input type=”checkbox” name=”m1″ value=”rock” checked>摇滚乐
19 <input type=”checkbox” name=”m2″ value=”jazz”>爵士乐
20 <input type=”checkbox” name=”m2″ value=”pop”>流行乐<br>
21 请选择你居住的城市：
22 <input type=”radio” name=”city” value=”beijing” checked>北京
23 <input type=”radio” name=”city” value=”shanghai”>上海
24 <input type=”radio” name=”city” value=”nanjing”>南京<br>
25 <input type=”image” name=”image” src=”10-14.GIF”>
26 <input type=”hidden” name=”Form_name” value=”invest”>
27 </Form>
28 </body>
29 </html> 文件说明
第26行就是插入的隐藏域。

HTML表单标记之输入标记属性的使用讲解到这里就完结了，还有什么需要像小编提问的，可以来网站留言。更多精彩好看的技术文章内容尽在爱站技术频道网站。