输入标记
发布时间：2025-02-02 点击：24
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行就是插入的隐藏域。
手机网站建设要留意的地方
SSL证书在网站中都发挥什么样的作用
网站设计时需要注意哪些问题?
电子商务网站运营的核心是什么？
解析301跳转对百度排名的影响
网站如何优化才能递增上位
探析网站进行优化可以为网站带来哪些好处？
汕尾城区网站开发有哪些流程？
输入标记<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行就是插入的隐藏域。
手机网站建设要留意的地方
SSL证书在网站中都发挥什么样的作用
网站设计时需要注意哪些问题?
电子商务网站运营的核心是什么？
解析301跳转对百度排名的影响
网站如何优化才能递增上位
探析网站进行优化可以为网站带来哪些好处？
汕尾城区网站开发有哪些流程？