任务8 制作学生信息注册表单教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务8 制作学生信息注册表单 Web前端开发案例教程 HTML5+CSS3 微课版 HTML表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息，它是Web前端实现人机交互必不可少的元素。本任务制作一个学生信息注册表单，在表单中输入学生相关的一系列信息，并使用CSS设置表单样式。通过本任务的实现，掌握表单的创建和样式设置方法，能轻松制作网页中类似的表单。 任务导学 任务3 制作学生信息注册表单 任务8 任 务 描 述 任务效果 制作学生信息注册表单，浏览效果如图8-1所示 图8-1 学生信息注册表单 知识点 认识表单 01 表单标记 02 表单控件 03 使用CSS设置表单样式 04 任务3 制作学生信息注册表单 任务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 表单控件 格式：<input type="控件类型" /> <input>控件 8.2.3 表单控件 <input />标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。 <input>控件 8.2.3 表单控件 需要注意的是，在HTML5提供了不同输入类型的输入框，比如email、url等在提交时，自动验证输入的内容是否符合要求，不符合要求时会有错误提示。 <input>控件 8.2.3 表单控件 除了type属性之外，<input>标记还可以定义很多其他的属性。 <input>控件 8.2.3 表单控件 例8-1 创建调查问卷表单，介绍典型的<input>控件的使用 <input>控件 8.2.3 表单控件 单行文本输入框使用时，可以使用value属性设置文本框中的默认值，也可以使用placeholder属性。 同一组单选按钮需要设置相同的name属性。checked属性表示单选