在网站建设中，表单对象在页面中呈现不同的UI效果，具有不同的数据输入体验，但是它们的功能都是相同的，即接收数据。表单将根据不同表单对象接收并传递数据。服务器也将以表单对象作为信息单元对表单数据进行捕获。

1. 文本框

文本框比较常用，任何类型的信息都可以通过文本框实现交互。文本框包含很多属性，常用属性及其语法格式如下：

<input    name="textfield"              <!--必设属性-->    type="text"                   <!--必设属性-->    id="textfield"                <!--可选属性-->    value="单行文本框"            <!--默认值，可选属性-->    size="20"                     <!--定义文本框的宽度，即文本框的显示长度-->    maxlength="20"                <!--定义文本框的大小，即最多接收字符数-->/>

2. 密码域

密码域也是一种文本框，不过它是一种特殊用途的文本框，与普通文本框不同之处就在于它在页面中不显示所有输入字符，而是全部用星号代替这样的设计目的是为了防止密码不被旁观者恶意窃取。

3. 文本区

域文本区域就是多行文本框，由于它能够多行显示输入的信息，常被设计为接收大容量信息的项目。例如，个人简介、对象说明、详细计划、图书目录、多行列表等。

与文本框不同，文本区域使用textarea元素定义。文本区域的代码格式如下：

<textarea    name="textarea"                 <!--必设属性-->    cols="20"                       <!--定义文本区域显示的列数（宽度），以字符为单位-->    rows="5"                        <!--定义文本区域显示的行数（高度）-->    wrap="physical">                <!--定义换行方式  -->    <!--这里是文本区域显示的输入信息，也可以在此设置默认显示信息--></textarea>

4. 单选按钮

单选按钮传递的信息非常简单，可以用一个字节来表示，如1、0、true或false。从开发的角度分析，由于单选按钮传递的信息比较单纯，很容易被服务器处理，常常被用于脚本中实现逻辑判断。例如，判断是男是女、是对是错、是否同意等。

通过设置相同的name属性值，可以把多个单选按钮捆绑在一起，设计为单选按钮组。例如，下面代码设计一个性别选项。

<fieldset data-role="controlgroup">    <legend>性别</legend>    <label>        <input name="sex" type="radio" value="男" checked />男</label>    <label>        <input name="sex" type="radio" value="女" />女</label></fieldset>

5. 复选框

复选框传递的信息也比较单一，但是当多个复选框捆绑在一起时，可以设计多项选择，方便用户快速选择，而不用手动输入信息。捆绑复选框的方法是为多个复选框定义相同的name属性值，例如，下面代码定义了一个复选框组：

<fieldset data-role="controlgroup">    <legend>兴趣</legend>    <label>        <input name="interest" type="checkbox" value="体育" />体育</label>    <label>        <input name="interest" type="checkbox" value="音乐" />音乐</label>    <label>        <input name="interest" type="checkbox" value="计算机" /> 计算机</label></fieldset>

设计复选框时，应把一组复选框排列在一起，并命名为有规律的名字，以方便后台处理。因为在脚本中需要逐一获取每个复选框传递的值，并根据复选框是否被选中来决定采用哪些选项值。

6. 列表菜单

列表框与单选按钮和复选框一样都是属于选择性表单对象，所接收的信息一般都是固定的，通过用户的选择来向服务器传递指定信息。但是它们在使用上也有区别。   

•单选按钮和复选框能够在页面中显示全部选项，这样方便浏览，对于选项比较少时，使用单选按钮或复选框会比较经济。如果选项过多，就会占用过多的页面，而浪费空间。   

•列表框能够把所有选项包含在一个框内，可以隐藏部分或全部选项。这对于选项很多时，就显得很实用。例如，在选择国籍、省份、区号等大量选项的信息时，一般都会采用下拉菜单来设计。

列表框和下拉菜单同属于一个表单元素（se-lect），只不过它们的显示样式不同。

7. 文件域

文件域是一个复合控件，由文本框和浏览按钮组成，文件域常用来传递二进制数据流，如文件、图片等。文件域用法如下

<label>上次文件    <input name="file" type="file" /></label>

8. 按钮

按钮不负责接收和传递数据，仅作为执行具体操作的事件。单击按钮时将触发一个动作，并执行相应的行为，以完成某项任务。按钮有多种类型，例如：

负责提交表单数据的提交按钮：<input name="" type="submit" value="提交" />

负责恢复表单域的默认显示的重设按钮：<input name="" type="reset" value="重置" />

没有包含特定行为的普通按钮：<input name="" type="button" value="普通按钮" />

9. 图像域

图像域实际上就是一个提交按钮，它允许用户选择图像作为按钮的显示界面，因此适合设计个性按钮样式。例如，下面代码使用图像域设计一个提交按钮

<input name="submit" type="image" value="提交" src="images/submit.gif" alt="提交" align="middle" height="40" />

10. 隐藏域隐藏域主要用来在表单中传递固定的值，该对象不会显示在页面中，但是其值可以在网页源代码中查看。一般使用隐藏域来传递一些配置信息或者辅助信息，以弥补提交表单时，很多数据在表单中无法传递的问题，但是要避免使用隐藏域传递个人隐私信息，或者传递一些完整的、大容量信息。因为这样既不安全，也给数据传输增加负荷。

隐藏域使用比较简单，代码格式如下：

<input    name="id"                     <!--必设属性，指定隐藏域的名称-->    type="hidden"                 <!--必设属性，指定隐藏域的类型-->    value="100"                   <!--必设属性，指定要传递的值-->/>