《网页设计与制作》第11章 网页表单的应用

为文本字段的表单对象添加标签文本，同时可设
置标签文本的位置。
（3）在“输入标签辅助功能属性”对话框中，各
项的解释及应用方法如下：
ID：用于提供脚本的引用。指定了<input>元素的
名称和ID号。名称和ID号是一致的。
标签：文本字段的提示文本。即表单控件的提示
信息。
样式：说明“标签”内容的使用方式。分为三种
值_self：表示在包含这个链接的框架窗口中打开链 接文档。
值_top：表示在整个浏览器窗口中打开链接文档。
2020/7/9
6
（6）在“方法”下拉菜单中选择要处理表单数据的 方式。 POST：将表单值封装在消息主体中发送。 GET：将提交的表单值追加在URL后面发送给服务器。 这也是浏览器的默认设置传递表单数据的方式。 （7）在“编码类型”下拉菜单中选择表单数据在被 发送到服务器之前应该如何加密编码。 Application/x-www-form-urlencoded：普通URL方式 处理表单内容。 Multipart/form-data：处理文件上传域时采用的编码 方式。
（3）在“表单 ID”文本框中输入一个唯一的名称来 标识表单。
2020/7/9
5
（4）在“动作”文本框中指定将要处理表单信息的 脚本或者应用程序所在的URL路径。可以直接输入， 也可以点击文本框旁边的“文件夹”图标来获得。
（5）在“目标”下拉菜单中选择返回数据的窗口的 打开方式。
值_blank：表示在一个新窗口中打开链接文档。 值_new：表示在一个新窗口中打开链接文档。 值_parent：表示在包含这个链接的父框架窗口中打 开链接文档。
2020/7/9
14
11.2.2 创建文本区域
1.创建文本区域有两种方法： 方法一：先为表单插入一个文本字段的对象。 然后在“属性”面板中设置“类型”为“多 行”。
方法二：单击浮动面板“插入”中的“文本区 域”（不是“文本字段”）按钮，在弹出的 “输入标签辅助功能”对话框中进行各种属性 的设置。
2020/7/9
15
2.网页中设置文本区域属性：
Overflow用来设置内容溢出（设置被设定对象是否显示滚动
条）
overflow-x用来设置水平方向内容溢出
overflow-y用来设置垂直方向内容溢出
上述的三个属性设置的值分别为visible(默认值)、scroll、
hidden、auto。
scrollbar-3d-light-color用来设置立体滚动条亮边的颜色（设
置滚动条的颜色）
scrollbar-arrow-color用来设置上下按钮上三角箭头的颜色
scrollbar-base-color用来设置滚动条的基本颜色
• 文本域是最基本的表单对象，在文本域中， 网页程序可以获得用户输入的各种文本信 息，同时将将这些信息传送给服务器。文 本域可分为文本字段和文本区域。
2020/7/9
9
11.2.1 文本字段
• 文本字段是单行的文本域表单对象，也就 是说这些文本信息不会发生换行。
• 插入文本字段的具体操作如下。
2020/7/9
情况：
第一情况：使用“for”属性附加标签标记。
第二情况：选择“用标签标记环绕”选项。
2第020三/7/9 情况：选择“无标签标记”选项。
12
位置：说明“标签”内容所处的位置。分为两种情况：
第一种情况：选择“在表单项前”选项。上面的提示信息都是在表单项前。如图 11-6所示。
图11-6 插入文本字段 第二种情况：选择“在表单项后”选项。如图11-7所示。
第11章 网页表单的应用
• 11.1 网页中的表单知识
• 11.2 插入文本域
Hale Waihona Puke Baidu
• 11.3插入单选按钮和单选按钮组
• 11.4 插入复选框和复选框组
• 11.5 插入列表和菜单
• 11.6 插入按钮和文件域
• 11.7 验证表单内容
• 11.8 上机练习
• 小结
2020/7/9
1
11.1.2 创建表单域
禁用：文本框显示为灰色，不可以提交文本内容，而且其中的文本不可修 改，值为disable。 只读：文本框显示为正常颜色，可以白提交文本内容，而且其中的文本不 可修改，值为readonly。 单行：默认项，文本表单对象。 多行：将文本字段转化为文本区域。 密码：设置文本字段中文本为密码类型（显示为星号“*”）。
图11-7 插入文本字段
在“代码”视图中可以查看源代码：
访问键：访问该文本字段的快捷键。
Tab 键索引：在当前网页中的Tab键访问顺序。
2020/7/9
13
（4）经过上面设置后，其浏览效果，如图11-8所示。
图11-8 文本字段浏览效果
（5）设置或修改单行文本域的属性： 文本域：指定了<input>元素的名称和ID号。 字符宽度：指定文本域的长度，默认值为24个字符左右。 最多字符数：允许用户输入的最大字符数目。 初始值：为默认状态下填写在单行文本框中的文字。
2020/7/9
7
（8）类：定义表单及其中各种表单对象的样 式。
如果用户设置表单的方式为“默认”或 “get”，则该编码类型的设置是无效的。如 果设置表单的方法是“post”，则可以通过编 码类型确定数据是上传到服务器数据库中， 还是同时存储到服务器的磁盘中。
2020/7/9
8
11.2 插入文本域
10
（1）点击鼠标，将光标定位在表单虚线框线内，点击“插入”菜单， 选择“表单”项，在弹出的子菜单中选择“文本域”命令。或者在“插 入”面板中选择“表单”项，点击“文本字段”图标，则打开“输入标 签辅助功能属性”对话框，如图11-5所示。
图11-5 设置文本字段属性
2020/7/9
11
（2）在“输入标签辅助功能属性”对话框中，可
• 表单是各种网页表单对象的容器，主要包 括文本域、密码域、隐藏域、单选按钮、 复选框、弹出菜单、按钮等表单对象。
2020/7/9
4
用Dreamweaver CS5可以为网页插入表单，方法如下。
（1）在Dreamweaver CS5打开一个网页，最好能 先将此网页文档保存。
（2）在选择菜单“插入”→“表单”命令，或在 “插入”面板中选择“表单”按钮。为网页添加 一个表单。在“设计”视图中，可以看到表单以 红色虚线为标记。如果看不到红色虚线框，可选 择“查看”→ “可视化助理”→ “不可见元素” 命令。