第七章 网页表单应用 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（高等教育出版社）

网页设计与制作 第07章 网页表单应用 本章内容 关于表单 基本的表单控件 表单制作示例 2 网页设计与制作 7.1.1 什么是表单 1．表单（form） 表单（form）是网页中用来与用户进行交互的元素，如图所示： 可以包含文本框、单选按钮或复选框、下拉选择框、密码输入框以及文件上传控件等。 7.1 关于表单 3 网页设计与制作 7.1 关于表单 2．表单的实现 如代码ex7_1.html，将呈现如图的表单。 4 网页设计与制作 7.1 关于表单 7.1.2 表单的作用 表单的作用就是与用户进行交互，提供一个收集用户意见和资料的界面或途径，用户只有通过表单控件，可以方便地与服务器进行交互。 5 网页设计与制作 7.2 基本的表单的控件 7.2.1 表单标签介绍 1．表单的含义 表单是用来组织和包含表单元素（表单控件）的逻辑单元，一个表单可以包含若干表单元素，最常见的有：文本框、密码框、按钮、复选框、单选按钮、选择框等。在网页代码中，需要使用一对<form></form>标签来组装表单元素。 6 网页设计与制作 7.2基本的表单的控件 7 网页设计与制作 2．form标签 如代码ex7_2.html，将呈现如图的表单。 <body> <form action="" method="post"> 您的姓名：<input type="text" /><br/> 您的性别：<input type="radio" name="sex" />男 <input type="radio" name="sex" />女 </form> </body> 7.2基本的表单的控件 8 网页设计与制作 3．Dreamweaver中插入表单 按照以下三个步骤依次操作可以插入文本域 7.2基本的表单的控件 9 网页设计与制作 4．form标签的常见属性 7.2基本的表单的控件 10 网页设计与制作 7.2.2 控件的通用属性和事件 1．表单控件 表单中的元素可以称为表单控件，这些控件通常都是一个<input>标签。需要进行不同的输入操作可以使用不同类型的表单控件，比如文本控件、按钮控件、选择控件等。 7.2基本的表单的控件 11 网页设计与制作 2．常见的表单控件 7.2基本的表单的控件 12 网页设计与制作 3．表单控件的通用属性 7.2基本的表单的控件 13 网页设计与制作 4．表单控件的通用方法事件 7.2基本的表单的控件 14 网页设计与制作 7.2.3 文本控件 1.文本控件 文本控件是表单输入时最为常见的，主要用来输入用户名称、密码、用户留言等信息。 文本控件包括：单行文本域、密码框和多行文本区域 7.2基本的表单的控件 15 网页设计与制作 2.文本控件属性设置 在Dreamweaver中插入文本控件后，可以如下图的方式进行属性设置 7.2基本的表单的控件 16 网页设计与制作 3.用代码设置文本控件属性 单行文本框 用户名：<input type="text" name="username" /> 密码框 用户密码：<input type="password" name="pwd" /> 多行文本区域 留言内容：<textarea name="message" id="msg" cols="45" rows="5"></textarea> 7.2基本的表单的控件 17 网页设计与制作 7.2.4 选择控件 1.选择控件 选择控件不需要用户输入，用户直接在给定的选项中进行选择，可以实现单选、多选、下拉选择等。 选择控件包括：单选按钮、复选（检取）框和下拉选择框。 7.2基本的表单的控件 18 网页设计与制作 2.单选按钮 单选按钮用来在多个选项中选择一个，而且通常必须选择一个，如性别选择就是很典型的应用。 注意：如果一组选项只能选择其中一个时，必须将该组选项每个按钮的name 属性设置为相同，否则，单选操作将无法实现。 在一个表单中，可以通过设置不同的name属性来实现多组单选。 7.2基本的表单的控件 19 网页设计与制作 如下代码(ex7_3.html)可以实现单选 您的性别： <input type="radio" name="sex" id="sex" value="male" />男 <input type="radio" name="sex" id="sex2" value="female" />女<br /> 您的民族： <input name="nation" type="radio" id="mz" value="han" checked="checked" />汉 <input type="radio" name="nation" id="mz2" value="zang" />藏 <input type=