《HTML5+CSS3网页制作》课件——模块六 HTML5表单的应用.pptxVIP

模块六HTML5表单的应用任务1表单与input元素网页制作CSSHTML

知识准备——表单与input元素实战演练——制作“垃圾分类问卷调查”表单表单与input元素0201进阶训练——制作“快递单录入”表单03动手实践——制作“学生信息登记表”表单04

1.掌握form元素、label元素、input元素及属性2.了解表单验证表单与input元素学习目标：

1.培养责任意识与诚信，使其在互联网时代有保护个人信息的责任感，认识到输入验证不仅是技术需求，也是对用户负责的表现，避免虚假信息的传播，维护网络空间的健康秩序。2.培养公民素养与法治观念，引导其遵守网络法规，不滥用技术手段，合法合规地处理数据，3.培养创新精神，鼓励学生创造性地解决问题，设计更加人性化、高效的信息交互界面，体现创新思维。表单与input元素思政目标：

21知识准备—认识表单1知识准备--表单是网页的一个组成部分，其中包含有各种表单控件，如文本框、按钮、复选框、滑块或颜色选择器等。用户可以与这样的表单进行交互，提供数据，然后这些数据可以被发送到服务器进行进一步处理（例如，返回搜索结果或计算结果）。任何一个表单都始于一个form元素，其内部放置了各种控件。大多数控件由input元素表示，该元素默认提供了一个文本输入控件。为了给控件添加标签，可以使用label元素；标签文本和控件自身都被置于label元素内部。表单的每一部分被视为一个段落，通常使用p元素与其他部分相隔开。

21知识准备—认识表单1知识准备--案例6-1认识一个简单的表单，用于收集用户的用户名。form元素用于包裹所有的表单控件和相关元素；p元素用于将表单的各个部分分隔开来，包裹用户名的输入字段；label元素用于为表单控件提供描述性标签；input元素放在label元素的内部实现了input元素与label元素的关联，运行时单击label标签也能完成选中input元素。

21知识准备—创建表单1知识准备--1.form元素form元素用于创建表单，代表了一个可以通过一系列与之关联的表单元素进行操作的超链接，其中一些元素可以表示可编辑的值，这些值可以被提交给服务器进行处理。创建表单的基本语法格式为：formaction=服务器端处理脚本的URLmethod=提交方式各种表单控件/formaction属性：指定了表单数据提交的目标URL，即服务器端处理脚本的位置。这个值可被button元素、类型为submit或image的input元素素上的formaction属性覆盖，使得不同的提交按钮可以将表单数据提交到不同的URL。method属性：指定了表单数据的提交方式，通常是GET或POST。GET方法将表单数据附加在URL后面，适合数据量小、安全性要求不高的场景。POST方法将数据放在HTTP请求体中，适合数据量大、安全性要求高的场景。

21知识准备—创建表单1知识准备--form元素除action和method属性外，还有以下几个常用属性：（1）name属性Name属性代表了表单在其所属的forms集合中的名称。（2）autocomplete属性autocomplete属性是一个枚举属性，值为on时表明浏览器可以自动填充表单中的字段，基于用户以前的输入或偏好设置；值为off时指示浏览器不应自动填充表单中的字段，即禁用了自动完成功能。（3）enctype属性enctype属性是一个枚举类型，定义在提交表单时如何编码表单数据。（4）novalidate属性novalidate属性时一个布尔属性，如果存在，则在提交表单时不触发HTML5的内置验证。

21知识准备—创建表单1知识准备--2.label元素label元素在用户界面中代表一个标题或标签，其作用是为表单控件提供描述性的文本标签。Label元素可以与某个特定的表单控件相关联，这个控件被称为label元素的被标记控件。关联可以通过使用for属性来指定，或者通过将表单控件直接放置在label元素内部来实现，当用户点击label元素时，与之关联的控件会立即获得焦点，就像直接点击控件本身一样。如果使用了for属性，其值必须是与label元素在同一树结构中的某个可标记元素的ID。如果没有指定for属性，但是label元素有一个可标记元素作为后代，那么按树顺序排列的第一个这样的后代就是label元素的被标记控件。

21知识准备—input元素及属性1知识准备--input元素是HTML中用于接收用户输入的最基本和最常用的表单控件之一。它可以根据type属性的不同取值，提供多种类型的输入控件。下面是input元素的基本语法格式：inputty