HTML任务笔记：使用表单制作登录/注册页面

一、任务概述

当前时代倡导新时代、新技能、新梦想，大力弘扬劳模精神、劳动精神、工匠精神，鼓励青年走技能成才、技能报国的路线。本次课程依托新云课堂项目，学习表单相关开发。

表单核心定位

1. 对用户端：表单是数据录入、填写、提交的交互界面。

2. 对网站后端：表单是收集用户信息最核心的途径。

表单常见业务场景

网页中加入表单元素，可以实现这些常用功能：

• 会员注册、账号登录

• 问卷调查、信息填报

• 在线考试答题

• 论坛发帖、评论留言

• 个人资料修改、密码重置

表单数据验证两种方案

1. 传统方案：HTML表单控件 + JavaScript脚本搭配，完成复杂表单校验；

2. HTML5新特性：HTML标签自带校验属性，无需JS代码，就能完成基础格式校验，大幅提升用户填写体验，也是本阶段需要入门了解的内容。

项目落地场景

新云课堂项目里三个核心页面，全部依靠表单实现：

1. 用户登录页面

2. 用户注册页面

3. 个人信息登记页面

二、4.2 任务学习目标

（1）素质目标

1. 在编码练习中，培养劳动精神与工匠精神，编写规范、整洁、易维护的前端代码；

2. 培养顺应行业发展的意识，主动自学前端新技术、新属性，保持技能更新。

（2）知识目标

1. 理解表单

   元素的基础定义、作用与运行逻辑；

2. 能够独立制作语义化规范表单页面；

3. 认识HTML5新增表单校验属性，掌握基础原生表单验证用法。

三、表单基础前置知识点（拓展补充）

1. form表单容器标签

• 所有输入框、单选框、按钮等控件，都必须包裹在 内部；

• 核心属性：

◦ action：指定数据要提交到哪个后端接口地址；

◦ method：指定提交方式（常用GET / POST）。

2. 常用表单控件

• 单行文本输入框、密码框、单选框、复选框、提交按钮、重置按钮；

• 多行文本输入域；</p> <p>• <select> + <option> 下拉选择框；</p> <p>• <label> 语义化绑定输入框文字，点击文字即可激活输入框。</p> <ol start="3"> <li>HTML5原生表单校验常用属性</li> </ol> <p>• required：设置输入框为必填项，空内容无法提交；</p> <p>• type="email"：强制校验邮箱格式；</p> <p>• type="tel"：手机号输入专用；</p> <p>• min / max：限制数字输入的最大、最小值；</p> <p>• placeholder：输入框灰色提示文字。</p> <p>四、学习小结</p> <ol> <li> <p>表单是网页和用户产生数据交互的核心载体，是前后端联动的基础；</p> </li> <li> <p>语义化表单更利于浏览器、搜索引擎识别，是前端规范化基础；</p> </li> <li> <p>HTML5原生属性简化了基础校验，复杂限制后续再用JS深化。<br> 第二篇：CSS自定义带括号有序列表（单独博文，详细版）</p> </li> </ol> <p>标题：CSS小技巧：用Counter计数器实现 (1)(2)(3) 括号序号列表</p> <p>一、需求背景</p> <p>HTML原生有序列表<ol>默认格式是：</p> <ol> <li>内容</li> <li>内容</li> <li>内容<br> 日常文档、笔记排版里，经常需要 (1)、(2)、(3) 这种带圆括号的序号，原生列表无法直接修改格式，就需要使用 CSS counter 计数器 自定义编号。</li> </ol> <p>二、完整代码</p> <p>HTML结构（用无序列表ul实现，兼容性更好）</p> <ul class="custom-list"> <li>第一条课堂笔记内容</li> <li>第二条课堂笔记内容</li> <li>第三条课堂笔记内容</li> <li>第四条课堂笔记内容</li> </ul> CSS完整样式代码 /* 1. 父容器：清空默认列表样式 + 初始化计数器 */ .custom-list { /* 移除ul/ol自带的默认圆点、序号 */ list-style: none; /* 新建一个名为 my-counter 的计数器，默认初始值为0 */ counter-reset: my-counter; } <p>/* 2. 每一个li列表项：计数器数值+1 <em>/<br> .custom-list li {<br> /</em> 每命中一个li，my-counter自增1 */<br> counter-increment: my-counter;<br> }</p> <p>/* 3. 伪元素:before，在文字前方拼接括号+数字 <em>/<br> .custom-list li::before {<br> /</em> counter(计数器名) 读取当前数字，拼接左右括号 <em>/<br> content: "(" counter(my-counter) ")";<br> /</em> 序号和后面文字之间拉开间距，避免挤在一起 */<br> margin-right: 5px;<br> }<br> 三、核心CSS属性逐行详解</p> <ol> <li> <p>list-style: none;<br> 作用：清除浏览器默认自带的列表标记，防止原生序号和自定义序号重复叠加。</p> </li> <li> <p>counter-reset: 自定义计数器名称;</p> </li> </ol> <p>◦ 在列表父级标签使用；</p> <p>◦ 功能：创建计数器，并重置初始数值（默认从0开始）。</p> <ol start="3"> <li>counter-increment: 计数器名称;</li> </ol> <p>◦ 写在每一条列表项li上；</p> <p>◦ 每渲染一个li，计数器数字就 +1。</p> <ol start="4"> <li>content: "(" counter(my-counter) ")";</li> </ol> <p>◦ ::before伪元素用来在元素最前方插入内容；</p> <p>◦ counter(名称)可以读取当前计数器的数字，和括号字符串自由拼接。</p> <ol start="5"> <li>margin-right: 5px;<br> 可选优化属性，用来分隔序号和正文文本，提升阅读舒适度。</li> </ol> <p>四、拓展延伸用法</p> <ol> <li> <p>修改序号格式，只改动content内容即可：<br> /* 示例：改成 1) 2) 3) */<br> content: counter(my-counter) ")";</p> </li> <li> <p>支持多级嵌套列表，适合做长文档目录、分步操作流程；</p> </li> <li> <p>还可以搭配list-style-type中文序号、罗马数字，组合出更多排版样式。</p> </li> </ol>