05樊珍表单页面制作两大任务知识点整理

表单页面制作两大任务知识点整理

一、任务1：信息登记页面 核心知识点

1. 表单基础框架

2. 核心容器

   标签：是所有表单控件的包裹容器，必不可少

3. 两个关键属性

• action ：设置表单数据提交的后台接口地址，为空代表暂时不提交
• method ：规定数据提交方式，常用 post （保密性好，适合提交隐私信息）和 get （参数暴露在地址栏）

2. 各类表单输入控件功能

3. 文件上传框 type="file"：实现本地文件选择上传，本案例用于上传头像

4. 多行文本框 textarea：支持大段文字输入， rows 控制显示行数、 cols 控制每行字符宽度， maxlength 限制最大输入字数， placeholder 设置灰色提示文字

5. 单选按钮 radio

• 同一组单选框必须设置完全相同的 name 属性，才能实现互斥选择（只能选一个）
• value ：代表选中后提交到后台的实际值

4. 复选框 checkbox

• 同一组爱好复选框共用同一个 name ，支持多选
• 每个选项独立绑定 value ，勾选多项时会批量提交全部选中的值

5. 邮箱输入框 type="email"：浏览器自带基础校验，会自动判断输入格式是否符合邮箱规则

6. 手机号输入框 type="tel"：专门适配手机号码输入，移动端会调出数字键盘

7. 提交按钮 submit：点击后自动触发表单提交动作，由 标签实现

8. label标签使用规范

9. 作用：绑定表单控件，点击文字区域也能选中输入框、单选框、复选框，提升用户体验

10. 写法：直接将表单控件嵌套在 内部即可自动完成绑定

11. 表单验证基础

页面内置原生校验：email、tel类型会由浏览器自动校验格式；maxlength限制文本最大长度，属于前端基础验证。