表单的基本结构
<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>
表单使用一个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>
radio表示单选框，但是只有在其name属性相同的情况下，几个单选框才能选择其中一个，否则没有设置好相同的name值，那么就可以选择多个单选框，就是去了其本意。
checkbox表示多选框，用户可以选择多个选项。
<label>，一种文本标签，它有一个属性for，这个属性对应的是radio或者checkbox的id值。如此设置以后，只要点击label的文本部分，就可以选择radio或者checkbox了。否则，必须要点击radio的圆圈圈或者checkbox的方格才能选中，选择区域过小。
select：下拉选择框，其子元素option表示下拉菜单的项。
表单设计原则
- 帮助用户不出错
- 尽早提示错误
- 扩大选择/点击区域
- 控件较多时要分组
- 主要动作和次要动作
