最快实现小型文本框应使用，需指定type、name、placeholder，用CSS重置边框、内边距、圆角和字体大小，禁用textarea因其天然多行且表单行为不同。
用 <input type="text"> 最快实现
要一个能打字的小文本框，直接用原生 <input> 就够了，不用 JS、不用框架。它默认就是单行、可编辑、带基础样式。
-
type="text"是必须写的，漏掉会退化成type="submit"或其他意外类型 - 加
placeholder提示文字更友好，比如placeholder="请输入用户名" - 加
id和name才能在表单提交时被后端收到，只写id不够 - 别依赖
size属性控制宽度——它按字符数算，响应式布局下完全不可靠
想让它「看起来」像设计稿里的小框？用 CSS 重置边框和尺寸
浏览器默认给 <input> 加了边框、内边距、圆角，和多数 UI 设计稿不一致，直接调样式就行。
- 先清掉默认样式：
border: 1px solid #ccc; padding: 4px 8px; border-radius: 4px; - 字体大小建议设为
14px或16px，太小难点击，太大占空间 - 别用
height硬设高度——它会和padding+border冲突，改用line-height配合padding控制垂直居中 - 移动端记得加
font-size: 16px，否则 iOS Safari 可能自动缩放整个页面
为什么不用 <textarea></textarea>？它真不是“小型”文本框
<textarea></textarea> 天然支持多行、换行、滚动条，哪怕你把它压成 20px 高，用户点进去一按回车就变两行——这不是“小型文本框”，这是埋雷。
- 即使加了
rows="1"和style="resize: none;"，它仍可能被拖拽拉高、支持Ctrl+Enter换行 - 表单序列化行为不同：
<input>提交的是单值字符串，<textarea></textarea>默认带换行符\n，后端解析容易出错 - 如果只是要输入邮箱、手机号、搜索关键词这类纯单行内容，用
<textarea></textarea>属于过度设计
防坑：focus 时的蓝色外框和 iOS 键盘弹起问题
Chrome/Firefox 默认 focus 有蓝色 outline，iOS Safari 弹键盘又常把输入框顶出可视区——这两个问题高频且隐蔽。
立即学习“前端免费学习笔记（深入）”；
- 去掉焦点外框用：
outline: none;，但必须配box-shadow: 0 0 0 2px #007bff;保证可访问性 - iOS 键盘顶飞输入框？确保父容器没设
position: fixed，且<input>在文档流里自然位置 - 别在
input上写autofocus—— 页面加载时自动聚焦，在 iOS 很可能触发键盘但立刻失焦，体验极差
<input type="text" name="q" placeholder="搜索...">，再套两行 CSS 重置，事情就完了。复杂点在于交互细节和边界情况，不是结构本身。 
