别让表单变成“劝退页”：HTML 表单元素的正确打开方式

网页上的表单就像柜台前的登记表——设计得顺手，用户三下五除二就填完；弄得太啰嗦，人家转身就走。下面这份“速查表”带你把 HTML 表单里常用的几个小家伙认全，顺带说说它们最适合干嘛、怎么摆才顺眼。

1. <form>：先搭个柜台

<form action="/save" method="post" enctype="multipart/form-data">
  ……
</form>

• action 写后台“收件地址”
• method 用 post 比较低调，数据放信封里；搜索类场景才用 get 把参数挂 URL 上
• 传文件一定记得把 enctype 改成 multipart/form-data，不然后台只能收到空信封

2. 单排输入 <input>——最忙的老伙计

3. 多行码字 <textarea>——让留言有地方伸展

<textarea name="msg" rows="4" cols="40"
          placeholder="想对我们说点啥？"></textarea>

别拿 input 硬撑长文本，想写两句以上就用它，拉行高也不变形。

4. 下拉菜单 <select>——选项多但不占地

<select name="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
</select>

城市、省份、生日月份这类“固定列表”最适合。别忘了给 option 写 value，否则后台收到的是“北京”而不是“bj” 。

5. 按钮三兄弟 <button>

<button type="submit">提交</button>
<button type="reset">重写</button>
<button type="button" onclick="alert('hi')">普通按钮</button>

submit 才是“交卷”；reset 慎用，用户好不容易填完被你一键清空的体验很酸爽；button 默认没功能，全靠 JS 带节奏 。

6. 几个顺手的小机关

• required：空着就弹提示，省一次往返
• placeholder：灰字提示，输入即消失，别当标签用
• pattern="\d{11}"：自定义正则，11 位手机号一步到位
• autofocus：页面加载后光标自动飞到这里，一个页面只放一次
• disabled vs. readonly：前者完全锁死且不带数据，后者仅看不能改但随表提交

7. 最后喊个口号

把类型选对、属性写全，表单就成功了一半；剩下的交给 CSS 打扮、JS 加料，后台再补最后一刀校验。让用户“零思考”地填完，就是表单存在的意义。