表单布局

一、表单布局概念
表单由

包裹输入框、单选框、下拉框、按钮等控件，表单布局指通过 HTML + CSS 排版标签文字与输入控件，让页面整齐统一，方便用户填写。
主流分为两种实现方案：表格表单布局、DIV+Flex 弹性表单布局。
二、表单核心标签
·：表单容器，负责提交数据
·：输入项文字标注，点击文字可激活输入框，提升体验
·：单行文本、密码、单选、复选、按钮
·：多行文本框<br> ·<select> / <option>：下拉选择框<br> ·<button>：提交、重置按钮<br> 三、方案 1：Table 表格表单布局（老式简易方案）<br> 原理<br> 利用表格 <tr> 行、<td> 单元格自动对齐，不用复杂 CSS，适合新手快速制作登录、注册页。<br> 示例代码<br> html</p> <form> <table> <tr> <td><label>用户名：</label></td> <td><input type="text" placeholder="请输入账号"></td> </tr> <tr> <td><label>密码：</label></td> <td><input type="password" placeholder="请输入密码"></td> </tr> <tr> <td></td> <td><button type="submit">登录</button></td> </tr> </table> </form> 优缺点 ✅ 优点：无需复杂 CSS，自动左右对齐，无高度塌陷 ❌ 缺点：标签嵌套冗余，移动端适配差，企业项目不推荐 四、方案 2：DIV + Flex 弹性表单布局（现代标准，推荐） 核心思路 用 div 划分每一组表单项，父容器开启 flex 实现文字与输入框横向对齐，自适应移动端。 完整示例 html <style> .form-item { display: flex; margin: 15px 0; align-items: center; } .form-item label { width: 90px; text-align: right; margin-right: 12px; } .form-item input { flex: 1; padding: 6px; border: 1px solid #ccc; border-radius: 4px; } /* 移动端：横向改为上下排列 */ @media (max-width: 600px) { .form-item { flex-direction: column; align-items: flex-start; } .form-item label { text-align: left; margin-bottom: 6px; } } </style> <form> <div class="form-item"> <label>用户名：</label> <input type="text"> </div> <div class="form-item"> <label>密码：</label> <input type="password"> </div> <div class="form-item"> <label></label> <button>提交</button> </div> </form> 优点 1.结构简洁，样式与结构分离，只改 CSS 就能调整布局 2.天然支持响应式，手机端自动上下排版 3.可自由控制间距、对齐、美化样式 4.无浮动塌陷、表格冗余标签问题 五、表单布局通用美化要点 1.统一间距：给表单项统一上下外边距，页面不拥挤 2.输入框美化：圆角、浅边框、focus 选中高亮 css input:focus { border-color: #409eff; outline: none; } 3.标签对齐：固定 label 宽度，全部右对齐，视觉整齐 4.表单居中：外层容器设置宽度 + margin:0 auto 5.统一高度：输入框、按钮高度保持一致 六、两种表单布局对比 表格 | 布局方式 | 优势 | 劣势 | 使用场景 | | ----------- | ---------- | ------------ | --------------- | | Table 表格表单 | 上手简单，自动对齐 | 代码冗余，移动端适配差 | 课堂练习、简单静态页面 | | Div+Flex 表单 | 灵活、响应式、易维护 | 需要掌握 flex 基础 | 企业官网、后台管理、移动端页面 | 七、补充：垂直单列表单布局 适合移动端、简短信息填写，直接上下排列，无需横向 flex： css .form-item { margin: 12px 0; } label { display: block; margin-bottom: 5px; }