1.常见的表单控件:
单行文本框、密码框、文本域、单选按钮、复选框、下拉列表框、提交表单、上传文件。一个表单可能有多个表单控件，每种控件收集不同的信息。服务器需要知道用户输入的每一条数据输入了哪个表单元素。
2.表单结构:
<form>：使用<form>元素来创建表单，表单里的表单控件位于<form>元素中。每个<form>元素都应该设置action特性，通常还要设置method特性和id特性。
action：此特性是服务器上的一个页面的URL，这个页面用来在用户提交表单的时候接受表单的信息，指定数据将要发送到哪个页面。
method：表单的提交可以采用以下两种方法之一：get或post。get适用于短表单、不需要加密的文件上传。post适用于非常长、含有敏感信息、以及安全性；要求高的文件上传。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单结构</title>
</head>
<body>
<form action="http://www.example.com/subscribe.php" method="get">
<p>This is where the form controls will appear.</p>
</form>
</body>
</html>
3.单行文本行:<input>元素用来创建多种不同的表单控件，其type特性的值决定了它将要创建哪种控件。
type:当type特性的值为text时，<input>元素会创建一个单行文本框。
name:当用户向表单中输入信息时，服务器需要要知道每条数据被输入到了哪个表单控件。
size:用来指定文本框的宽度。
maxlength:可使用maxlength来限制用户在文本区域输入字符的数量，它的值为用户可以输入字符的最大数量。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行文本框</title>
</head>
<body>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="4" maxlength="4"/>
</p>
</form>
</body>
</html>
4.单选按钮:
type=" radio"时，单选按钮只能让用户从一系列选项中选择其中一个。
name:name特性与用户所选择的值一同发送到服务器。当一个问题以单选按钮的形式来给用户提供了一系列答案时，用户回答这个问题的所有单选按钮的name特性值都应该相同。
value:value特性为选项指定了被选中时要发送到服务器的值。
checked:checked特性用来指定当页面加载时(如果有的话)哪个值会被选中。这个特性的值为checked，同一组中的单选按钮只能有一个使用此特性。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选按钮</title>
<body>
</head>
<form action="http://www.example.com/profile.php">
<p>Please select your favirote genre:
<br/>
<input type="radio" name="genre" value="rock" checked="checked"/>Rock
<input type="radio" name="genre" value="pop"/> Pop
<input type="radio" name="genre" value="jazz"/>Jazz
</p>
</form>
</body>
</html>
5.复选框:
type="checkbox"：复选框允许用户在回答一个问题时选择（和取消选择）一个或多个特性。
name:name特性与用户选择项的值一并发送到服务器。
value:value特性指定复选框在被选中时需要发送到服务器的值。
checked:checked特性表明这个复选框在页面加载时将被选中。如果使用checked特性，它的值应该是checked。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
<form action="http://www.example.com/profile.php">
<p>Please select your favorite music service(s):
<br/>
<input type="checkbox" name="service" vlaue="itunes" checked="checked"/>iTunes
<input type="checkbox" name="service" vlaue="lastfm"/>Last.fm
<input type="checkbox" name="service" value="spotify"/>Spotify
</p>
</form>
</body>
</html
6.下拉列表框:
<select>：下拉列表框让用户在一个下拉列表中选择其中的一个选择。<select>元素用来创建下拉列表框，它包含两个或者两个以上的<option>元素。
name:name特性指定这个表单控件的名称，此名称与用户选择的选项值一并发送到服务器。
<option>元素用于指定用户可以选择的选项。在开始标签<option>和</option>之间的文字将显示在下拉列表中。
value:<option>元素使用value特性来指定选项的值。
selected:selected特性可以用来指定当页面加载时被选中的选项，selected特性的值应该是selected。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表框</title>
</head>
<body>
<form action="http:www.example.com/profile.php">
<p>what device do you listen to music on?</p>
<select namr="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
</body>
</html>
7.文本域:
<textarea>元素用来创建多行文本框，与其他的input元素不同，<textarea>元素并非空元素，因此它包含起始标签和结束标签。
cols:此特性指定文本域有多宽(以字符的数量来衡量)
rows:指定文本域在纵向上占据的行数。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本域(多行文本框)</title>
</head>
<body>
<form action="http://www.example.com/comments.php">
<p>What did you think of this gig?</p>
<textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>
</form>
</body>
</html>
8.密码框:
<input>
type="password”:当type特性的值为password时，<input>元素会创建一个用起来和单行文本框非常类似的文本框，唯一的不同之处在于其中的字符被掩盖了。
name:name特性表明密码框的名称，它将与用户输入的密码一同发送到服务器。
size:用来指定文本框的宽度。
maxlength:可使用maxlength来限制用户在文本区域输入字符的数量，它的值为用户可以输入字符的最大数量。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>密码框</title>
</head>
<body>
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="13" maxlength="30"/>
</p>
<p>Password:
<input type="password" name="password" size="15" maxlength="30"/>
</p>
</form>
</body>
</html>
9.文本上传域:
<input>
type="file":这个类型的input会创建一个后面附有browse按钮的类似文本框的控件。如果允许用户上传文件，必须将<form>元素上的method特性设为post。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文件上传域</title>
</head>
<body>
<form zction="http://www.example.com/upload.php" mothod="post">
<p>Upload your song in MP3 format：</p>
<input type="file" name="user-song"/><br/>
<input type="submit" value="Upload"/>
</form>
</body>
</html>
10.提交按钮
<input>
type="submit":提交按钮用来将表单发送到服务器。
name:可以使用name特性但不是必需的。
value:value特性用于控制在按钮上显示的文本。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>提交按钮</title>
</head>
<body>
<form action="http://www.example.com/subscrible.php">
<p>
Subscribe to our email list:
</p>
<input type="text" name="email"/>
<input type="submit" name="subscribe" value="Subscribe"/>
</form>
</body>
</html>