HTML表单
2014-05-19 10:45
54 查看
1、<form>标签。该标签是成对的标签。首尾标签之间的内容就是一个表单。该标签有两个属性：ACTION和METHOD。它们都是不可以缺省的。
（1）action属性。该属性的作用主要就是指出该表单所对应的处理程序的位置。它的参数值就是程序的URL。一般来说，处理用户反馈信息的程序是放在Web服务器的cgi-bin目录下的。
（2）method属性。该属性用于指定该表单的运行方式。属性的参数值为get和post之一。method=get就表示该表单主要是从服务器获取信息，一般它传送给服务器的反馈信息长度是不能超过255个字符的；method=post时表示该表单主要是向服务器发送信息，那么它传送给服务器的信息长度是没有限制的。例如：<form ACTION="http://METHOD=post>表示该表单的反馈信息将被传送到相应的处理程序闪客帝国服务器的cgi-bin目录下的flash.exe程序中去。
2、<input>标签。该标签是输入标签，单独使用。它必须嵌套在表单标签中使用。用来定义一个用户输入项。<input>标签有两个固定的属性：NAME和TYPE。其中name属性的参数值是相应的处理程序中的变量名，web服务器将把这条输入信息的值赋予name属性规定的变量。type属性是用来指定该输入项提供的输入方式。在不同的输入方式下，<input>标签的格式略有不同。type属性的参数值可以是以下8项中之一项：
（1）text。表示输入项的输入信息是字符串。此时，浏览器会在相应位置显示一个文本输入框，供用户输入信息。当type=text时，除了<input>标签两个不可缺省的name和type之外，还有三个可选的属性：value,size,maxlenth.其中，value属性是用于指定文本输入框的初始值，该属性的参数值就是浏览器最开始显示在文本框中的内容。size属性是用来指定文本框的长度。属性的参数值为数字。表示该文本输入框所能显示的最大字符数。maxlenth属性的参数值是数字，表示该文本输入框允许用户输入的最大字符数。该属性的参数值总是大于或等于size属性的参数值的。当输入的字符数超过了文本输入框的长度时，用户可以同过移动光标来查看其余部分的内容。
（2）password。该属性表示该输入项的输入信息是密码。type=password方式下的输入和type=text方式下的输入基本上是相同的，但是浏览器并不在文本输入框中显示用户输入的密码。而是用"*"来表示每一个密码字符。
（3）checkbox。表示输入项是一个复选项，用户可以同时选中表单的一个或几个复选项作为输入信息。当type=checkbox时，除了type和name属性外，<input>标签还有2个属性：value和checked.其中。value属性的参数值就是当该项被选中并提交后，浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项内容相同或基本相同，该属性是不可缺省的。checked属性是用来指定复选项的初始状态表示该复选项在初始状态是被选中的。
（4）radio。表示该输入项是一个单选项。单选项是互斥的，用户只能选择表单中所有选项的其中一个做为输入信息。因此，所有单选项name属性的参数值是相同的。type=radio时，<input>标签还有两个属性：value和checked，他们的使用方法和功能与type=checkbox时完全一样，就不多说了。
（5）hidden。当 type=hidden时，表示输入项将不在浏览器窗口中显示。如果你不想显示某些选项而又不愿意将它们从文档中删掉的话，你可以通过将这些选项中type属性的参数值改为hidden来达到上述目的。
（6）submit。当type=submit时，浏览器会在相应的位置自动生成一个提交按钮。当拥护点击该按钮时，浏览器就会将表单的输入信息传送给服务器。提交按钮的name属性是可以缺省的。除去name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字。value属性的缺省值是由不同浏览器确定的。在NC中为"Submit query"在IE中为“提交查询内容”。在一个表单中必须有提交按钮，不然将无法向服务器传送信息。
（7）image。当type=image是浏览器会在相映的位置生成一个图象按钮。单击该按钮，浏览器就会见表单的输入信息发送给服务器。在使用图象按钮时，必须在<input>标签中添加src属性指定图象所在的位置。另外，很多在图象标签中使用的属性也可在图象按钮中使用到，这里就不不一一的详细说了，自己理解一下吧！不是很麻烦。
（8）reset。当type=reset时，浏览器会在相应的位置生成一个还原按钮。单击该按钮，浏览器就会清楚表单中所有的输入信息恢复到初始的状态。当type=reset时<input>标签没有任何其他属性。显示在按钮上文字也是由不同的浏览器决定的。NC中显示为"Reset"，IE中显示为“还原”。
三、列表框。HTML是通过<select>和<option>标签来定义输入列表框的。列表框标签<select>是成对使用的标签。首尾标签之间的内容就是一个列表框的内容。<select>必须配合<option>标签共同使用。后者用于定义列表框中的各个选项。<select>标签有两个属性：NAME和SIZE。用于指定输入列表框的名字。其中NAME属性是不可缺省的。
（1）name属性用来指定输入列表框的名字。
（2）sixe属性是可选的，用来指定列表框的长度。该属性的参数值是数字，表示显示在列表框中的选项数目。当其参数值小于列表框中的列表项数目时，浏览器会自动的为其添加滚动条。其缺省值为1。
HTML中使用<option>标签来定义列表框中的选项。<option>标签是单独的标签，它必须嵌套在列表框中使用，一个列表框中有几个选项，就要有几个<option>标签于之相对应。<option>标签有2个属性：value和seleted，它们都是可选的。其中value的参数值是当该选项被选中提交后，浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容。checked属性是用来指定选项的初始状态，表示该选项在初始时是被选中的。例如：
<html>
<head>
<title>测试页面</title>
<HR>
<form action="#";;' target=_blank>#;;; method="post">
<P>请选择您想去的商店:<BR>
<P><select name="store"size=3>
<option value=“闪客百货”>闪客百货商店
<option>超级自选
<option>第一百货
<option>第二百货
</select>
<P>请在选择完毕后单击确认按钮：
<Input type=submit value="确 认">
</form>
<HR>
</body>
</html>
四、<textarea>标签
HTML用<textarea>标签来定义高度超过一行的文本输入框。<textarea>标签是成对标签。首尾标签之间的内容就是显示在文本输入框中的初始信息。<textarea>标签有三个属性：name，rows和cols。
（1）name属性用于指定文本输入框的名字
（2）cols属性用于规定文本输入矿的宽度。参数值是数字，表示一行所能显示的最大数字。如果输入信息中有一行或几行的字符大于cols属性，那么浏览器将自动添加水平滚动条。
（3）rows属性用于规定文本输入框的高度。参数值是数字。表示该文本输入框所占的行数。浏览器会自动为高度超过一行的文本输框添加垂直滚动条。但是当输入信息的行数小于或等于rows属性的参数值时，滚动条将不起作用。例如：
<html>
<head>
<title>测试页面</title>
</head>
<body>
<HR>
<P>请在方框内填写您的住址和“有效”联系方式，以后好找您请我吃饭<BR>
<P>
<textarea name="address"rows=5 cols=40>
这是填写的内容了。要不你留下怎么联系？？我真的找你请我吃饭哦！呵呵
</textarea>
填写错误，单击这里清除重写
<Input type=reset><BR><P>
写完了？按这儿确认：
<input type=submit>
</form>
<P><HR>
</body>
</html>
另需要说明：<textarea>隐含有<pre>标签的预先格式化的功能。
（1）action属性。该属性的作用主要就是指出该表单所对应的处理程序的位置。它的参数值就是程序的URL。一般来说，处理用户反馈信息的程序是放在Web服务器的cgi-bin目录下的。
（2）method属性。该属性用于指定该表单的运行方式。属性的参数值为get和post之一。method=get就表示该表单主要是从服务器获取信息，一般它传送给服务器的反馈信息长度是不能超过255个字符的；method=post时表示该表单主要是向服务器发送信息，那么它传送给服务器的信息长度是没有限制的。例如：<form ACTION="http://METHOD=post>表示该表单的反馈信息将被传送到相应的处理程序闪客帝国服务器的cgi-bin目录下的flash.exe程序中去。
2、<input>标签。该标签是输入标签，单独使用。它必须嵌套在表单标签中使用。用来定义一个用户输入项。<input>标签有两个固定的属性：NAME和TYPE。其中name属性的参数值是相应的处理程序中的变量名，web服务器将把这条输入信息的值赋予name属性规定的变量。type属性是用来指定该输入项提供的输入方式。在不同的输入方式下，<input>标签的格式略有不同。type属性的参数值可以是以下8项中之一项：
（1）text。表示输入项的输入信息是字符串。此时，浏览器会在相应位置显示一个文本输入框，供用户输入信息。当type=text时，除了<input>标签两个不可缺省的name和type之外，还有三个可选的属性：value,size,maxlenth.其中，value属性是用于指定文本输入框的初始值，该属性的参数值就是浏览器最开始显示在文本框中的内容。size属性是用来指定文本框的长度。属性的参数值为数字。表示该文本输入框所能显示的最大字符数。maxlenth属性的参数值是数字，表示该文本输入框允许用户输入的最大字符数。该属性的参数值总是大于或等于size属性的参数值的。当输入的字符数超过了文本输入框的长度时，用户可以同过移动光标来查看其余部分的内容。
（2）password。该属性表示该输入项的输入信息是密码。type=password方式下的输入和type=text方式下的输入基本上是相同的，但是浏览器并不在文本输入框中显示用户输入的密码。而是用"*"来表示每一个密码字符。
（3）checkbox。表示输入项是一个复选项，用户可以同时选中表单的一个或几个复选项作为输入信息。当type=checkbox时，除了type和name属性外，<input>标签还有2个属性：value和checked.其中。value属性的参数值就是当该项被选中并提交后，浏览器要传送给服务器的数据。因此，value属性的参数值必须与选项内容相同或基本相同，该属性是不可缺省的。checked属性是用来指定复选项的初始状态表示该复选项在初始状态是被选中的。
（4）radio。表示该输入项是一个单选项。单选项是互斥的，用户只能选择表单中所有选项的其中一个做为输入信息。因此，所有单选项name属性的参数值是相同的。type=radio时，<input>标签还有两个属性：value和checked，他们的使用方法和功能与type=checkbox时完全一样，就不多说了。
（5）hidden。当 type=hidden时，表示输入项将不在浏览器窗口中显示。如果你不想显示某些选项而又不愿意将它们从文档中删掉的话，你可以通过将这些选项中type属性的参数值改为hidden来达到上述目的。
（6）submit。当type=submit时，浏览器会在相应的位置自动生成一个提交按钮。当拥护点击该按钮时，浏览器就会将表单的输入信息传送给服务器。提交按钮的name属性是可以缺省的。除去name属性外，它还有一个可选的属性value，用于指定显示在提交按钮上的文字。value属性的缺省值是由不同浏览器确定的。在NC中为"Submit query"在IE中为“提交查询内容”。在一个表单中必须有提交按钮，不然将无法向服务器传送信息。
（7）image。当type=image是浏览器会在相映的位置生成一个图象按钮。单击该按钮，浏览器就会见表单的输入信息发送给服务器。在使用图象按钮时，必须在<input>标签中添加src属性指定图象所在的位置。另外，很多在图象标签中使用的属性也可在图象按钮中使用到，这里就不不一一的详细说了，自己理解一下吧！不是很麻烦。
（8）reset。当type=reset时，浏览器会在相应的位置生成一个还原按钮。单击该按钮，浏览器就会清楚表单中所有的输入信息恢复到初始的状态。当type=reset时<input>标签没有任何其他属性。显示在按钮上文字也是由不同的浏览器决定的。NC中显示为"Reset"，IE中显示为“还原”。
三、列表框。HTML是通过<select>和<option>标签来定义输入列表框的。列表框标签<select>是成对使用的标签。首尾标签之间的内容就是一个列表框的内容。<select>必须配合<option>标签共同使用。后者用于定义列表框中的各个选项。<select>标签有两个属性：NAME和SIZE。用于指定输入列表框的名字。其中NAME属性是不可缺省的。
（1）name属性用来指定输入列表框的名字。
（2）sixe属性是可选的，用来指定列表框的长度。该属性的参数值是数字，表示显示在列表框中的选项数目。当其参数值小于列表框中的列表项数目时，浏览器会自动的为其添加滚动条。其缺省值为1。
HTML中使用<option>标签来定义列表框中的选项。<option>标签是单独的标签，它必须嵌套在列表框中使用，一个列表框中有几个选项，就要有几个<option>标签于之相对应。<option>标签有2个属性：value和seleted，它们都是可选的。其中value的参数值是当该选项被选中提交后，浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容。checked属性是用来指定选项的初始状态，表示该选项在初始时是被选中的。例如：
<html>
<head>
<title>测试页面</title>
<HR>
<form action="#";;' target=_blank>#;;; method="post">
<P>请选择您想去的商店:<BR>
<P><select name="store"size=3>
<option value=“闪客百货”>闪客百货商店
<option>超级自选
<option>第一百货
<option>第二百货
</select>
<P>请在选择完毕后单击确认按钮：
<Input type=submit value="确 认">
</form>
<HR>
</body>
</html>
四、<textarea>标签
HTML用<textarea>标签来定义高度超过一行的文本输入框。<textarea>标签是成对标签。首尾标签之间的内容就是显示在文本输入框中的初始信息。<textarea>标签有三个属性：name，rows和cols。
（1）name属性用于指定文本输入框的名字
（2）cols属性用于规定文本输入矿的宽度。参数值是数字，表示一行所能显示的最大数字。如果输入信息中有一行或几行的字符大于cols属性，那么浏览器将自动添加水平滚动条。
（3）rows属性用于规定文本输入框的高度。参数值是数字。表示该文本输入框所占的行数。浏览器会自动为高度超过一行的文本输框添加垂直滚动条。但是当输入信息的行数小于或等于rows属性的参数值时，滚动条将不起作用。例如：
<html>
<head>
<title>测试页面</title>
</head>
<body>
<HR>
<P>请在方框内填写您的住址和“有效”联系方式，以后好找您请我吃饭<BR>
<P>
<textarea name="address"rows=5 cols=40>
这是填写的内容了。要不你留下怎么联系？？我真的找你请我吃饭哦！呵呵
</textarea>
填写错误，单击这里清除重写
<Input type=reset><BR><P>
写完了？按这儿确认：
<input type=submit>
</form>
<P><HR>
</body>
</html>
另需要说明：<textarea>隐含有<pre>标签的预先格式化的功能。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 手机wap端用户注册表单（html+css）
- HTML表单
- HTML高级标签（3）————表单的应用
- html表单控件select的sel.length属性
- HTML_03_基础表单属性
- Html的form表单提交到jsp中出现中文乱码
- 实例详解html的form表单和php的_POST数组，并用fiddler抓包来玩玩------走进Web、Server开发的世界
- html+javascript实现表单前台验证
- [转载][RFC文档]RFC1867 Form-based File Upload in Html(Html中基于表单的文件上传)
- jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
- HTML系列（九）：表单
- HTML的表单元素
- HTML静态网页 图片热点、框架、表单
- 一起学asp.net基础文章二 服务器控件、客户端控件和html表单控件
- asp.net怎样获取HTML表单File中的路径
- HTML_4th_表单
- ASP.NET MVC5 学习系列之表单和HTML辅助方法
- Html: 表单、文本域、单选按钮
- html 表单初步学习
- HTML之表单元素