第7篇 制作表单页面.ppt

Chapter 07制作表单页面 知识点： 关于表单 确定页面布局 添加表单域 添加文本域 添加复选框 添加单选按钮和单选按钮组 7.1关于表单 在申请E-mail邮箱时，往往会要求填写一些个人信息，如姓名、年龄、联系方式等，如图7.1所示。 下面，练习如何创建一个留言板的表单页面，如图7.2所示。 7.1关于表单 要制作这样的表单页面，一般要经过以下两个步骤。 (1)确定页面布局。也就是要用表格规划好表单元素的放置位置。 (2)插入表单元素。表单元素中最重要的就是表单域，它可以用来确定表单中有效数据的范围。 7.2确定页面布局 (1)插入一个13行2列的表格，利用它来控制各种表单元素和说明文字的位置，插入表格的属性如图7.3所示。 (2)合并表格中的第1、12、13行的单元格，并且给第1行和第12行分别加上背景颜色。将光标放在左侧任意单元格中，设置单元格的宽度为100像素，此时的表格如图7.4所示。 7.2确定页面布局 7.2确定页面布局 在单元格中分别输入文字，此时的页面如图7.5所示。 7.3添加表单域 插入表单域的具体操作步骤如下。 (1)将“插入”工具栏切换到“表单”插入工具栏，如图7.6所示。 (2)在其中单击“表单”按钮 ，此时在页面中就会出现一个红色的虚线框，如图7.7. 7.3添加表单域 单击红色虚线框的内部，此时“属性”面板显示的是表单域的属性，如图7.8所示。 ?表单名称 用来填入表单的名称，该名称在需要引用表单对象时才会用到。 ?动作 这些属性中最重要的一项，它用来定义处理数据的应用程序的路径。 ? 7.3添加表单域 ?方法 用来选择表单提交的方法。其中，POST方式表示表单信息将以数据包的形式提交；而GET方式会将浏览者提供的信息附加在URL地址的后面提交到服务器。 ?目标 用来设定提交表单后，打开的目标网页将以哪种形式进行显示。 ?MIME类型 用来指定对提交给服务器进行处理的数据使用的MIME编码类型。 7.3添加表单域 由于所有的表单元素都必须位于表单域中，因此需要将表格移动到红色的虚线框中。 (1)选中表格，按快捷键Ctrl+X将它剪切到剪贴板。 (2)单击红框内部，当“属性”面板显示表单的属性时表示已经选中了表单，此时再按快捷键Ctrl+V将表格粘贴在表单内，如图7.9所示。 7.4添加文本域 添加单行文本框的具体操作步骤如下。 (1)将光标放在要添加单行文本框的单元格中，然后在“表单”插入工具栏中单击“文本字段”按钮 ，此时将在此单元格中出现一个单行的文本框，如图7.10所示。 (2)选中该文本框，在“属性”面板上修改文本框的属性。 7.4添加文本域 课堂练习7.1 添加“姓名”文本框 下面在表格中“姓名”右侧的单元格内添加一个单行文本框，用来输入浏览者的姓名。 (1)将光标放在该单元格中，然后在“表单”插入工具栏中单击“文本字段”按钮，如图7.11所示。 (2)此时将弹出“输入标签辅助功能属性”对话框，在其中设定ID为username，“标签文字”为“姓名”，选择样式为“使用‘for’属性附加标签标记”，如图7.12所示。 7.4添加文本域 7.4添加文本域 (3)单击“确定”按钮后，在此单元格中将出现一个单行文本框，文本框左侧出现标签文字“姓名”。 (4)保存文件并用快捷键F12预览网页，当在标签文字“姓名”上单击时，光标将自动插入单行文本框内。该文本框对应的HTML代码如图7.13所示。 7.4添加文本域 (5)我们希望将标签文本放在左侧的单元格内，因此这里将右侧的标签文字“姓名”删除掉，文本框显示为如图7.14所示。 (6)选中该文本框，就可以在“属性”面板上修改文本框的属性了。 按照同样的方式，就可以在“电子邮件”后面插入一个单行文本框，它的属性如图7.15所示。再在“住址”后面插入一个单行文本框，它的属性如图7.16所示。 7.4添加文本域 7.4添加文本域 课堂练习7.2 添加“密码”文本框 (1)选中上面创建的“姓名”文本框，然后用快捷键Ctrl+C复制，再选中“密码”后的单元格并按快捷键Ctrl+V粘贴，此时将在该单元格内出现一个文本框。 (2)选中该文本框，然后在“属性”面板上将其名称修改为password，将“字符宽度”设为12，“最多字符数”设为15，“初始值”设为123456，并将文本框的类型设为“密码”，如图7.17所示。 7.4添加文本域 (3)此时该文本框就变成了密码文本框，其中的默认值以“*”号的形式显示。 (4)再次复制新创建的密码文本框，然后将其粘贴到“确认密码”后的单元格内。 (5)选中复制得到的密码文本框，修改“属性”面板如图7.18所示。 7.4添加文本域 7.4添加文本域 添加文本区域的具体操作步骤如下。 (1)选中要添