Web程序开发：第7章 表单

1、 第章7第7章 表单7.1 表单概述7.2 定义表单7.3 input元素7.4 select元素7.5 textarea元素7.6 其它相关元素7.7 表单实例第章77.1 表单概述表单是网页中提供的一种交互式操作手段，在网页中的使用十分广泛。无论是提交搜索的信息，还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分：一是用html源代码描述的表单，可以直接添加到网页中；二是提交后的表单处理，需要调用服务器端程序对客户端提交的信息进行处理。表单常用相关元素如下表所示。元素元素说明说明form创建 HTML 表单input根据不同的 type 属性

2、值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等select可创建单选或多选菜单。 元素中的 标签用于定义列表中的可用选项option定义下拉列表中的一个选项textarea定义多行的文本输入框第章77.2 定义表单 通过元素定义一个表单。默认为一个块状元素。 属性属性值值描述描述actionURL规定当提交表单时向何处发送表单数据。autocompleteon或off规定是否启用表单的自动完成功能。enctype application/x-www-form-urlencoded multipart/form-data text/plain规定

3、在发送表单数据之前如何对其进行编码。methodget或post规定用于发送 form-data 的 HTTP 方法。nameform_name规定表单的名称。novalidatenovalidate如果使用该属性，则提交表单时不进行验证。target_blank、_self、_top、_parent规定在何处打开 action URL。第章77.3 input元素元素可以通过type属性定义不同的输入控件。type属性通常可以取以下值。不过在html5中进行了扩展。元素同时具有块状和行内元素特点。type属性值描述button定义可点击按钮checkbox定义复选框file定义输入字段和 浏

4、览按钮，供文件上传hidden定义隐藏的输入字段image定义图像形式的提交按钮password定义密码字段。该字段中的字符被掩码。radio定义单选按钮reset定义重置按钮。重置按钮会清除表单中的所有数据submit定义提交按钮。提交按钮会把表单数据发送到服务器text定义单行的输入字段，用户可在其中输入文本第章77.3 input元素-续1元素可以通过type属性定义不同的输入控件。不过在html5中进行了扩展，如下表所示。type属性值描述email用于包含 e-mail 地址的输入域url用于包含 URL 地址的输入域number用于包含数值的输入域range用于包含一定范围内数字值

5、的输入域，滑动条date选取日、月、年month选取月、年week选取周和年time选取时间（小时和分钟）datetime选取时间、日、月、年（UTC 时间）datetime-local选取时间、日、月、年（本地时间）color颜色选择框第章77.3 input元素-续2当type属性取值为number和range时，可以使用input元素的下列属性来规定对数字类型的限定。属性描述max规定允许的最大值min规定允许的最小值step规定合法的数字间隔value规定默认值 第章77.3 input元素-续3元素具有以下常用属性。属性描述name定义 input 元素的名称value定义 inpu

6、t 元素的值readonly规定输入字段为只读disabled当 input 元素加载时禁用此元素autocomplete规定是否使用输入字段的自动完成功能autofocus规定输入字段在页面加载时是否获得焦点checked规定此 input 元素首次加载时应当被选中（radio和checkbox）maxlength规定输入字段中的字符的最大长度placeholder规定帮助用户填写输入字段的提示required指示输入字段的值是必需的type规定 input 元素的类型第章77.3.1 单行文本框元素type属性取值为text时，为单行文本框。 第章77.3.2 密码文本框元素type属性取

7、值为password时，为单行文本框。 第章77.3.3 单选按钮元素type属性取值为radio时，为单选按钮。单选按钮可以分组，在组内单选。name属性值相同的为一组。 优秀 良好 及格 男 女 第章77.3.4 复选按钮元素type属性取值为checkbox时，为复选按钮。复选按钮可以分组，在组内多选。name属性值相同的为一组。 电影 音乐 阅读 男 女 第章77.3.5 文件上传按钮元素type属性取值为file时，为文件上传按钮。 电影 音乐 阅读 男 女 第章77.3.6 提交按钮元素type属性取值为submit时，为表单提交按钮。该按钮为表单默认提交按钮。 电影 音乐 阅读

8、男 女 第章77.3.7 重置按钮元素type属性取值为reset时，为表单重置按钮。当单击该按钮时，表单数据全部被重置。 电影 音乐 阅读 男 女 第章77.3.8 图像按钮元素type属性取值为image时，为图像按钮。单击该按钮，表单会提交。 电影 音乐 阅读 第章77.3.9 普通按钮元素type属性取值为button时，为普通按钮。必须为该按钮设置click事件进行表单提交，否则单击该按钮，表单不会提交。 电影 音乐 阅读 第章77.3.10 隐藏域元素type属性取值为button时，为普通按钮。必须为该按钮设置click事件进行表单提交，否则单击该按钮，表单不会提交。 电影 音乐

9、 阅读 第章77.3.11 type扩展属性元素type属性取值为html5新增加的属性值时，如果浏览器不支持，会退化为单行文本框。 第章77.4 select元素在表单中插入下拉菜单和列表项，只要插入成对的，其中嵌套，就可以插入下拉菜单和列表。属性值描述autofocus（5）autofocus规定在页面加载后文本区域自动获得焦点disableddisabled规定禁用该下拉列表form（5）form_id规定文本区域所属的一个或多个表单multiplemultiple规定可选择多个选项namename规定下拉列表的名称required（5） required规定文本区域是必填的sizenu

10、mber规定下拉列表中可见选项的数目第章77.4 select元素-续1其中嵌套在元素中的，具有下列属性。属性值描述selectedselected规定选项（在首次显示在列表中时）表现为选中状态disableddisabled规定此选项应在首次加载时被禁用labeltext定义当使用 时所使用的标注valuetext定义送往服务器的选项值 Volvo Saab Mercedes Audi 第章77.4 select元素-续2 Volvo Saab Opel Audi Volvo Saab Opel Audi 第章77.5 textarea元素 元素定义多行的文本输入控件。属性如下表。属性值描述

11、autofocusautofocus规定在页面加载后文本区域自动获得焦点colsnumber规定文本区内的可见宽度disableddisabled规定禁用该文本区formform_id规定文本区域所属的一个或多个表单maxlengthnumber规定文本区域的最大字符数namename_of_textarea规定文本区的名称placeholdertext规定描述文本区域预期值的简短提示readonlyreadonly规定文本区为只读requiredrequired规定文本区域是必填的rowsnumber规定文本区内的可见行数wraphard或soft规定当在表单中提交时，文本区域中的文本如何换行第章77.5 textarea元素-续1 使用我时，开始标记和结束标记不能缺少的。这就是我的值。我没有value属性。 使用我时，开始标记和结束标记不能缺少的。这就是我的值。我没有value属性。 第章77.6 其它相关元素 有一些元素对于表单的制作具有辅助功能，如分组、提供标题信息等。属性描述fieldset可将表单内的相关元素分组legend为 fieldset元素定义标题，必须位于fieldse