使用表单对象

课后整理 2021-1-7

大部分表单对象主要用来接收用户的输入,或者选择,它们在页面中呈现不同的样式,具有不同的操作体验。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个特征:

表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 单选按钮组

【提示】

使用单选按钮时,应该注意下面几个问题:

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"                   <!-- 必设属性,指定要传递的值 -->
/>