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

任

务

描

述任务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="显示的行数">

文本内容

</textarea><textarea>控件8.2.3表单控件在<textarea>的语法格式中，cols和rows为<textarea>标记的必需属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。<textarea>控件8.2.3表单控件各浏览器对cols和rows属性的理解不同，当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中，更常用的方法是使用CSS的width和height属性来定义多行文本输入框的宽、高。<textarea>控件<textarea>控件常用属性。8.2.3表单控件<textarea>控件8.2.3表单控件例8-2使用<textarea>控件在前面调查问卷的后面添加多行文本框。<textarea>控件使用<textarea>控件在前面调查问卷的后面添加多行文本框，并设置了“autofocus”属性，表示会自动获取焦点，设置了“required”属性，表示该项不能为空。内容引入select控件提供下拉列表选项，供用户选择。8.2.3表单控件下拉列表通过select标记和option标记来定义。格式：<select> <optionvalue="1">第一个选项</option> <optionvalue="2">第二个选项</option>

<optionvalue="3">第三个选项</option>

</select>8.2.3表单控件<select>控件

<select>和</select>标记用于在表单中添加一个下拉菜单。<option>和</option>用于定义下拉菜单中的具体选项。每对<select>和</select>中至少应包含一对<option>和</option>。8.2.3表单控件<select>控件

可以为<select>和<option>标记定义属性，以改变下拉菜单的外观显示效果，常用属性如表所示。8.2.3表单控件<select>控件

8.2.3表单控件<select>控件

例8-3介绍<select>控件的使用。在项目chapter08中新建网页文件example03.html8.2.3表单控件<select>控件

浏览网页，效果如图所示。创建用户登录表单，使用CSS设置表单样式8.2.4使用CSS设置表单样式内容引入8.2.4使用CSS设置表单样式表单的构成输入用户名和密码的文本框中使用了属性pattern，设置正则表达式，验证输入的规则。在每对<p>标记中添加相应的表单控件，分别用于定义单行文本框、密码输入框和普通按钮。左边的提示信息放入<span>标记中，以便于设置文字的右对齐。8.2.4使用CSS设置表单样式例8-4创建用户登录表单，使用CSS设置表单样式。login.html。8.2.4使用CSS设置表单样式此时浏览网页，效果如图所示。8.2.4使用CSS设置表单样式添加表单样式关键代码8.2.4使用CSS设置表单样式8.2.4使用CSS设置表单样式在使用CSS控制表单样式时，需要注意以下几个问题：（1）由于form是块元素，所以重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。（2）input控件默认有边框效果，当使用<input>标记定义各种按钮时，通常需要清除其边框。（3）通常情况下，需要对文本框和密码框设置2～3px的内边距，以使用户输入的内容不会紧贴输入框。任

务

实

现任务8制作学生问卷调查表单本节使用前面所学的表单知识构建学生问卷调查表单，并使用CSS设置表单样式。任务实现内容引入任务实现分析页面结构该页面的所有内容包含在最外层的大盒子中，大盒子添加了背景图像，表单每行左边的提示信息和右边的表单控件及提示信息放入<