公开课教案 表单

公开课教案  表单
公开课教案  表单

第10章表单

新课导语:在上一次课里,我们共同学习了CSS样式,通过学习我们知道了CSS样式在专业的网页制作过程中应用非常广泛,是不是只有CSS样式在网页制作过程中应用广泛呢!不是的,今天我们就再共同学习一个在网页制作过程中应用非常广泛的元素。在学习这个网页元素之前,让我们共同看三张图片。

提问:通过这三张图片,同学们看到了什么共同点?

答案:都有文本框,这就是我们本次课要学习的新的网页元素——表单。

板书:10 表单(居中)

讲解:本章的学习目标有3点:

1、熟练掌握创建表单和插入文本域的方法

2、掌握复选框和单选按钮的应用技巧

3、掌握列表和菜单的创建方法和技巧

讲解:本次课的学习目标是熟练掌握创建表单和插入文本域的方法,下面我们就来学习:使用表单。

讲解:10.1 使用表单

板书:10.1 使用表单

讲解:什么是表单呢,我们先看看表单的定义。教材上没有将表单的定义特别明确化,但是我们可以根据教材提供的知识,这样定义表单。

板书:1、表单的定义

表单的定义:一个容器,用来存放表单对象,并负责将表单对象的值提交给服务器端的某个程序处理。

在这个定义当中,我们应该注意这两个要点:1)表单是容器,2)表单是用来存放表单对象的。

表单的定义我们知道了,那么如何使用表单呢,首先就需要先建立表单

板书:10.1.1 创建表单

讲解:如何创建表单呢?大家请看大屏幕。

10.1.1创建表单

在文档中插入表单的具体操作步骤如下。

(1)在文档窗口中,将插入点放在希望插入表单的位置。

(2)启用“表单”命令,文档窗口中出现一个红色的虚轮廓线用来指示表单域。

表单创建分为两种方法:

1、单击“插入”面板“表单”选项卡中的“文本字段”按钮,在文档窗口的表单中出现一个单行文本域。

2、选择“插入>表单>文本域”命令,在文档窗口的表单中出现一个单行文本域。

操作:网页制作系统,建立两个空白网页,分别采用以上两种方法在上面插入表单。

讲解:通过对网页制作的学习,我们知道网页中插入的任何元素,都需要对其进行属性的设置。那么表单包括哪些属性呢?属性的作用分别是什么呢?我们来学习——表单的属性。

板书:10.1.2 表单的属性

10.1.2表单的属性

在文档窗口中选择表单,“属性”面板就会变成表单属性面板。

表单“属性”面板中一共包括6项属性,各项属性的作用如下:

1、“表单ID”选项:是

标记的name参数,用于标记表单的名称。

穿插知识:form是html语言中标记表单的标签,html语言是超文本描述语言,具体的作用是构建网页的框架。这个知识点,我们在以往的讲课过程中,多次强调,再次不再讲解。

提问:ID在哪个网页元素出现过呢?

答案:网页元素——表格中出现过,作用是区别文档中插入的不同表格。

讲解:为什么表单要有ID(identification)呢,同样的道理。当表单提交数据给服务器时,服务器要知道是哪个表单提供的数据,这时ID就成了服务器辨别不同表单的唯一要素。

操作:在第一个新建的空白文档中,再次插入一个表单。对比两个表单的ID名称的不同,在代码视图下和设计视图下观看ID。

2、“动作”选项:是标记的action参数,用于设置处理表单数据的动态网页路径。

讲解:表单的数据要传送到一个动态的网页上进行处理,action参数就是来定义该动态网页的路径的。

3、“方法”选项:是标记的method参数,用于设置将表单数据传输到服务器的方法。

讲解:方法有两种,分别是:post和get方法,两种方法的不同之处就是传输的数据字符数不同。Post方法支持长字符,Get方法支持短字符,但是post 方法保密性差,传输过程中能够被黑客截取,所以传输保密泄漏数据的

4、“编码类型”选项:是标记的enctype参数,用于设置对提交给服务器的数据使用的MIME编码类型。

5、“目标”选项:是标记的target参数,用于设置一个窗口,在该窗口中显示处理表单后返回的数据。

目标值有以下几种:

◆“blank”

◆“parent”

◆“self”

◆“top”

◆“new”

目标值_new在教材中没有提出,但是属性面板“目标”选项中有这样的一个值,所以在这里,我们也把这个值的意义给同学们讲解一下。

6、“类”选项:表示当前表单的样式。

10.1.3文本域

通常使用表单的文本域来接收用户输入的信息,文本域包括单行文本域、多行文本域、密码文本域3种。一般情况下,当用户输入较少的信息时,使用单行文本域接收;当用户输入较多的信息时,使用多行文本域接收;当用户输入密码等保密信息时,使用密码文本域接收。

1.插入单行文本域

2.插入多行文本域

3.插入密码文本域

4.文本域属性

10.1.3.1 插入单行文本域

插入单行文本域有以下方法:

◆单击“插入”面板“表单”选项卡中的“文字字段”按钮,在文档窗口

的表单中出现一个单行文本域。

◆选择“插入>表单>文本域”命令,在文档窗口的表单中出现一个单行

文本域。

在“属性”面板中显示单行文本域的属性,可以根据需要设置该单行文本域的各项属性。

10.1.3.2 插入多行文本域

插入多行文本域有以下方法:

◆单击“插入”面板“表单”选项卡中的“文本区域”按钮,在文档窗口的

表单中出现一个多行文本域。

◆选择“插入>表单>文本区域”命令,在文档窗口的表单中出现一个多行

文本域。

在“属性”面板中显示多行文本域的属性,可以根据需要设置该多行文本域的各项属性。

10.1.3.3 插入密码文本域

插入密码文本域有以下方法:

◆单击“插入”面板“表单”选项卡中的“文本字段”按钮或“文本区域”

按钮,在文档窗口的表单中出现一个单行或多行文本域。

◆选择“插入>表单>文本域”或“文本区域”命令,在文档窗口的表单中

出现一个单行或多行文本域。

在“属性”面板的“类型”选项组中选择“密码”单选项。此时,单行或多行文本域就变成密码文本域。

10.1.3.4 文本域属性

选中表单中的文本域,“属性”面板中出现该文本域的属性,当插入的是单行文本域或多行文本域时,“属性”面板如下所示:

文本域“属性”面板各选项如下:

1、“文本域”选项

2、“字符宽度”选项

3、“最多字符数”选项

4、“类型”选项组

5、“单行”选项

6、“多行”选项

7、“密码”选项

8、“行数”选项

9、“初始值”选项

10、“类”选项

10.1.4 隐藏域

隐藏域在网页中不显示,只是将一些必要的信息存储并提交给服务器。

插入隐藏域胡方法如下:

单击“插入”面板“表单”选项卡中的“隐藏域”按钮,在文档窗口的表单中出现一个隐藏域。

选择“插入>表单>隐藏域”命令,在文档的表单中出现一个隐藏域。

相关主题
相关文档
最新文档