北希望《HTML5网页设计与制作》教学资源 资料包 PPT课件 08.pptxVIP

第8章 使用表单 第8章 使用表单 网页不仅向用户传达信息，还能与用户对话，对话的过程主要是通过表单实现，良好的表单设计能够帮助用户进行良好的沟通。表单主要包含表单域、输入框、下拉框、单选框、多选框和按钮等元素，每个元素在表单中的作用也各不相同，而且每个元素在浏览器呈现时具备不同的特殊性。了解不同表单元素在浏览器中所具备的特殊性，以及CSS样式对其所能控制的范围，就能明白如何利用合适的表单元素，以及如何利用CSS样式美化表单元素。 学习要点 01 02 03 学习要点 ●了解与表单相关的标签，以及这些标签的使用 ●了解CSS定义表单样式的常用属性 ●理解CSS设计表单样式的一般技巧 训练要点 ●能够使用HTML标签快速制作表单结构 要点 ●能够使用CSS设计表单样式 ●能够根据网页设计风格灵活使用各种技巧设计表单样式 8.1 设计表单结构 一个完整的表单结构应该由下面三部分组成。 8.1.1 定义表单框 ●表单框架（form标签）：form标签是一个包含框，里面包含所有表单元素，通过浏览器看不到任何效果。 ●表单域（input、select等标签）：用于采集用户的输入或选择的数据。 ●表单按钮（input、button标签）：用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用来控制其他定义了处理脚本的按钮所进行的工作，包含提交按钮、复位按钮和一般按钮。 8.1 设计表单结构 启动 Dreamweaver，新建一个网页，保存为 test.html，在 body内使用 form标签，包含一个input标签和一个提交按钮，并借助p标签把按钮和文本框分行显示。 8.1.1 定义表单框 【随堂练习】 在IE浏览器中预览演示效果，如图8-1所示。 图8-1 表单的基本效果 8.1 设计表单结构 input标签可以定义多种形式的输入框，包括单行文本输入框、密码输入框、隐藏输入、文件上传组件、单选按钮、提交按钮、重置按钮以及图像按钮等。input标签基本方式如下所示。 8.1.2 定义输入域 与img标签一样，它是一个自结束行内元素， input标签中 type属性决定了输入域的具体选项，如果没有设置type属性或者没有type属性值，按照单行文本框处理。 8.1 设计表单结构 新建一个网页，保存为test.html，在body内使用form标签，包含三个input标签，分别使用三种书写方式定义文本输入框，代码如下所示。 8.1.2 定义输入域 【随堂练习】 在IE浏览器中预览，演示效果如图 8-2所示。虽然结果是一致的，但是为保持良好的代码书写习惯，应遵循HTML标准，按照第三种方式书写文本输入框。 图8-2 单行文本框input标签 8.1 设计表单结构 将input标签的type属性设置为password，文本域将成为密码输入框，可以将其输入的字符以星号或圆点显示，达到加密的作用，这种加密方式安全性比较差，可以通过其他方式将密码进行加密。密码输入框主要作用是在输入密码时防止别人偷看。日常生活中，自动取款机的密码输入框用到的就是这个控件，可以有效地防止密码被人偷窥。 新建一个网页，保存为test.html，在body标签内输入如下代码。 8.1.2 定义输入域 【拓展练习1】 8.1 设计表单结构 隐藏域“ type=hidden”就是在网页中看不到的信息，当提交表单时，它包含的一些数据也将提供给服务器。注意，隐藏域只包含一个value属性，使用该属性可以传递各种固定参数到服务器，如统计用户访问IP，确定用户的来源等。 8.1.2 定义输入域 【拓展练习2】 8.1 设计表单结构 文件上传（type=file）可以将本地的某个文件以二进制数据流的形式传递至服务器。例如，QQ的“本地中转站”可以单次上传1GB大小的文件，存储在腾讯的服务器上； 163邮箱发送邮件时可以发送上传的附件，代码如下所示。 8.1.2 定义输入域 【拓展练习3】 在浏览器中预览演示效果，如图8-3所示。 图8-3 文件上传组件 8.1 设计表单结构 例如，在下面的示例中，为客户提供留言输入框，定义了输入的字符宽度和显示的行数，并分别使用了readonly、disabled属性，比较它们的不同，代码如下所示。 8.1.2 定义输入域 【拓展练习4】 8-4 多行文本框分别设置readonly和disabled属性显示效果 在浏览器中预览演示效果，如图8-4所示。 8.1 设计表单结构 单选按钮（input type=radio）实际是一个圆形的选择框。当选中单选按钮时，圆形按钮的中心会出现一个点，相当于圆点。多个单选按钮可以合并为一个单选按钮组，单选按钮组中的name值必须相同，如name=RadioGroup1，即单选