表单入门

表单用来收集用户输入，比如登录、搜索、留言。

输入框 <input>

<input type="text" placeholder="请输入姓名">
<input type="email" placeholder="请输入邮箱">
<input type="password" placeholder="密码">
<input type="number" placeholder="年龄">

• type：输入类型（text / email / password / number 等）
• placeholder：占位提示文字

下拉选择 <select>

<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
</select>

文本域 <textarea>

<textarea rows="3" placeholder="说点什么..."></textarea>

一个完整表单

<form action="/submit" method="post">
  <label>姓名：<input type="text" name="name"></label><br>
  <label>邮箱：<input type="email" name="email"></label><br>
  <button type="submit">提交</button>
</form>

属性	作用
action	提交地址
method	提交方式（get / post）
name	字段名，提交时作为键
label	关联说明文字，点击可聚焦输入框

注意

每个输入框都要有 name 属性，否则提交时后台拿不到数据。<label> 关联输入框对无障碍和 SEO 都有帮助。