HTML 表单元素入门：input、select 与常用控件

注册账号、搜索商品、提交订单——网页上所有需要用户输入的地方都离不开表单。这篇带你认识 HTML 表单的核心元素，看懂一个完整的输入界面是怎么搭起来的。

form：表单的容器

所有表单控件都要放在 <form> 里，它负责决定"收集完的数据提交到哪"：

<form action="/submit" method="post">
  <!-- 各种控件写在这里 -->
</form>

action 指定提交地址，method 常用 get（获取数据）和 post（提交数据）两种。单独的 input 放在 form 外面也能显示，但按回车就没有提交行为了。

input：最百变的控件

<input> 是表单里出场率最高的元素，靠 type 属性变换成各种形态：

<form>
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="pwd" placeholder="请输入密码">
  <input type="number" name="age" min="1" max="120">
  <input type="checkbox" name="agree" id="agree">
  <label for="agree">我已阅读并同意用户协议</label>
  <input type="radio" name="gender" value="m" id="g1">
  <label for="g1">男</label>
  <input type="radio" name="gender" value="f" id="g2">
  <label for="g2">女</label>
</form>

几个要点：

• name 是提交给服务器时的字段名，不写 name 的控件，数据不会被提交
• placeholder 是输入框里的灰色提示文字
• 同一组单选框要用相同的 name，这样才能做到只能选一个
• label 的 for 指向控件的 id，点文字也能选中控件，体验更好

select：下拉选择框

选项比较多的时候，用下拉框最省地方：

<select name="city">
  <option value="">--请选择城市--</option>
  <option value="bj">北京</option>
  <option value="sh" selected>上海</option>
  <option value="gz">广州</option>
</select>

selected 表示默认选中项；提交时发送的是 value 的值（比如 sh），而不是用户看到的文字，这一点别搞反了。

textarea：多行输入

自我介绍、留言这类内容一行放不下，用 <textarea>：

<textarea name="intro" rows="4" cols="30" placeholder="介绍一下自己吧"></textarea>

rows 和 cols 控制默认可见的行数和列数。注意 textarea 是双标签，初始内容写在标签中间，而不是用 value 属性。

button：触发提交

表单里的按钮默认就是提交按钮：

<form action="/search" method="get">
  <input type="text" name="kw" placeholder="搜索关键词">
  <button type="submit">搜索</button>
  <button type="reset">清空</button>
</form>

type="submit" 提交表单，type="reset" 把所有控件恢复默认值。点了提交，浏览器会把带 name 的控件打包成 kw=xxx 这样的格式发给 action 地址。

小结

这篇认识了表单五件套：form 容器、万能的 input、下拉框 select、多行文本 textarea 和提交按钮 button。记住两个关键点：控件要有 name 才会被提交；单选框靠相同的 name 分组。下一篇我们聊聊常用的 meta 标签和页面头部配置。