大部分表单对象主要用来接收用户的输入,或者选择,它们在页面中呈现不同的样式,具有不同的操作体验。PHP也以表单对象作为独立单元来接收表单提交的数据。
1.文本框
文本框比较常用,任何类型的信息都可以通过文本框实现交互。文本框包含很多属性,常用属性及其语法格式如下:
<input name="textfield" <!-- 必设属性 --> type="text" <!-- 必设属性 --> id="textfield" <!-- 可选属性 --> value="单行文本框" <!-- 默认值,可选属性--> size="20" <!-- 定义文本框的宽度,即文本框的显示长度 --> maxlength="20" <!-- 定义文本框的大小,即最多接收字符数 --> />
【提示】
文本框方便输入不限定数据,但是PHP在后期处理时,会比较麻烦。例如,如果获取用户的性别信息,使用文本框让用户输入性别,就会存在很多问题。有的可能会输入“男”,有的可能会输入“men”,或者有的输入“先生”、“男人”等。所以在使用文本框时应该考虑下面几个问题:
- 信息是否确定。固定的信息就不需要输入,直接使用隐藏域传递即可。
- 信息是否具体。具体的信息就应该让用户进行选择,而不是让用户进行输入。
- 信息是否模糊。模糊的信息应该使用文本框,而不能设计选项或者列表让用户进行操作。
在实际应用中文本框多用于要求用户输入个人信息,如姓名、地址等不确定的简单信息。
2.密码域
密码域也是一种文本框,不过它是一种特殊用途的文本框,与普通文本框不同之处就在于它在页面中不显示所有输入字符,而是全部用星号代替,这样的设计目的是为了防止密码不被旁观者恶意窃取,如图7.2所示。
图7.2 文本框与密码域效果比较
3.文本区域
文本区域能够多行显示输入的信息,常被设计为接收大容量信息的项目。例如,个人简介、对象说明、详细计划、图书目录、多行列表等。
与文本框不同,文本区域使用textarea元素定义。文本区域的代码格式如下:
<textarea name="textarea" <!-- 必设属性 --> cols="20" <!-- 定义文本区域显示的列数(宽度),以字符为单位 --> rows="5" <!-- 定义文本区域显示的行数(高度)--> wrap="physical"> <!-- 定义换行方式 --> <!-- 这里是文本区域显示的输入信息,也可以在此设置默认显示信息 --> </textarea>
【提示】
与文本框相比,文本区域有如下3个特征:
- 文本区域元素是一个封闭式标签,这有别于文本框等输入性表单元素input。
- textarea元素没有value属性,可以在标签中间定义默认显示信息。
- textarea元素提供了3个比较特殊的属性,rows定义高度,cols定义宽度,wrap定义当输入文本内容大于文本区域定义的宽度时,如何进行显示。它包含2个属性值,说明如表7.2所示。
表7.2 wrap属性值说明
属性值 | 说明 |
---|---|
soft | 默认值,当提交表单时,textarea 中的文本不换行。 |
hard | 当提交表单时,textarea 中的文本换行(包含换行符)。必须定义cols 属性。 |
4.单选按钮
单选按钮传递的信息比较单纯,很容易被服务器处理,常常被用于脚本中实现逻辑判断。例如,判断是男是女、是对是错、是否同意等。
【示例】通过设置相同的name属性值,可以把多个单选按钮捆绑在一起,设计为单选按钮组。下面代码设计一个性别选项,效果如图7.3所示。
<fieldset data-role="controlgroup"> <legend>性别</legend> <label> <input name="sex" type="radio" value="男" checked />男</label> <label> <input name="sex" type="radio" value="女" />女</label> </fieldset>
图7.3 单选按钮组
【提示】
使用单选按钮时,应该注意下面几个问题:
- 单选按钮必须分组才能够完成任务。多个单选按钮通过定义相同的name属性,捆绑在一起。
- 被分为一组的单选按钮在浏览时,只能有一个可以选中。
- 单选按钮传递的值一般都比较单纯,建议不要在单选按钮中附加过多的信息,最好是连续的数字编号或者逻辑值。这样即加快数据的传输速度,同时也方便服务器的处理。
5.复选框
复选框传递的信息也比较单一,但是当多个复选框捆绑在一起时,可以设计多项选择,方便用户快速选择,而不用手动输入信息。
【示例】捆绑复选框的方法是为多个复选框定义相同的name属性值。下面代码定义了一个复选框组,效果如图7.4所示。
<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>
图7.4 复选框组
设计复选框时,应把一组复选框排列在一起,并命名为有规律的名字,以方便PHP处理。因为在脚本中需要逐一获取每个复选框传递的值,并根据复选框是否被选中来决定采用哪些选项值。
6.列表菜单
列表框与单选按钮和复选框一样都是属于选择性表单对象,所接收的信息一般都是固定的,通过用户的选择来向服务器传递指定信息。但是它们在使用上也有区别:
- 单选按钮和复选框能够在页面中显示全部选项,这样方便浏览,对于选项比较少时,使用单选按钮或复选框会比较经济。如果选项过多,就会占用过多的页面,而浪费空间。
- 列表框能够把所有选项包含在一个框内,可以隐藏部分或全部选项。这对于选项很多时,就显得很实用。例如,在选择国籍、省份、区号等大量选项的信息时,一般都会采用下拉菜单来设计。
列表框和下拉菜单同属于一个表单元素(select),只不过它们的显示样式不同。
如果在select元素中不设置size属性,则该元素会显示为下拉菜单样式,如图7.5所示。
图7.5 下拉菜单样式
如果以列表框形式显示,则可以使用size属性指定列表框的高度,设计显示几个选项。还可以通过multiple属性定义列表框是否为多选,效果如图7.6所示。
图7.6 列表框样式
定义multiple属性之后,列表框与复选框功能类似;没有指定multiple属性或者没有定义size属性,列表框或下拉菜单在功能上与单选按钮组相同。select包含的option元素是一个可选对象,可以任意多个选项。
7.文件域
文件域是一个复合控件,由文本框和浏览按钮组成,文件域常用来传递二进制数据流,如文件、图片等。
【示例】文件域用法如下,效果如图7.7所示。
<label>上次文件 <input name="file" type="file" /> </label>
图7.7 文件域
8.按钮
按钮不传递数据,仅作为操控的触发器。单击按钮时将触发一个动作,并执行相应的行为,以完成某项任务。按钮有多种类型,例如:
负责提交表单数据的提交按钮:
<input name="" type="submit" value="提交" />
负责恢复表单域的默认显示的重置按钮:
<input name="" type="reset" value="重置" />
没有包含特定行为的普通按钮:
<input name="" type="button" value="普通按钮" />
9.图像域
图像域实际上就是一个提交按钮,它允许用户选择图像作为按钮的显示界面,因此适合设计个性按钮样式。
【示例】下面代码使用图像域设计一个提交按钮,效果如图7.8所示。
<input name="submit" type="image" value="提交" src="images/submit.gif" alt="提交" align="middle" height="40" />
图7.8 图像域设计的提交按钮
10.隐藏域
隐藏域主要用来在表单中传递固定的值,该对象不会显示在页面中,但是其值可以在网页源代码中查看。一般使用隐藏域来传递一些配置信息或者辅助信息,以弥补提交表单时,很多数据在表单中无法传递的问题,但是要避免使用隐藏域传递个人隐私信息,或者传递一些完整的、大容量信息。因为这样即不安全,也给数据传输增加负荷。
隐藏域使用比较简单,代码格式如下:
<input name="id" <!-- 必设属性,指定隐藏域的名称 --> type="hidden" <!-- 必设属性,指定隐藏域的类型 --> value="100" <!-- 必设属性,指定要传递的值 --> />