HTML5表单控件尺寸应优先用CSS的width/height配合box-sizing:border-box控制，避免内联硬编码；textarea推荐cols/rows+CSS覆盖；select宜用min-height+padding；size属性仅对部分input有效且已基本弃用。
用 width 和 height 直接控制表单控件尺寸
HTML5 表单元素（如 、、）默认尺寸由浏览器决定，但可通过内联 CSS 或外部样式表调整。直接写 width 和 height 是最常用方式，但要注意：部分控件（如 type="checkbox" 或 type="radio"）对 height 支持有限，强行设高可能只拉伸容器而不动图标。
实操建议：
-
input[type="text"]、input[type="email"]等文本类控件，width有效，height可调但需配合padding和box-sizing: border-box才能精准控制视觉高度 -
textarea推荐优先用cols和rows属性（语义化且兼容性好），再用 CSS 覆盖：例如width: 100%; height: 120px; -
select在某些旧版 Safari 中不响应height，建议统一用min-height+padding模拟高度
用 style 属性或 CSS 类统一管理尺寸
硬编码 width/height 在 HTML 标签里容易失控，尤其当多个表单需要一致外观时。更可靠的方式是用 class 配合外部 CSS，同时启用 box-sizing: border-box 避免边框和内边距撑大实际宽度。
常见错误现象：设了 width: 200px;，但加上 padding: 10px; 和 border: 1px solid #ccc; 后，总宽变成 222px —— 这就是没设 box-sizing 的典型表现。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 全局重置表单控件盒模型：
input, select, textarea { box-sizing: border-box; } - 定义尺寸类，比如：
.form-control-sm { width: 120px; height: 28px; padding: 4px 8px; } .form-control-lg { width: 100%; max-width: 400px; height: 42px; padding: 8px 12px; } - 对
input[type="submit"]等按钮，注意line-height会影响垂直居中效果，纯靠height容易文字偏上或偏下
响应式场景下用 max-width 和 vw 替代固定像素
移动端或弹性布局中，固定 width: 300px 很快会溢出屏幕。此时应放弃绝对单位，改用相对单位或限制最大宽度。
使用场景包括：表单嵌在卡片内、全屏登录页、多列栅格中的表单项。
实操建议：
- 文本输入框推荐：
width: 100%; max-width: 320px;—— 兼顾伸缩性和防过宽 - 在视口较小时（如手机），可用
width: 90vw;，但注意vw包含滚动条宽度，极端窄屏下可能触发横向滚动，加max-width: 100%更稳妥 -
textarea建议保留min-width（如min-width: 280px），避免小屏下缩成一条细线导致输入困难
size 属性仅对部分 input 有效，别误用
size 是 HTML 原生属性，但它只对 type="text"、type="search"、type="tel"、type="url"、type="email" 和 type="password" 生效，表示“可见字符数”，不是像素宽度。它会被 CSS 的 width 覆盖，且在现代 UI 中基本被弃用。
容易踩的坑：
- 给
input[type="number"]设size="10"，多数浏览器忽略 —— 因为数字输入框不按字符宽度计算 - 设
size="5"并以为能精确控制为 5 字符宽，结果字体、缩放、中文/英文混排都会让实际宽度浮动 - 与
maxlength混淆：前者管显示宽度，后者管输入长度，两者完全无关
真正要控制尺寸，CSS 是唯一稳定路径；size 属性现在只适合极简静态页面或作为降级 fallback，别指望它在复杂布局里可靠工作。
