第四章form表单属性
1.4学习要点：
1.form表单
2.表单属性
3.h5表单属性新属性
表单是HTML中重要组成部分，是网页提供的一种交互式操作手段，主要用于采集和提交用户输入的信息。表单是一个包含表单元素的区域，而表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
1.5.1 表单定义标记
在HTML中，只要在需要使用表单的地方插入成对的表单标记
表单标记的部分属性及说明如表5-1所示。
| 属 性 | 说 明 |
|---|---|
| name | 表单名称 |
| method | 表单发送的方式，可以是”post”或者”get” |
| action | 表单处理程序 |
| enctype | 表单编码方式 |
表 5-1 超链接属性target的值及说明
下面是定义表单的一段代码，定义了名为“myform”的表单，采用“text/plain”的编码方式，将输入数据按照HTML中的“post”传输方式传送给处理程序“form_action.asps”。
1.5.2 输入标记
表单是网页提供的交互式操作手段，首先，用户必须在表单控件中输入必要的信息，发送服务器请求相应，然后服务器将结果返回给用户，这样就体现出交互。标记是表单中输入信息时常用的标记，其语法格式如下。
标记对用于定义表单，在此标记对中定义的就是表单的内容。其中，标记的name属性用于定义与用户交互控件的名称;type属性设置控件的类型，可以是文本框、密码框、单选框等。
标记的type属性值及说明如表5-2所示。
| 属 性 | 说 明 | 属 性 | 说 明 |
|---|---|---|---|
| text | 文本框 | button | 标准按钮 |
| password | 密码框 | submit | 提交按钮 |
| file | 文件框 | reset | 重置按钮 |
| checkboxe | 复选框 | image | 图像域 |
| radio | 单选按钮 |
表 5-2 标记的type属性值及说明
1. 文本框——text
将标记中的type属性值设置为text，就可以在表单中插入文本框。在此文本框中可以输入任何类型的数据，但输入的数据将以单行显示，不会换行，其语法如下。
2. 密码框——password
将标记中的type属性值设置为password，就可以在表单中插入密码框。在此密码框中可以输入任何类型的数据，这些数据都以实心圆点的形式显示，以保护密码的安全，其语法如下。
3. 复选框——checkbox
将标记中的type属性设置为checkbox，就可以在表单中插入复选框。复选框允许在一组选项中选择任意多个选项。通过复选框，用户可以在网页中实现多项选择。其语法如下。
4. 单选按钮——radio
将标记中的type属性设置为radio，就可以在表单中插入一个单选按钮。在选种状态时，按钮中心会有一个实心圆点。在按钮组中，选择一个按钮时，就会取消对该组中其他所有按钮的选择。其语法如下。
5. 标准按钮——button
将标记中的type属性设置为button，就可以在表单中插入标准按钮。其语法如下。
6. 重置/提交按钮——reset/submit
将标记中的type属性设置为reset，就可以在表单中插入重置按钮。其语法如下。
将标记中的type属性设置为submit，则插入提交按钮。其语法如下。
当用户单击此按钮时，表单中所有控件的“名称/值”被提交，提交目标是form元素的action属性所定义的URL地址。
7. 图像域——image
用户在浏览网页时，有时会看到某些网站的按钮不是普通样式，而是用一张图像做的提交或者其他类型的按钮，效果美观，这种效果可以通过插入图像域来实现。将标记中的type属性值设置为image，就可以在表单中插入图像域，其语法如下。
其中，“src”属性定义插入图像的来源路径，“width”和“height”属性分别定义图像域的宽度和高度，“border”属性定义图像域的边框宽度。
1.5.3 列表框标记
在HTML文件中，使用列表框标记
在表单中，只要插入成对的就可以插入文本域。其中的“wrap”和“id”为任意项。
示例3-6在表单中插入了名为“text”的多行输入文字域，行数为“5”，列数为“50”。多行文字域在浏览器中显示的效果如图3-7所示。
示例 3-6
<!DOCTYPE html>
图 3-7 文本域示例
若有收获，就点个赞吧
0 人点赞
