任务8 制作学生问卷调查表单.pptx

任务描述任务8制作学生问卷调查表单

HTML表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息，它是Web前端实现人机交互必不可少的元素。本任务制作一个学生问卷调查表单，在表单中输入学生相关的一系列信息，并使用CSS设置表单样式。通过本任务的实现，掌握表单的创建和样式设置方法，能轻松制作网页中类似的表单。

任务效果制作学生问卷调查表单，浏览效果如图8-1所示图8-1学生问卷调查表单

（1）定义表单域。（2）使用表单控件定义各输入控件。（3）使用input标记的按钮属性定义提交和重置按钮。（4）通过CSS整体设置表单样式。任务效果要求如下。

知识点认识表单01表单标记02表单控件03使用CSS设置表单样式04

知识准备任务8制作学生问卷调查表单

8.2.1认识表单内容引入表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。

8.2.1认识表单表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应用程序会对这些信息进行处理并响应，这样就完成了浏览者和网站服务器之间的交互。HTML5新增了很多表单控件，完善了表单的功能，新特性提供了更好的用户体验和输入控制。

8.2.1认识表单表单域（form标记）：form标记是一个包含框，是包含表单控件的容器。表单控件（input标记等）：用于输入用户信息的控件，如文本框、密码框、单选按钮、复选框和按钮等。表单的构成提示信息：表单控件周围用于提示输入内容的文字。

8.2.1认识表单

8.2.2表单标记表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域输入信息。表单使用的form标记是成对出现的，在开始标记form和结束标记/form之间的部分就是一个表单。可以使用form标记在网页中创建表单。

8.2.2表单标记表单的基本语法form标记主要用于处理和传送表单结果，其常用属性的含义如下。

给定表单名称，以区分同一个页面中的多个表单。8.2.2表单标记1.name属性

指定处理表单信息的服务器端URL地址。8.2.2表单标记2.action属性

用于设置表单数据的提交方式，其取值为get或post。其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，使用method=post可以大量提交数据。8.2.2表单标记3.method属性

用于指定表单是否有自动完成功能。所谓“自动完成”，是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表中，以实现自动完成输入。该属性的取值有on和off，当为on时，表示有自动完成功能，否则没有。该属性是HTML5的新增属性。8.2.2表单标记4.autocomplete属性

指定在提交表单时，取消对表单进行有效性检查。为表单设置该属性时，可以关闭整个表单的验证。该属性的取值有true和false，当为true时，表示取消表单验证。该属性是HTML5新增属性。8.2.2表单标记5.novalidate属性form标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在form与/form之间添加相应的表单控件。

8.2.3表单控件表单中通常包含一个或多个表单控件。在用户登录表单中包括两个文本框和两个命令按钮控件。

表单中最为核心的是input标记，使用input标记可以定义很多控件，譬如，文本框、单选按钮、复选框、提交按钮、重置按钮等等。8.2.3表单控件格式：inputtype=控件类型/input控件

8.2.3表单控件input/标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。input控件

8.2.3表单控件需要注意的是，在HTML5提供了不同输入类型的输入框，比如email、url等在提交时，自动验证输入的内容是否符合要求，不符合要求时会有错误提示。input控件

8.2.3表单控件除了type属性之外，input标记还可以定义很多其他的属性。input控件

8.2.3表单控件内容引入当需要输入大量信息时，就需要使用textarea文本域控件。

当定义input控件的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，且字数没有限制，就需要使用textarea和/textarea标记。例如，输入个人简历时的控件就是textarea控件。8.2.3表单控件格式：textareacols=每行中的字符数rows=显示的行数文本内容