《计算机网络基础》单元6_任务5.pptx

任务5使用表单单元6设计制作网页

任务5使用表单任务背景知识准备任务实施知识拓展任务拓展讨论与学习巩固与提高习题

小明的推介型网站想做一个用户调查，他查了查HTML词典，发现用表单标记FORM就可以完美实现这个功能。

任务5使用表单任务背景知识准备任务实施知识拓展任务拓展讨论与学习巩固与提高习题

表单及其基本组成表单标记表单域知识准备

表单及其基本组成表单是网页中向用户提供的一种交互式操作界面，它的主要作用是进行数据的采集，并将收集的信息提交到服务器。在这个表单中，仅仅包含一些简单的文字、一个列表框和两个文本框，另外还有一个“进入”按钮。当浏览者在文本框中填写数据后单击“进入”按钮，则填写的内容将被传送到服务器，由服务器进行具体的处理，然后确定下一步的操作。

表单及其基本组成表单表单标记表单域表单处理程序的URL数据提交给服务器的传送方式采集数据的各类控件按钮类的控件

表单标记语法：formaction=表单处理程序的URL地址method=数据传送方式name=表单名称target=提交的结果文档显示位置…/form指定将表单数据提交给服务器的传送方式。get方式（默认）：提交的数据量有限制，保密性差。post方式：传送大容量数据或需要保密的信息。method属性指定表单提交的结果文档显示的位置，使用方法与超链接标记中的target属性相同。target属性指定表单要提交的地址，通常为一个网页的URL地址，还可以是电子邮件地址。action属性指定表单的名称name属性

表单域1.input控件标记语法：inputtype=输入类控件类型type属性指定输入类控件的类型，详见下表。属性属性值描述typetext定义单行文本框password定义密码框radio定义单选按钮checkbox定义复选框submit定义提交按钮reset定义重置按钮button定义普通按钮file定义文件域name用户自定义指定控件的名称value用户自定义指定控件提交的值；若控件为提交、重置或普通按钮时，用于设置显示在按钮上的文本maxlength正整数指定单行文本框和密码框允许输入的最多字符数size正整数指定单行文本框和密码框在页面中显示的宽度checked指定单选按钮和复选框的初始状态为选中

表单域（1）文本框和密码框如果需要浏览者输入单行文本（如输入姓名、年龄等信息），则应在表单中使用单行文本框。单行文本框应使用input标记符创建，将type属性指定为text即可。实际上，由于input标记符type属性的默认值就是text，所以可以直接用input标记符创建单行文本框。name属性指定了控件的名称value属性指定了控件的初始值，这两个属性的取值都是服务器端程序处理表单数据时需要使用的size属性指定了文本框的宽度maxlength属性指定了在文本框中可以输入的最长文本数placeholder属性指定了帮助用户填写输入字段的提示如果需要隐藏用户在文本框中输入的内容（如密码），那么应使用密码框。密码框与单行文本框类似，但在其中输入的所有文本显示出来的都是圆点或星号。

表单域例如，以下HTML代码显示了单行文本框和密码框的用法（也包含表单中必须有的提交按钮），显示效果如图

表单域

表单域（2）复选框与单选框复选框与单选框（也叫单选按钮）都是允许用户进行选择的控件，分别用于选择多种选项（如兴趣爱好）和选择互斥的选项（如性别）。创建复选框与单选框也使用input标记符，语法分别如下：type属性为checkbox，说明该控件是一个复选框，type属性为radio，说明该控件是一个单选框；name属性和value属性的值都是程序处理表单数据时需要的；checked属性是可选的，它告诉浏览器是否在第一次显示表单时将这个复选框或单选框显示为“被选中状态”。

表单域例如，以下HTML代码显示了如何在表单中包含多个复选框和单选框。

表单域

表单域（3）按钮当用户完成表单的填写后，如果需要提交数据，则可以单击表单中的提交按钮（通常按钮上的文字为“提交”“同意”“进入”或“Submit”等）；如果希望恢复表单为填写前的状态，以便重新填写，则可以单击表单中的重置按钮（通常按钮上的文字为“重置”“重新填写”或“Reset”等）。另外，还可以在表单中使用自定义按钮，以便响应特定的事件。创建提交按钮、重置按钮和自定义按钮的语法分别如下：

表单域type属性说明按钮的类型name属性的值用于程序引用此控件value属性的值用于指定显示在按钮上的文字（如果不指定，则使用浏览器的默认设置）。例如，以下HTML代码显示了如何在表单中包含各种按钮，效果如图5-15所示。

表单域

表