网页设计与制作基础（HTML5+CSS3）课件 第9章 表单设计.pptx

第9章

表单设计单击此处添加副标题

目录表单概述01表单元素02HTML5新增表单类型03表单应用04

9.1表单概述表单为访问者提供了填写信息的区域,从而可以收集客户信息，使网页具有交互功能。表单内的信息被提交到服务器后，服务器的脚本或应用程序（CGI脚本、ASP.NET,JSP,PHP等）能处理这些数据。表单的基本格式如下：formid=form1name=form1method=postaction=a.phpinput...textarea/textarea...selcet/select/form其中form/form为表单框架，里面可包含多个表单元素，例如输入域input，文本域textarea/textarea、下拉列表select/select等。

9.1表单概述form主要有以下几个参数：1.name和id:表单名称,定义了name和id后，脚本语言（Javascript）可以通过name属性获得表单，并对表单进行控制。2.methond：用于指定表单向服务器提交数据的方式，有两个选项值，get和post。由于get方式安全性较低，传送的数据量较少，因此一般使用post的方式，在dreamweaver中，默认的提交方式为post。3.action：用于指定处理表单数据的服务器端应用程序，该程序可以是CGI脚本、ASP.NET,JSP,PHP等脚本。例如本例中，该表单数据提交给a.php页面处理。

9.2表单元素9.2.1输入域inputinput标签可以定义多种形式的输入框，包括文本输入框，密码输入框，隐藏输入，文件上传，单选按钮和复选框。其格式为：forminputname=type=maxlength=value=/form其中，name和type是必选的两个属性，name属性的值是相应程序中的变量名，type是输入框的类型。

9.2.1输入域inputInput的type包括以下几种：（1）type=”text”:文本框，表示该输入项的输入信息是字符串。此时，浏览器会在相应的位置显示一个文本框供用户输入信息。（2）type=”password”:密码域，当用户在输入内容时，是用“*”来代替显示每个输入的字符，以保证密码的安全性。（3）type=radio：单选按钮，使用单选按钮时，一般有多个选项，这些选项应该设置成同一个名字，即采用单选按钮组的形式。（4）type=”checkbox”：复选框，可以同时选中多个。每个复选框都是独立的元素，且必须有不同的name属性值。和单选按钮radio一样，使用checked属性表示选中状态。（5）type=hidden：隐藏域，指的是在网页中不可见的一些信息，可以放到隐藏域里面。隐藏域只包含一个value属性值，使用该属性可以传递各种参数到服务器。

9.2.1输入域input（6）type=file:文件上传。可以将本地的某个文件以二进制数据流的形式上传至服务器。（7）type=“button”:表示按钮，有三种类型：type=”button”:普通按钮，可用于响应js事件type=”submit”:提交按钮，用于提交表单type=”reset”:重置按钮，用于重置表单数据

9.2.2文本区域textarea文本区域textarea是多行文本框，它允许用户输入多行内容，主要应用在留言板或者是聊天窗口中。其使用方法为单击插入-表单-文本区域，即可得插入一个文本区域。文本区域的具体属性包括以下几个：rows：设置文本区域可见的行数，如果实际输入超出了设置的值，将会以滚动条显示cols：设置文本区域可见的字符宽度。readonly：只读属性，用户不能修改文本域的内容，提交内容时会将此项内容提交到服务器。disable:设置该文本区域不可用，提交内容时不会将此项提交到服务器。

9.2.2文本区域textarea文本区域属性wrap：wrap：定义输入内容大于文本设定宽度时的显示方式，有三个值：默认值：文本自动换行，当输入值超过限定的宽度时，自动跳转到下一行；off:关闭自动换行，当输入值到达最右边界时，文本将向左滚动，必须使用return，才能让文本到下一行；virtule:允许自动换行，当输入到达最右边界时，会自动换行；

使用select和option组合，可以实现下拉列表框。具体方法为：单击插入-表单-选择，插入一个下拉列表，在属性窗口中，单击“列表值”，在弹出的“列表值”窗口中，输入项目标签和值，例如“浙江”，单击“+”，继续添加其他省份，单击确定。9.2.3下拉列表框select和option

域集fieldset元素可将表单内的相关元素分组，标签将表单内容的一部分打包，生成一组相关表单