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 图像域(图像按钮)
文字域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://"的初始值。
密码域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行是密码域。设定了密码域的尺寸、名称和最大输入字符数。
文件域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行就是插入的复选框。其中每一个复选框有其独立的名称和值，"摇滚乐"项目是被默认选中的。
单选框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行就是插入的单选框。其中每一个单选框的名称是相同的，有其独立的值，"北京"项目是被默认选中的。
普通按纽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行就是插入的普通按钮。
提交按纽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行就是插入的提交按钮。
重置按纽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行就是插入的重置按钮。
图像域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行就是插入的图像提交按钮。
隐藏域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行就是插入的隐藏域。
本文来源于广州网站建设公司与广州网站设计制作公司-广帆互动广州公司！
日期：2014年07月30日
标签： 广州网站设计公司 、 广州网站设计 、 广州网站建设公司 、 广州网站建设 、 广州网站制作公司 、 广州网站制作 、 高端网站设计 、 高端网站建设 、 广州高端网站设计 、 广州高端网站建设
