设置表单属性

课后整理 2021-1-12

表单属性众多,不过大部分表单对象都有最基本的属性,这些属性具有通用性,下面简单介绍这些基本属性。

1.name

表单使用name属性来标识对象,作为PHP能够识别的名称。PHP根据表单的name属性值捕获表单对象包含的数据。因此在表单设计中,每个对象都必须定义name属性,且是唯一的。

由于按钮不需要提交数据,因此可以忽略name属性。

【注意】

在JavaScript脚本或CSS样式中,ID是表单对象的主要标识。

【提示】

设置name属性值时,应该遵循如下原则:

2.value

按钮使用value属性定义按钮的显示名称。文本框使用value属性设置文本框的默认值,该值会被传递给服务器。单选按钮、复选框、隐藏域和列表框/下拉菜单使用value属性来设置被传递给服务器的值。

3.type

type属性用于设置输入类型,主要用于<input>标签,具体说明如表7.1所示。

注意,HTML5新增很多输入类型,它们都属于text大类。

表7.1 输入表单对象的类型

type属性值 说明
text 文本框,字符单行显示,适合输入少量文本。如<input name="text" type="text" />
password 密码域,所有字符都显示为星号,专用密码输入。如<input name="password" type="password" />
checkbox 复选框,可以同时选择多项,专用多项选择设计。如<input name="checkbox" type="checkbox" value="?" />
radio 单选按钮,只能选择一项,多个单选按钮需要组合使用,专用单项选择设计。如<input name="radio" type="radio" value="?" />
submit 提交按钮,专用提交表单数据的触发按钮。如<input name="" type="submit" />
reset 重置按钮,专用清空表单元素内的输入数据。如<input name="" type="reset" />
file 文件域,专门用来上传二进制数据流。如<input name="file" type="file" />
hidden 隐藏域,专门用来传递固定值。如<input name="hidden" type="hidden" value="?" />
image 图像域,个性设计提交按钮的形状。如<input name="image " type="image" />
button 普通按钮,具有更广用途的动作按钮。如<input name=" button " type="button" />

4.size

不同表单对象的size属性功能也不同,例如,在列表框中,size属性用来设置列表框显示的高度;文件域、文本框和密码域使用size属性设置对象显示宽度。

5.disabled

disabled属性可以禁止表单对象,其值为布尔值,直接插入到标签之中即可。例如:

<input name="password " type="password" disabled />

该属性常用在客户端脚本中动态控制表单元素,例如,当提交按钮被单击后,设置disabled属性使其处于禁用状态,避免再次提交表单。

6.readonly

readonly属性设置只读状态,其值为布尔值,直接插入到标签之中即可。

常用在输入性表单对象中,如文本框、密码域、文本区域,用来禁止输入任何信息。例如:

<textarea name="textfield" readonly="readonly"></textarea>

7.checked

checked与disabled属性一样都是布尔值。常用在选择性表单对象中,定义对象处于被选中状态,如单选按钮和复选框。例如:

<input name="" type="radio" value="" checked />

在列表框或者下拉菜单中,为了表示被选中的项目,常用selected属性,例如:

<select  name="select">
    <option  value="1">1</option>
    <option value="2"  selected="selected">2</option>
    <option value="3">3</option>
</select>