表单

表单的基本结构

  <form action="/index.php" method="get">
    <p>用户名：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="password"></p>
    <textarea cols="30" rows="10"></textarea>
    <p><button type="submit">提交</button></p>
  </form>

basic-form.jpeg

表单使用一个form标签。它有两个属性分别是action和method。
action的作用是当用户提交表单后，将表单中的数据提交到一个后台链接（服务器），由这个链接（如php，python等后台）来处理这些数据。
method：提交用户的数据由两种方式，分别是get和post。

input标签：标签用于搜集用户信息。
根据不同的 type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
type的值有很多：
text：输入框
password：密码输入框
button：按钮
submit：提交按钮
checkbox：多选框
radio：单选框
number：数字
email：邮件（有校验功能）
date：日期
等。

input中的name属性：
用户在输入框输入的数据，后台如何拿到？就可以根据这个name属性的值来定位到该input后取出其中的数据。如在php中，可以使用如下方法来获取username和password：

$username = $_GET['username'];
$password = $_GET['password'];

input中的value属性：
给输入框设置一个value值，不设置的话输入框为空，否则会显示value中的属性值。

input中的placeholder属性：输入框提示。
<input type="text" placeholder="请输入用户名" />

<textarea cols="30" rows="10"></textarea>：文本域，cols和rows分别为列数和行数。

---

  <form action="">
    <div>
      性别：
      <input type="radio" name="gender" id="male">  
      <label for="male">Male</label>
      <input type="radio" name="gender" id="female">
      <label for="female">Female</label>
    </div>
    <div>
      爱好：
      <input type="checkbox" id="basketball">
      <label for="basketball">篮球</label>
      <input type="checkbox" id="football">
      <label for="football">足球</label>
      <input type="checkbox" id="swim">
      <label for="swim">游泳</label>
    </div>
    <div>
      选择：
      <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
    </div>
  </form>

form.jpeg

radio表示单选框，但是只有在其name属性相同的情况下，几个单选框才能选择其中一个，否则没有设置好相同的name值，那么就可以选择多个单选框，就是去了其本意。

checkbox表示多选框，用户可以选择多个选项。

<label>，一种文本标签，它有一个属性for，这个属性对应的是radio或者checkbox的id值。如此设置以后，只要点击label的文本部分，就可以选择radio或者checkbox了。否则，必须要点击radio的圆圈圈或者checkbox的方格才能选中，选择区域过小。

select：下拉选择框，其子元素option表示下拉菜单的项。

---

表单设计原则

• 帮助用户不出错
• 尽早提示错误
• 扩大选择/点击区域
• 控件较多时要分组
• 主要动作和次要动作