W3C标准网页制作 主讲教师：张 涛
第11讲、建立表单页面 11.1.什么是表单 11.2.表单标记<FORM> 11.3.输入标记<INPUT> 11.4.其他标记
11.1.什么是表单 HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 浏览网站时经常会遇到表单，它是网站实现互动功能的重要组成部分。无论网站使用的是哪种形式的语言来实现网站的互动功能，例如ASP，PHP，JSP，表单已经成为它们统一的外在形式。 表单的主要功能是收集信息，具体说是收集浏览者的信息。例如在网上要申请一个电子邮箱，就必须按要求填写完成网站提供的表单网页，其内容主要是姓名、年龄、联系方式等个人信息。又例如要在某论坛上发言，发言之前要申请资格，也是要先填写完成一个表单网页。 表单可以用于调查、定购、搜索等功能。一般的表单由两部分组成，一是描述表单元素的HTML源代码，二是客户端的脚本，或者服务器端用来处理用户所填信息的程序。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。 表单信息的处理过程为：当单击表单中的提交按钮时：输入在表单中的信息就会上传到服务器中，然后由服务器的有关应用程序进行处理，处理后或者将用户提交的信息储存在服务器端的数据库中，或者将有关的信息返回到客户端浏览器上。
11.2.表单标记<FORM> 表单是网页上的一个特定区域。这个区域是由一对<FORM>标记定义的。这一步有几个方面的作用。第一方面，限定表单的范围。其他的表单对象，都要插入到表单之中。单击提交按钮时，提交的也是表单范围之内的内容。第二方面，携带表单的相关信息，例如处理表单的脚本程序的位置、提交表单的方法等。这些信息对于浏览者是不可见的，但对于处理表单却有着决定性的作用。 基本语法<FORM name=“form_name” method=“method” action=“URL” target=“target_win”> …… </form> 语法解释 <FORM>标记的属性如表11-1所示。
11.2.1 <FORM>标记的NAME属性 基本语法 <FORM name=“form_name”> …… </form> 语法解释 通过为表单命名可以控制表单与后台程序之间的关系。 文件范例：11-1.htm 在页面中插入表单。 <!-- ------------------------------------------ --> <!-- 文件范例：11-1.htm --> <!-- 文件说明：插入表单 --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>插入表单</TITLE> </HEAD> <BODY> <H1>用户调查</H1> <FORM NAME=invest> </FORM> </BODY> </HTML> 文件说明 第11行是表单标记，表单的名称为“invest”。
11.2.2 <FORM>标记的ACTION属性 基本语法 FORM action=“URL”> …… </form> 语法解释 在ACTION属性中定义表单提交的地址。 文件范例：11-2.htm 设置表单的提交地址。 <!-- ------------------------------------------ --> <!-- 文件范例：11-2.htm --> <!-- 文件说明：设置表单提交地址 --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设置表单提交地址</TITLE> </HEAD> <BODY> <H1>用户调查</H1> <FORM NAME=invest action=mailto:songsong@51vc.com> </FORM> </BODY> </HTML> 文件说明 第11行是表单标记，表单的名称为“invest”，将表单内容以电子邮件的方式传送。
11.2.3 <FORM>标记的METHOD属性 基本语法 <FORM method=“method”> …… </form> 语法解释 METHOD属性中，GET方法是将表单内容附加在URL地址后面，所以对提交信息的长度进行了限制，不可以超过8192个字符。如果信息太长，将被截去，从而导致意想不到的处理结果。同时GET方法不具有保密性，不适合处理如信用卡卡号等要求保密的内容，而且不能传送非ASCII码的字符。POST方法是将用户在表单中填写的数据包含在表单的主体中，一起传送到服务器上的处理程序中，该方法没有字符的限制，它包含了ISO10646的字符集，是一种邮寄的方式，在浏览器的地址栏不显示提交的信息，这种方式传送的数据是没有限制的。当不指明是哪种方式时，默认为GET方式。 如下代码，就是以GET方式提交到songsong@51vc.com邮件地址的表单写法： <FORM name=“guestbook” method =“GET” action=“mailto: songsong@51vc.com”> …… </form>
11.2.3 <FORM>标记的METHOD属性 文件范例：11-3.htm 设置表单的提交方式。 <!-- ------------------------------------------ --> <!-- 文件范例：11-3.htm --> <!-- 文件说明：设置表单提交方式 --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设置表单提交方式</TITLE> </HEAD> <BODY> <H1>用户调查</H1> <FORM NAME=invest action=mailto:songsong@51vc.com method=get> </FORM> </BODY> </HTML> 文件说明 第11行是表单标记，表单的名称为“invest”，将表单内容以电子邮件的方式传送，并使用GET传输方式。
11.2.4 <FORM>标记的TARGET属性 基本语法 <FORM target=“target_win”> …… </form> 语法解释 TARGET的取值如表11-3所示。 文件范例：11-4.htm 设置表单信息返回的窗口。 <!-- ------------------------------------------ --> <!-- 文件范例：11-5.htm --> <!-- 文件说明：设置表单信息返回的窗口 -->
11.2.4 <FORM>标记的TARGET属性 <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设置表单信息返回的窗口</TITLE> </HEAD> <BODY> <H1>用户调查</H1> <FORM NAME=invest action=mailto:songsong@51vc.com method=get target=_blank> </FORM> </BODY> </HTML> 文件说明 第11行是表单标记，表单的名称为“invest”，将表单内容以电子邮件的方式传送，并使用GET传输方式，以纯文本的形式传送信息。如果有信息返回时，将以新开浏览器窗口的形式显示信息。 在<FORM>标记中，可以包含4个标记，如表11-4所示。
11.2.4 <FORM>标记的TARGET属性 如下代码： <FORM> <input>……</input> <textarea>……</textarea> <Select> <option>……</option> </select> </form> 各种表单域基本可以满足网站收集信息的要求。如果要求浏览者输入文字信息，
11.2.4 <FORM>标记的TARGET属性 如姓名、留言等，可以使用文本字段。如果要求浏览者在固定的范围内进行选择，可以选择单选按钮或者多选按钮，在实际应用中性别、籍贯、爱好常常采用这种方法。有时还会有让浏览者提交文件的需求，可以使用文件域，例如某游戏选拔女主人公原型，要求申请者提交照片等。 下面就来分别介绍这些标记的使用。
11.3.输入标记<INPUT> 输入标记<INPUT>是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。 基本语法 <Form> <input name=“field_name” type=“type_name”> </form> 语法解释 <INPUT>标记的属性如表11-5所示。 在TYPE属性中，可以包含表11-6所示的属性值。
11.3.输入标记<INPUT>
11.4.其他标记 11.4.1 单和列表标记<SELECT>，<OPTION> 假设现在要在表单中添加这样一项内容：浏览者所在的城市。这里不说全国的城市，只说省会以上的城市，就有几十个。如果以上面讲过的单选按钮的形式，将这些城市全部罗在网页上，将是一件不堪设想的事情。于是，在表单的对象中出现了菜单和列表。说到底，菜单和列表主要是为了节省网页的空间而产生的。 菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。 列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可通过拖动滚动条来观看各选项。 通过<SELECT>和<OPTION>标记可以设计页面中的菜单和列表效果。 基本语法 01 <Select name=“name” size=value Multiple> 02 <option value=“value” Selected>选项 03 <option value=“value>选项 04 …… 05 </Select> 语法解释 这些属性的含义如表11-9所示。
11.4.其他标记 11.4.2 文字域标记<TEXTAREA> 这个标记用来制作多行的文字域，可以在其中输入更多的文本。 基本语法 <textarea NAME=“name” Rows=value Cols=Value Value=“value”> </textarea> 语法解释 这些属性的含义如表11-10所示。 基本语法 <HTML> <HEAD> <TITLE>插入文字域</TITLE> </HEAD> <BODY> <H1>用户调查</H1> <FORM ACTION=mailto:songsong@51vc.com METHOD=get NAME=invest> 请留言：<BR> <TEXTAREA NAME=“comment” Rows=5 Cols=40> </TEXTAREA><BR> <INPUT TYPE=“Submit” NAME=“Submit” VALUE=“提交表单”> </FORM> </BODY> </HTML>
谢谢!