表格表单排版完整教程

在前端网页开发中，

标签是收集用户信息的核心工具。而表格 常用来规整表单内的输入控件，让文字标签与输入框整齐对齐，页面布局干净规整。本文会讲解 标签的核心作用、表格基础结构、表格两大分类，同时介绍案例里用到的各类输入组件。
一、表单核心容器：form 标签
form 标签的作用与核心职责
所有用来填写、提交用户数据的输入控件，都必须包裹在一对 内部，它是整套表单逻辑的承载容器，具备三大核心功能：
1)统一收集用户填写数据
标签会自动收纳内部所有输入框、单选框填写的内容，一次性打包发送给后端服务器。
2)自带提交、重置交互逻辑
无需手写 JavaScript 代码，表单原生支持提交数据、一键清空所有输入内容的按钮功能。
3)通过属性配置数据传输规则
依靠标签自带属性，我们可以设置数据提交的目标地址、传输方式。
核心属性 action
案例代码：
-赋值为空字符串 ""：代表数据提交到当前打开的页面；
-填写后端接口地址（例如 action="/login"）：数据会发送至该接口。
补充常用配套属性：
-method：定义数据传输方式。get 会把参数拼接在网址后方；post 隐藏传输数据，登录、注册场景优先使用；
-name：给表单命名，方便 JavaScript 脚本获取表单对象。

form 内部控件生效规则
只有写在 内部的输入元素，提交时才会同步上传；写在 form 外部的 input、button 不会参与数据提交。表单内置两种按钮原生行为：
1)普通 不写 type 属性时，默认是表单提交按钮；
2) 是重置按钮，一键清空全部填写内容。

二、表格 table 基础结构与表单适配用法

由多层嵌套标签构成，专门用来将内容按行列规整排列。搭配表单使用时，无需额外弹性布局、外边距样式，就能快速做出整齐对称的输入界面。

表格基础标签含义
1)

：整张表格最外层容器；
-border="1"：给表格添加 1 像素边框；
-cellpadding：单元格内边距，控制文字与边框的间距；
-cellspacing：单元格和单元格之间的空隙。
2)（table row）：代表表格一行，一行内可放置多个单元格；
3)

（table header）：表头单元格，文字默认加粗、居中； 4)	（table data）：普通内容单元格，用来存放文字标签、输入框、按钮。 表格搭配表单的优势 左侧单元格	放置「用户名、密码、性别」这类文字标签，右侧单元格放置各类输入控件，所有输入框会自动垂直对齐，是快速制作简易登录、注册表单的高效方案。 三、案例内各类输入组件说明 1)文本输入框 用于输入普通文字（用户名、昵称、地址等），输入内容明文展示。 2)密码输入框 输入内容自动隐藏为圆点；placeholder 属性可以在框内显示浅灰色提示文字，点击输入框后提示自动消失。 3)单选框 用于多选一的场景（案例中选择性别）。同一组单选框必须设置相同的 name 属性，保证同一时间只能选中一个选项。 会把文字和单选框绑定，点击「男 / 女」文字也能选中对应选项，优化用户操作体验。 4)按钮 -无 type 属性：表单提交按钮； -type="reset"：表单重置按钮。 四、表格的两大分类 静态数据展示表格 用途：展示大批量固定数据，例如商品清单、学生成绩、订单列表。 特点：行数多，	表头用来区分分类，单元格内几乎没有输入控件，以纯文本内容为主。 表单排版表格（本文案例类型） 纯粹用来规整表单控件，对齐标签与输入框。 特点：一般只有两列，左列放文字说明，右列放输入框、单选框、按钮；几乎无大量数据行，核心作用是页面排版，而非展示数据。