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

模块六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="服务器端处理脚本的URL"method="提交方式">

各种表单控件</form>action属性：指定了表单数据提交的目标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元素的基本语法格式：<inputtype="类型"属性="值"/>input元素除type属性外，还有其他很多属性，有些属性仅在特定的type状态下才有效。1.单行文本输入框<inputtype="text"/>单行文本输入框是input元素的默认类型，用于输入单行文本,如用户名、地址等。常用的属性有name、value、placeholder、maxlength、readonly、disabled等。对于HTML5新增的input类型，如果浏览器不支持某种类型的话，也将显示成单行文本输入框。2.密码输入框<inputtype="password"/>密码输入框用于输入密码，输入内容会以掩码形式显示。3.单选按钮<inputtype="radio"/>单选按钮用于用户从多个选项中选择一个，如选择性别、是否完成等。它的name属性可用于分组单选按钮，所有具有相同name值的单选按钮属于同一组，用户在一组中只能选择一个选项；value属性定义当单选按钮被选中时提交给服务器的值；checked属性则表示该单选按钮默认被选中，需要注意的是一个分组中最多只能有一个单选按钮设置了checked属性。

21知识准备—input元素及属性1知识准备--4.复选框<inputtype="checkbox"/>复选框允许用户在一组选项中选择一个或多个项目。与单选按钮不同，单选按钮在同一名称下只允许选择一个选项，而复选框允许用户自由选择任意数量的选项。复选框的name属性应当相同，这样服务器端可以容易地处理这些复选框作为一个集合。如果name属性不同，那么每个复选框都会被视为独立的输入项。checked属性是一个布尔属性，表示复选框是否被选中，它没有值，只有存在或不存在两种状态。如果想在JavaScript中取消选中一个复选框，应该使用element.checked=false。5.普通按钮<inputtype="button"/>普通按钮用于创建一个按钮，该按钮在网页上可以被点击，但不会自动提交表单。相反，它通常用于触发JavaScript函数，从而执行某些客户端脚本动作，如弹出警告框、进行计算、显示/隐藏元素等。6.提交按钮<inputtype="submit"/>提交按钮用于创建一个提交按钮，当用户点击这个按钮时，会触发表单的提交过程。这是最常见的用于将表单数据发送到服务器的方式之一。提交按钮通常位于表单的底部，作为用户完成表单填写后的操作选项。value属性定义了按钮上显示的文本或图标,默认情况下，按钮上显示的是"Submit"字样。

21知识准备—input元素及属性1知识准备--7.重置按钮<inputtype="reset"/>重置按钮用于创建一个重置按钮，当用户点击这个按钮时，表单中的所有字段将恢复到它们的初始状态或默认值。这对于允许用户清除所有已输入的信息并从头开始非常有用，尤其是在表单比较长或复杂的情况下。value属性定义了按钮上显示的文本，默认情况下，按钮上显示的是"Reset"字样。8.图像形式的提交按钮<inputtype="image"/>图像形式的提交按钮用于创建一个图像形式的提交按钮，当用户点击这个图像时，表单会像点击普通提交按钮一样被提交。图像形式的提交按钮还提供了额外的功能，即它可以捕获用户点击图像的确切坐标，这在需要根据图像的不同区域触发不同行为的场景中特别有用，如适合用于热区地图（hotspotmaps）或需要基于图像不同区域进行响应的应用场景。9.隐藏域<inputtype="hidden"/>隐藏域用于在HTML表单中创建一个隐藏字段。这种类型的输入元素不会在页面上显示任何可见的控件，但当表单被提交时，它会将一个名称/值对发送到服务器。隐藏字段通常用于存储将在服务器端处理或用于某种内部逻辑的值，但不需要用户直接输入或看到。非常适合存储诸如用户ID、会话ID、交易参考号等后台处理所需的信息，但不应该用来存储敏感信息，如密码，因为这些信息可以通过查看页面源代码或网络请求轻易获取。

21知识准备—input元素及属性1知识准备--10.文件域<inputtype="file"/>文件域用于让用户上传文件的HTML输入类型。允许用户从他们的计算机中选择一个或多个文件，并将其作为表单的一部分提交到服务器。multiple属性允许用户可以选择多个文件上传，否则，默认情况下只能选择一个文件；accept属性用于指定允许上传的文件类型。例如，accept="image/*"表示只允许图像文件被选择；必需包含enctype="multipart/form-data"属性才能正确地将文件数据编码并发送到服务器。案例6-2演示text、password、radio、checkbox、button、submit、reset、image、hidden类型的input元素的用法，制作一个“学生基本信息收集”表单页面，并使用CSS来美化表单界面。

21知识准备—input元素及属性1知识准备--前面学习的10种类型的input元素是常见的表单输入类型，是所有浏览器都支持的类型。接下来学习的在HTML5标准中新增的12种类型，称之为HTML5新增表单输入类型，已经被大多数浏览器所支持，这些新增类型提供了更好的输入控制和验证，对于浏览器不支持的输入类型，将会在网页中显示为一个单行文本输入框。11.Email地址的输入域<inputtype="email"/>Email地址的输入域是一种专门用于输入E-mail地址的输入框。案例6-3演示email类型input元素的用法，在form元素包含两个类型分别为email和submit的input元素。

21知识准备—input元素及属性1知识准备--当提交表单时，如果输入内容不符合Email邮件地址格式，就会在输入框旁边提示相应的错误信息，如图所示。在这里需要注意，根据默认提供的约束，用户输入a@b是合法的。这是因为email类型默认允许内部网电子邮件地址。要实现不同的验证行为，可以使用pattern属性，也可以自定义错误消息。如果将multiple属性与email类型结合使用，就允许在同一输入框中输入用逗号分隔的，多个电子邮件地址。在案例6-3的基础上新增multiple属性，然后保存后运行，在email类型输入框中输入a@b,ab@126.com，最后单击提交按钮，由于form元素未使用method属性，则默认使用get方式提交数据且数据会显示到URL中，预览效果如图所示。

21知识准备—input元素及属性1知识准备--12.搜索域<inputtype="search"/>search类型是一种专门用于输入搜索关键词的文本框，通常，search字段以圆角呈现，它们有时在用户输入内容后，其右侧会附带一个删除图标，单击这个图标按钮可以快速清除内容。此外，在带有动态键盘的设备上，键盘的回车键可能会显示“搜索”，或显示放大镜图标，如图所示。另一个值得注意的功能是search字段的值可以自动保存并重新使用。

21知识准备—input元素及属性1知识准备--13.电话号码输入类型<inputtype="tel"/>tel类型是一种专门用于提供输入电话号码的文本框，由于世界各地的电话号码格式千差万别，这种类型的字段不会对用户输入的值执行任何限制。因此，需要对输入的值进行约束时，tel类型通常会和pattern属性配合使用。当通过带有动态键盘的触摸设备访问时会显示数字键盘，提高了用户的体验，如图所示。

21知识准备—input元素及属性1知识准备--14.URL地址输入域<inputtype="url"/>url类型是一种专门用于输入URL地址的文本框。案例6-4演示url类型input元素的用法，在form元素包含两个类型分别为url和submit的input元素。当提交表单时，如果输入内容没有输入协议或者URL格式不正确，就会在输入框旁边提示相应的错误信息，如下图所示。根据默认提供的约束，用户输入a：b是合法的，但并不一定意味着它指的是实际存在的位置，要实现更严格的验证行为，可以使用pattern属性。当通过带有动态键盘的触摸设备访问时会显示全部或部分包含冒号、句点和正斜杠的默认键盘，提高了用户的体验。

21知识准备—input元素及属性1知识准备--15.数值输入域<inputtype="number"/>number类型是一种专门用于输入浮点数的文本框，并且通常以微调器的形式提供按钮来增加或减少框中的值。在带有动态键盘的设备上，通常显示数字键盘。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。可以通过设置min和max属性来限制允许的最小值和最大值。还可以使用该step属性来设置数字间隔，也就是按下输入框左侧微调按钮引起的增量或减量。默认情况下，number类型仅验证数字是否为整数。要允许浮点数，请指定step的值为"any"。如果省略，则该step值默认为1，这意味着只有整数有效。案例6-5演示number类型input元素的用法，在form元素包含两个类型分别为number和submit的input元素,将其值限制为1到10之间，其数字间隔为2，这样的话就只有1，3，5，7，9是合法的数字，输入最大值10也是无效的。

21知识准备—input元素及属性1知识准备--在案例6-5的基础上，新建案例6-6，将number类型的input元素的值限制为介于0和6之间，其数字间隔为any，表示允许有任意小数位且范围在0和6之间的浮点数，这里要注意，按下输入框左侧微调按钮引起的增量或减量为1。

21知识准备—input元素及属性1知识准备--16.一定范围内数字值的输入域<inputtype="range"/>range类型是一种专门用于提供一定范围内数值的输入类型，在网页中显示为滑动条。它的常用属性与number类型一样,通过min属性和max属性，可以设置最小值和最大值，通过step属性指定每次滑动的步幅。案例6-7演示range类型input元素的用法，在form元素包含两个类型分别为range和submit的input元素,将其值限制为0到6之间，其步幅为1。

21知识准备—input元素及属性1知识准备--17.颜色输入类型<inputtype="color"/>color类型用于实现一个RGB格式颜色值的输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。单击color类型输入框，会弹出拾色器面板，方便用户可视化选取一种颜色，单击提交按钮后，将会提交一个6位的十六进制颜色。案例6-8演示color类型input元素的用法，在form元素包含两个类型分别为color和submit的input元素。

21知识准备—input元素及属性1知识准备--单击提交按钮后，在浏览器地址栏中出现?color=%233d0a0a，这里？表示get方式提交表单传递的参数将放在？后面；color是参数名也是color类型的input元素的name属性值；%23代表的是#符号，这是十六进制颜色代码的标准前缀；而3d0a0a是一个具体的十六进制颜色值，代表了一种特定的暗红色。预览效果如图所示。

21知识准备—input元素及属性1知识准备--18.日期时间类输入域HTML5新增了date类型用于输入或选取年、月、日，精确到的最小日期单位是日；month类型用于输入或选取年、月，精确到的最小日期单位是月；week类型用于输入或选取年、周，精确到的最小日期单位是周；time类型用于输入或选取时间，包括小时和分，但不包括秒，精确到的最小时间单位是分；datetime-local类型用于输入或选取一个本地化的日期时间，它的结果值包括年、月、日、小时和分，但不包括秒，是最详细的时间选择类型。相对而言，这种类型的支持性也一般，并且不同浏览器在输入方法上存在差异。通常会使用date类型和time类型联合使用来代替它。这五种日期和时间选择器都可以使用min和max属性进行约束，并可以通过step属性进行进一步的约束。用户在使用这些输入框时，既可以直接输入内容，也可以单击输入框左侧的按钮进行选择。

21知识准备—input元素及属性1知识准备--案例6-9演示month类型input元素的用法，在form元素包含两个类型分别为month和submit的input元素,将其值限制为2024-01到2024-08之间，其步幅为1。预览效果如左图所示。单击提交按钮后，在浏览器地址栏中出现了?month=2024-04。预览效果如右图所示。

实战演练—制作“垃圾分类问卷调查”表单2本次任务主要是利用form元素、label元素、各种类型的input元素及属性等知识点完成“垃圾分类问卷调查”表单的制作，从上到下依次是问卷标题、个人信息收集、选择题和提交按钮。个人信息收集部分收集参与者的姓名和邮箱，选择器部分包含一个单选题和一个多选题。并要求能适应不同尺寸的浏览器宽度。预览效果如图所示。

实战演练—制作“垃圾分类问卷调查”表单2“垃圾分类问卷调查”表单制作思路为用一个form元素作为表单容器，设置action和method属性来指定表单提交的URL和方法。使用h1元素作为表单的标题，强调问卷的主题。为每个输入字段使用label元素提高表单的可访问性。个人信息收集使用text和email类型的input元素收集姓名和邮箱，使用placeholder属性为输入字段提供提示信息，利用required属性确保重要字段的完整性。使用radio和checkbox类型的input元素来创建单选和多选题，并为每个选择项提供清晰的标签描述。使用submit类型的input元素，方便用户提交问卷。通过流式布局实现网页能适应不同尺寸的浏览器宽度。可以分成三步来完成：首先制作“垃圾分类问卷调查”表单的HTML结构代码；其次编写基础CSS代码；最后设置每个部分的样式。

实战演练—制作“垃圾分类问卷调查”表单21.制作“垃圾分类问卷调查”表单的HTML结构代码

实战演练—制作“垃圾分类问卷调查”表单22.编写基础CSS代码给body元素设置全局字体、浅灰色背景颜色、清除body元素的默认外边距和内边距，让页面内容紧密贴合浏览器窗口。给form元素限制容器的最大宽度为600px；设置表单的垂直外边距为50像素，水平外边距为auto，使表单在页面中居中显示；设置白色背景；设置表单的内边距，使表单内容与表单边缘保持一定的距离；同时通过添加圆角效果，轻微的阴影效果，适当的内边距来提升视觉层次。

实战演练—制作“垃圾分类问卷调查”表单23．设置每个部分的样式给h1元素设置标题文本居中对齐，在标题底部留出20像素的外边距，以便与其他内容分隔开。将label元素显示为块级元素，在每个标签的顶部留出外边距，以提供足够的垂直间隔。给类型为text和email类型的input元素设置宽度、添加内边距、上外边距；设置边框样式和圆角。给类型为radio和checkbox的input元素，设置右外边距，以便为后续的文字标签留出空间。将按钮显示为块级元素，占据其父容器的全部宽度；添加内边距、上外边距、设置背景颜色、设置文本颜色、移除按钮的边框；添加圆角，使按钮看起来更平滑；设置光标为手型，提示用户这是一个可点击的元素。当鼠标悬停在button元素上时，改变按钮的背景颜色为更深的绿色，提供视觉反馈，表明按钮处于活动状态。

进阶训练—制作“快递单录入”表单3本次任务主要是利用form元素、label元素、各种类型的input元素及属性、HTML5的内置属性来实现前端验证等知识点完成“快递单录入”表单的制作，从上到下依次是表单标题、寄件人信息、收件人信息、物品信息、报价服务和提交按钮。寄件人信息和收件人信息都包括姓名、电话和地址，物品信息包括物品描述和物品价值。并要求能适应不同尺寸的浏览器宽度。预览效果如图所示。

进阶训练—制作“快递单录入”表单3表单验证表单验证是在用户提交表单之前确保数据的有效性和完整性的过程。验证可以分为前端验证和后端验证两大部分。前端验证通常使用HTML5的内置属性和JavaScript来实现。后端验证则依赖于服务器端的编程语言，后端验证是必需的，即使进行了前端验证，因为前端验证可以被绕过，后端验证通常涉及到数据库查询、业务规则检查等。这部分内容主要讲解使用HTML5的内置属性来实现前端验证，HTML5有一个特别有用的新功能就是可以在不写一行脚本代码的情况下，即对用户的输入进行数据校验，这都是通过表单元素的校验属性实现的，这些属性可以定义一些规则，用于限定用户的输入，比如前面知识点部分使用min和max属性设置数值字段的最小和最大值；使用step属性设置数值字段的增量；使用HTML5新增的email、number、url、date、time等，自动进行类型验证;使用minlength和maxlength属性来限制长度等；还可以使用required属性来确保字段必须填写和使用pattern属性结合使用正则表达式来限制输入格式。如果表单中输入的数据都符合这些限定规则，那么表示这个表单校验通过，否则则认为校验未通过。当一个元素校验通过时，该元素将可以通过CSS伪类:valid进行特殊的样式化；如果一个元素未校验通过，该元素将可以通过CSS伪类:invalid进行特殊的样式化。

进阶训练—制作“快递单录入”表单31.使用required属性来确保字段必须填写使用required属性是最简单的HTML5校验功能，它使输入成为必需的。当设置此属性时，如果输入为空，该表单将不会提交（并将显示错误消息），输入也将被视为无效。案例6-10演示使用required属性来确保字段必须填写，在form元素包含两个类型分别为text和submit的input元素,给类型为text的input元素上添加required属性，并设置在校验失败时，输入框会有一个亮红色的虚线边框，在校验通过时会有一个更微妙的黑色边框样式。

进阶训练—制作“快递单录入”表单32.使用pattern属性结合使用正则表达式来限制输入格式使用pattern属性结合使用正则表达式来限制输入格式是理想的表单校验器。正则表达式相当复杂，是本模块任务2拓展学习指导中的内容，在这里只是个简单的正则表达式的应用。在案例6-10的基础上，新建案例6-11，给类型为text的input元素增加一个pattern属性，属性值为"足球|篮球"，表示接受两个值中的一个：字符串"足球"或者字符串"篮球"。

进阶训练—制作“快递单录入”表单3“快递单录入”表单制作思路为用一个form元素作为表单容器，设置action和method属性来指定表单提交的URL和方法。使用h1元素作为表单的标题，强调表单的主题。寄件人信息、收件人信息、物品信息、报价服务使用h2元素，为每个输入字段使用label元素提高表单的可访问性。寄件人信息和收件人信息收集使用text和tel类型的input元素收集姓名、地址和电话，利用required属性确保重要字段的完整性，电话利用pattern属性来限定输入必须是11位数字，这符合中国手机号码的标准格式，确保输入的有效性。使用text和number类型的input元素来创建物品描述和物品价值，物品价值限制为非负数，且可以接受小数点后两位。保价服务使用单选按钮组实现。使用submit类型的input元素，方便用户提交快递单。通过流式布局实现网页能适应不同尺寸的浏览器宽度。可以分成三步来完成：首先制作“快递单录入”表单的HTML结构代码；其次编写基础CSS代码；最后设置每个部分的样式。

进阶训练—制作“快递单录入”表单31.

制作“快递单录入”表单的HTML结构代码

进阶训练—制作“快递单录入”表单32.编写基础CSS代码给body元素设置全局字体、浅灰色背景颜色、清除body元素的默认外边距和内边距，让页面内容紧密贴合浏览器窗口。给form元素限制容器的最大宽度为600px；设置表单的垂直外边距为50像素，水平外边距为auto，使表单在页面中居中显示；设置白色背景；设置表单的内边距，使表单内容与表单边缘保持一定的距离；同时通过添加圆角效果，轻微的阴影效果，适当的内边距来提升视觉层次。

进阶训练—制作“快递单录入”表单33．设置每个部分的样式给h1元素设置标题文本居中对齐，在标题底部留出20像素的外边距，以便与其他内容分隔开。将label元素显示为块级元素，在每个标签的顶部留出外边距，以提供足够的垂直间隔。给类型为text、tel和number类型的input元素设置宽度、添加内边距、上外边距；设置边框样式和圆角。给类型为radio的input元素，设置右外边距，以便为后续的文字标签留出空间。通过CSS伪类:invalid给无效的input元素（即未通过HTML5前端验证的输入框），设置边框颜色为红色，以视觉上提醒用户输入错误或遗漏。将按钮显示为块级元素，占据其父容器的全部宽度；添加内边距、上外边距、设置背景颜色、设置文本颜色、移除按钮的边框；添加圆角，使按钮看起来更平滑；设置光标为手型，提示用户这是一个可点击的元素。当鼠标悬停在button元素上时，改变按钮的背景颜色为更深的绿色，提供视觉反馈，表明按钮处于活动状态。

4动手实践—制作“学生信息登记表”表单4设计并制作如图所示的“学生信息登记表”表单。页面使用form元素、label元素、各种类型的input元素及属性、HTML5的内置属性来实现前端验证、header元素、footer元素、main元素等知识点制作“学生信息登记表”表单，要求姓名不能为空，2至6个字符；身高限定到100至230厘米的浮点型数值；电话限定为11位的手机号。小结知识准备——表单与input元素实战演练——制作“垃圾分类问卷调查”表单进阶训练——制作“快递单录入”表单动手实践——制作“学生信息登记表”表单模块六HTML5表单的应用任务2其他表单元素网页制作CSSHTML知识准备——其他表单元素实战演练——制作“会员注册”表单其他表单元素0201进阶训练——制作“商品订购”表单03动手实践——制作“图书馆图书预约”表单04

1.掌握其他表单元素

2.了解正则表达式其他表单元素学习目标：

1.培养责任意识与诚信，使其在互联网时代有保护个人信息的责任感，认识到输入验证不仅是技术需求，也是对用户负责的表现，避免虚假信息的传播，维护网络空间的健康秩序。

2.培养公民素养与法治观念，引导其遵守网络法规，不滥用技术手段，合法合规地处理数据，

3.培养创新精神，鼓励学生创造性地解决问题，设计更加人性化、高效的信息交互界面，体现创新思维。其他表单元素思政目标：

21知识准备—textarea元素1知识准备--textarea元素用于创建一个可以让用户输入多行文本的框。这个框可以被用来收集用户的评论、留言或者其他任何需要多行文本输入的信息。textarea元素之间的文本会被浏览器显示为控件内的默认文本，当用户开始在其中输入时，这些默认文本会被替换。textarea元素常用的属性有autocomplete、name、value、placeholder、maxlength、minlength、form、cols、rows、required、readonly,disabled等。其中cols属性用来设定文本框每行可显示的字符数量。如果cols的值是有效并且大于零的非负整数，文本框就会以此值作为每行的字符宽度。如果cols属性的值不符合这些条件（比如，它不是一个数字或者是一个负数），那么每行的字符宽度将默认为20个字符。rows属性用于设置文本框应该显示的行数。如果rows的值是有效的且大于零的非负整数，那么文本框将以这个值作为它的行数。如果rows属性的值无效（例如，不是数字或者是一个负数），则文本框的默认行数会被设定为2行。textarea元素本身并不直接支持width和height属性来设置其尺寸。然而，这两个属性常常通过CSS来间接控制textarea的宽度和高度

21知识准备—select元素、option元素和optgroup元素1知识准备--select元素、option元素和optgroup元素是用于创建下拉列表的组成部分。1.select元素select元素用于定义一个下拉列表的容器，用户可以从其中选择一个或多个选项。基本语法如下：<selectname="name"><option>选项1</option><option>选项2</option><option>选项3</option>…</select>其中name属性是必需的，用于在表单提交时标识这个select元素，常用的属性还有multiple和size。multiple属性被添加到select元素中时，用户可以选择多个选项。size属性定义了在没有滚动的情况下可见的选项数目。

21知识准备—select元素、option元素和optgroup元素1知识准备--2.option元素option元素用于定义select下拉列表中的每个可选项。基本语法如下：<optionvalue="value">选项文本</option>其中value属性是发送给服务器的值，而“选项文本”是在下拉列表中显示给用户的文本。常用的属性还有selected，selected属性被添加到option元素中时，表示当前项时默认选择项。3.optgroup元素optgroup元素表示一组具有公共标签的option元素，也就是用于对select下拉列表中的option元素进行分组，通常用于逻辑上相关的选项。它可以包含一个label属性，用于定义组的标题。基本语法如下：<optgrouplabel="组标题"><optionvalue="value1">选项1</option><optionvalue="value2">选项2</option>…</optgroup>

21知识准备—select元素、option元素和optgroup元素1知识准备--案例6-12演示select元素、option元素和optgroup元素的用法，创建两个下拉列表，第一个使用optgroup元素对可选项进行了分组，是一个单选下拉列表；第二个时多选下拉列表，使用size属性设置了三个同时可见的可选项，同时指定一项可选项为默认选择项。

21知识准备—select元素、option元素和optgroup元素1知识准备--2.1.3datalist元素datalist元素用于定义一个选项列表，这个列表可以被input元素使用，以提供自动完成或提示建议。当input元素的list属性引用了一个datalist元素的id时，用户在输入框中开始输入时，浏览器会显示datalist中定义的option元素作为建议列表。datalist元素本身不会在页面上显示，它的作用主要是为输入控件提供数据源。案例6-13演示datalist元素的用法，一个输入框，用于用户输入城市名，使用datalist元素提供自动完成功能。

21知识准备—select元素、option元素和optgroup元素1知识准备--2.1.4output元素output元素表示由应用程序执行的计算结果，或是用户动作所产生的结果。这个元素主要用于显示动态生成的内容，如表单中两个数值输入字段的计算结果，或者是游戏中玩家得分的实时更新。通过与JavaScript结合使用，output元素可以即时反映用户输入或操作的变化，从而提供更互动和响应式的用户体验output元素的for属性包含一个或多个id，指向那些其值用于计算结果的输入元素。当这些输入元素的值改变时，output元素的内容应该相应更新。

21知识准备—select元素、option元素和optgroup元素1知识准备--案例6-14演示output元素的用法，两个number类型的input元素、一个button元素和一个output元素，output元素通过for属性与两个input元素关联，button元素的onclick属性值为一个函数。在JavaScript脚本中编制这个函数，实现当用户点击“计算求和”按钮时，计算两个输入框的值之和，并将结果输出到output元素中。

21知识准备—select元素、option元素和optgroup元素1知识准备--2.1.5progress元素progress元素表示某项任务的完成进度。它提供了一种直观的方式，让用户了解一个操作或任务的完成状态，比如文件上传、数据下载或后台处理进程的进度。progress元素有两个关键属性：value和max。value属性表示当前已完成的工作量。max属性表示完成整个任务所需的总工作量。当value属性的值小于max属性的值时，进度条显示为部分填充，表示任务尚未完成。当value等于max时，进度条显示为完全填充，表示任务已完成。有时，可能无法确切知道完成任务还需要多少工作量，例如在网络请求等待响应时。在这种情况下，可以省略value属性，使进度条处于不确定状态，表示任务正在进行中，但不知道具体完成多少。大多数现代浏览器会显示一个动态的动画，通常是一个不断移动的条纹或光标，来回滑动或闪烁，表示任务在后台运行但具体进度未知。为了增加可访问性，推荐在progress元素内部包含一段文字，描述当前的进度状态，这样使用屏幕阅读器的用户也能理解进度信息。

21知识准备—select元素、option元素和optgroup元素1知识准备--2.1.6meter元素meter元素表示一个数值在一个已知范围内的标量测量，它可以用于显示诸如磁盘使用率、查询结果的相关度、环境温度或湿度等指标。meter元素通常用来提供一个直观的视觉反馈，显示一个数值相对于某个范围的位置。属性描述value表示当前测量的值。这是必须指定的属性，否则meter元素将不会显示有效内容min定义了测量范围的最小值，默认为0max定义了测量范围的最大值，默认为1low标记了范围内的“低”值。如果测量值低于这个值，meter元素将显示为“低”high标记了范围内的“高”值。如果测量值高于这个值，meter元素将显示为“高”optimum表示最佳或理想的测量值。如果测量值与optimum值相同，meter元素将突出显示这一点

21知识准备—select元素、option元素和optgroup元素1知识准备--案例6-15演示meter元素的用法，用四个meter元素显示了服务器的CPU的低、最佳、适中和高的使用情况对比。meter元素的min和max分别设为0和100，因为CPU使用率的范围是从0%到100%。low和high值设为20和80，这意味着低于20%和高于80%的使用率被视为不理想，而optimum值设为50%，表示这是理想的CPU使用率。

21知识准备—select元素、option元素和optgroup元素1知识准备--2.1.7fieldset元素和legend元素fieldset元素代表了一组表单控件（或其他内容），这些控件可以带有可选的标题。标题由fieldset元素的首个legend子元素给出，如果有的话。除了标题之外的其余子元素构成了该组的内容。1.fieldset元素fieldset元素用于将表单中的控件和标签分组。它在视觉上创建了一个围绕这些控件的边框，帮助用户识别哪些控件属于同一组，从而提高表单的可读性和可用性。2.legend元素legend元素用于为fieldset元素提供一个标题或标签，描述该组控件的目的。legend元素应该直接位于fieldset的开头，作为其第一个子元素，这样屏幕阅读器可以首先读出这一描述，帮助视力障碍用户理解接下来的控件组是关于什么的。

21知识准备—select元素、option元素和optgroup元素1知识准备--案例6-16演示fieldset元素和legend元素的用法，用两个fieldset元素用于将联系信息和邮寄地址分别分组，而legend元素则提供了每组的标题。

实战演练—制作“会员注册”表单2本次任务主要是利用form元素、label元素、各种类型的input元素及属性、fieldset元素、legend元素、output元素、textarea元素、select元素、HTML5的内置属性来实现前端验证等知识点完成完成“会员注册”表单的制作，从上到下依次是表单标题、基本信息、联系方式、兴趣爱好和注册按钮。基本信息包括用户名、电子邮箱、密码和确认密码和一个显示两次密码是否一样的output元素，联系方式包括电话和地址，兴趣爱好包括一个下拉列表。并要求能适应不同尺寸的浏览器宽度。预览效果如图所示。

实战演练—制作“会员注册”表单2“会员注册”表单制作思路为用一个form元素作为表单容器，设置action和method属性来指定表单提交的URL和方法。使用h1元素作为表单的标题，强调表单的主题。基本信息、联系方式、兴趣爱好部分用fieldset元素进行分组，legend元素定义分组的标题。基本信息部分使用text、email和password类型的input元素收集用户名、电子邮箱、密码和确认密码，且利用required属性确保重要字段的完整性，利用pattern属性来限定密码至少8个字符，监听确认密码的input事件，比较两次的密码是否一样，把比较结果显示在output元素中。联系方式部分使用tel类型的input元素收集电话信息，textarea元素收集地址信息，电话信息使用required和pattern属性对电话进行验证。兴趣爱好部分使用select元素和option元素提供多个选项可供选择。使用submit类型的button元素，方便注册。通过流式布局实现网页能适应不同尺寸的浏览器宽度。可以分成三步来完成：首先制作“快递单录入”表单的HTML结构代码；其次复用模块六任务1中制作“快递单录入”表单中的CSS代码，并新增CSS代码；最后实现密码比对的交互功能。

实战演练—制作“会员注册”表单2

1.制作“会员注册”表单的HTML结构代码

实战演练—制作“会员注册”表单22.复用并新增CSS代码复用制作“快递单录入”表单中的CSS代码，只需对选择器名称进行简单修改即可。给fieldset元素设置边框、下外边距、和内边距，legend元素设置字体加粗和左右两侧的内边距。3.实现密码比对的交互功能通过getElementById方法获取页面上的确认密码输入框，并给获取的输入框添加一个事件监听器，事件类型是'input'，意味着每当输入框中的内容发生变化时，就会触发后面的匿名函数。在匿名函数内，使用getElementById方法获取页面上的密码输入框和显示比对结果的output元素，然后比较“密码”和“确认密码”的值是否完全相同，如果相同，则更新output元素的文本内容为“密码匹配”，并将文本颜色设为绿色，表示成功；如果不相同，则更新<output>元素的文本内容为“密码不匹配”，并将文本颜色设为红色，表示有错误。

进阶训练—制作“商品订购”表单3本次任务主要是利用form元素、label元素、各种类型的input元素及属性、fieldset元素、legend元素、output元素、textarea元素、select元素、radio元素、HTML5的内置属性来实现前端验证和正则表达式等知识点完成完成“商品订购”表单的制作，从上到下依次是表单标题、订购者信息、商品信息、配送信息、支付方式和提交订单按钮。订购者信息包括姓名、电子邮箱和联系电话。商品信息包括商品名称、数量和单价，配送信息包括配送地址和配送方式。支付方式是一个单选按钮组。并要求能适应不同尺寸的浏览器宽度。预览效果如图所示。

进阶训练—制作“商品订购”表单3正则表达式正则表达式（RegularExpression，常简写为regex或regexp）是计算机科学中的一个概念，它使用单个字符串来描述和匹配符合某个句法规则的字符串序列。正则表达式通过普通字符和元字符的组合，形成一种文本模式，用于检索、替换符合某种模式的文本，或从文本中提取符合条件的子串。这种模式匹配技术广泛应用于字符串操作中，如验证表单、替换文本、提取字符串等。‌1.普通字符普通字符指的是那些没有特殊含义、代表其自身的字符。当这些字符出现在正则表达式中时，它们会按照字面意义去匹配文本中的相同字符。例如，如果想在文本中查找所有的单词“hello”，可以直接使用正则表达式hello，这将匹配所有出现的完整单词“hello”。2.元字符元字符是具有特殊含义的字符，用于构建复杂的文本匹配模式。这些元字符大致可以分为以下几类：（1）重复量词重复量词是允许指定某个模式应该出现的次数，这极大地增强了正则表达式的灵活性和表达力。重复量词通常用于控制模式的重复次数，从而使正则表达式能够匹配更复杂的字符串模式。

进阶训练—制作“商品订购”表单3（1）重复量词重复量词是允许指定某个模式应该出现的次数，这极大地增强了正则表达式的灵活性和表达力。重复量词通常用于控制模式的重复次数，从而使正则表达式能够匹配更复杂的字符串模式。

符号描述例子*匹配前面的表达式零次或多次，等价于{0,}a*b匹配b或ab或aaab等+匹配前面的表达式一次或多次，等价于{1,}a+b匹配ab或aab，但不匹配b?匹配前面的表达式零次或一次，等价于{0,1}a?b匹配b或ab{n}匹配前面的表达式恰好n次a{3}匹配aaa{n,}匹配前面的表达式至少n次a{2,}匹配aa或aaa等{n,m}匹配前面的表达式至少n次，至多m次a{2,4}匹配aa、aaa或aaaa

进阶训练—制作“商品订购”表单3（2）非贪婪量词除{n}外的重复量词默认都是贪婪的，它们会尽可能多地匹配字符。可以使用非贪婪（或懒惰）量词，只需在量词后加上问号?。非贪婪量词会尽可能少地匹配字符，只要满足匹配条件即可。例如，对于字符串“oooo”，“o+?”将匹配单个“o”，而“o+”将匹配所有“o”。非贪婪量词主要用于需要精确控制匹配长度的情况，特别是在处理嵌套结构或需要最小化匹配的场景中。例如，在解析HTML或XML文档时，使用非贪婪量词可以帮助正确地匹配标签内的内容，避免因贪婪匹配而导致的错误。假设有以下HTML字符串：<divid="container"><p>Paragraphone.</p><p>Paragraphtwo.</p><!--Somecomment--><p>Paragraphthree.</p></div>想要匹配每个<p>标签及其内部的文本，但不希望匹配到整个<div>标签。如果使用贪婪量词，如<p>.*<\/p>，正则表达式可能会错误地匹配从第一个<p>标签到最后一个</p>标签之间的所有内容，包括注释和其他<p>标签。这是因为贪婪量词会尽可能多地匹配字符，直到遇到最后一个</p>。

进阶训练—制作“商品订购”表单3（3）位置锚点位置锚点比较特殊，是专门用于匹配文本的起始、结束或者特定位置的元字符。这些锚点不匹配任何字符，而是确定匹配发生的上下文位置。使用位置锚点可以让正则表达式更加精确，避免不必要的匹配。

符号描述例子^匹配字符串的开始^Hello匹配所有以"Hello"开始的字符串$匹配字符串的结束World$匹配所有以"World"结束的字符串\b匹配单词的边界，即单词字符（字母、数字、下划线）与非单词字符之间的位置er\b匹配“never”中的“er”，但不能匹配“verb”中的“er”\B匹配非单词边界，即两个单词字符或两个非单词字符之间的位置er\B匹配“verb”中的“er”，但不能匹配“never”中的“er”

进阶训练—制作“商品订购”表单3（4）字符类正则表达式中的字符类匹配特定集合中的字符。有许多预定义的字符类，也可以定义自己的字符集。

符号描述例子[xyz]匹配字符集中的任意一个字符[abc]匹配a、b或c[^xyz]匹配不在字符集中的任意一个字符[^abc]匹配除a、b和c之外的任何字符[a-z]匹配指定范围内的任意字符[a-z]匹配“a”到“z”范围内的任意小写字母字符[^a-z]匹配任何不在指定范围内的任意字符[^a-z]匹配任何不在“a”到“z”范围内的任意字符.匹配除换行符之外的任何字符，等价于[^\n\r]

\d匹配一个数字字符，等价于[0-9]

\D匹配一个非数字字符，等价于[^0-9]

\s匹配任何空白字符，包括空格、制表符、换页符等等，等价于[\f\n\r\t\v]

\S匹配任何非空白字符，等价于[^\f\n\r\t\v]

\w匹配包括下划线的任何单词字符，等价于[A-Za-z0-9_]

\W匹配任何非单词字符，等价于[^A-Za-z0-9_]

进阶训练—制作“商品订购”表单3（5）转义字符正则表达式中的转义字符可用于插入保留字符，特殊字符和Unicode字符。所有转义字符以\为起始。

符号描述例子\将下一个字符标记为一个特殊字符、或一个原义字符（有“^$()*+?.[\{|”共计12个）、或一个向后引用、或一个八进制转义符n匹配字符n，\n匹配一个换行符；序列\\匹配\；而\(则匹配(。\000八进制转义的形式为\000。数字值必须小于255(\377)\251匹配©\xFF十六进制转义的形式为\xFF\xA9匹配©\uFFFFUnicode转义的形式为\uFFFF\u00A9匹配©\cZ以\cZ格式转义的Unicode控制字符。范围从\cA(SOH,字符码1)至\cZ(SUB,字符码26)

\t匹配一个制表符,等价于\x09和\cI

\n匹配一个换行符,等价于\x0a和\cJ

\v匹配一个垂直制表符。等价于\x0b和\cK

\f匹配一个换页符,等价于\x0c和\cL

\r匹配一个回车符,等价于\x0d和\cM

进阶训练—制作“商品订购”表单3（6）前后查找前后查找允许主表达式前或之后的组，而不将其包含在结果中。负向查找指定一个表达式之前或之后无法匹配的组。

符号描述例子(?=pattern)匹配主表达式后面的组而不将其包含在结果中Windows(?=95|98|NT|2000)匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”(?!pattern)指定主表达式后无法匹配的组（如果匹配，则结果将被丢弃）Windows(?!95|98|NT|2000)匹配“Windows3.1”中的“Windows”，但不能匹配“Windows2000”中的“Windows”(?<=pattern)指定主表达式后无法匹配的组（如果匹配，则结