HTML中的表单设计
Smile Huang
China University of Geosciences, Wuhan
School of Computer Science, Network Engineering
Email: smilehuang94ATyahoo DOTcom
表单在建站过程中发挥着至关重要的作用，我们可以通过表单向用户提供输入的途径，并且可以将用户输入的信息按要求提供给WEB服务器的脚本程序，以不同的方式按需进行处理。表单提供了多种输入方式，包括文本输入域、单选或多选按钮、下拉式列表域等。
一、表单标记form
表单是由form标签(闭合标签)标记定义一个特定区域，定义表单开始和结束的位置，在开始标签和结束标签之间的内容均属于表单的内容，单击提交按钮时，提交的也是表单范围之内的内容。其中form标签内部还有一些html属性，这些属性在我们在使用html标签时起着至关重要的作用，下面就一些常用的重要属性进行一些说明。
name：表单名称
method：该属性用来定义处理程序从表单获取数据的方式。可取值为GET和POST中的一个，GET方法是将表单内容附加在URL地址后面，所以对提价的内容进行了限制，不可以超过8192个字符，同时GET方法不具有保密性，不适合处理涉及保密的信息，并且GET方法不能传送非ASCII的字符。POST方法是将用户在表单中填写的数据包含在表单的主体中，一起传送到服务器的处理程序中，不会在浏览器的地址栏显示提交的信息，这种方法传送的数据没有限制。method默认为POST方法。
action：该属性的值是处理程序的程序名(采用绝对或者相对URL)，如果这个属性是空值，则当前文档的URL将被使用。当用户提交表单时，服务器将执行URL里面的程序。
enctype：设置表单的编码方式。
target：该属性与链接中的同名属性类似，用来指定在何处打开action中的URL，可用选项有：_blank、_self、_parent、_top。
表单的各种输入域可以由、、三个标签来定义，下面就逐一介绍这三个标签。
二、input标签
input标签用来定义一个用户输入区域，用户可以在其中输入信息。input标签一共提供10中类型的输入区域，具体是哪一种是由其type属性来决定的。input标签中一些常用的html属性如下所示：
type：规定input元素的类型，可选属性值有十个，依次为：button、checkbox、file、hidden、image、password、radio、reset、submit、text。下面介绍完常用属性后会给出各个不同属性值下显示的不同效果。
name：定义input空间的名字。
value：指定空间的初始值 ，就是在浏览器刚打开时在文本框中显示的内容。
size：指定空间的宽度，表示该文本输入框所能显示的最大字符数。
maxlength：表示该文本框中允许用户输入的最大字符数。
id：表示对这个input标签的唯一的身份，可以通过id来对该input进行相关的操作，例如定义样式等等。
下面详细介绍一些input中type属性取不同值的时候的效果。在此之前要再介绍一个标签label：label标签一共只有两个属性for和form。其中for规定label绑定哪一个表单元素，而form规定了label字段所属的一个或多个表单。label标签可以为input元素定义标注，当用户将鼠标点击label时，浏览器就会自动将焦点转到和标签相关的表单空间上，下面一个例子就是label与input元素相结合应用的一个很好的说明。
Male
Female
通过点击Male和Female我们发现也是可以选择按钮的。上述的源代码如下所示：
Male
Female
下面来详细介绍type值不同得到的input的效果。
button：当input的type属性值为button时，表示这是一个普通按钮。
上述代码实现效果如下：
radio：当input的type属性值为radio时，表示这是一个单选框，选项之间相互排斥。同一组中的多个选项按钮的name必须相同，可以通过checked属性设置为选中状态。
radio_name1
radio_name2
radio_name3
上述代码的实现效果如下所示：
radio_name1 radio_name2 radio_name3
checkbox：当input的type属性值为checkbox时，表示这是一个复选框。同一组中的多个选项按钮的name必须相同，可以通过checked属性设置为选中状态。
checkbox_name1
checkbox_name2
checkbox_name3
上述代码的实现效果如下所示：
checkbox_name1 checkbox_name2 checkbox_name3
file：当input的type属性值为file的时候，表示这是一个文件选择按钮，可以去选择文件进行相关操作。
上述代码的实现效果如下所示：
hidden：当input的type属性值为hidden的时候，表示这是一个隐藏域，隐藏域不会在表单中显示，如果需要在页面之间传递重要的数据，可以使用将input的type属性值设为hidden。name和value两个属性是必须的，用来指定隐藏域的名字和值。基本用法如下：
image：当input的type属性值为image时。表示显示一张图片，但是一般在html中我们导入图片都是使用img标签，因为使用input type="image"时会发生表单提交两次的现象，会造成表单元素被重复提交，使得数据库被写入异常。
text：当input的type属性值为text时。表示一个单行文本框。使用和显示效果可参考password，password是一种特殊的text。
password：当input的type属性值为password时。依然是表示一个单行文本框，但是其中输入的内容全部使用' * '覆盖。表示这是密码区域，不希望在输入时被其他人看到。
please input the password:
please input the password:
上面即为代码的显示的效果。
reset：当input的type属性值为reset时。表示一个重置按钮，当点击重置按钮后，表单的内容将恢复为默认值。
submit：当input的type属性值为submit时。表示一个提交按钮，当点击提交按钮后，可以实现表单内容的提交。
至此，input的十种不同的type值已经全部介绍玩。
三、textarea标签
textarea为多行文本域，是一个闭合标签。提供一个可以输入多行文本的区域，通过rows和cols两个属性分别指定多行文本域中显示字符的行数和列数，单位是字符个数。用法如下：
四、select标签
select标签是用来创建一个下拉列表，是一个闭合标签，该标签具有multiple、name、size属性，其中multiple属性不用赋值，直接加入到标签中即可使用，加入了此属性之后列表域就可以成为可多选的列表。若不加multiple属性。那么就显示的是一个可选择的下拉列表框。size属性用来设置列表的高度，默认值为1。name属性定义了列表框的名称。基本用法如下：
带multiple属性
list1
list2
list3
list4
不带multiple属性
list1
list2
list3
list4
带multiple属性的效果：
list1list2list3list4
不带multiple属性的效果：
list1list2list3list4 要注意的是select一般都是和option标签一起用，就类比与ul与li。
有关html表单的相关知识已介绍完毕，希望大家不吝赐教！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
