表单结构：通常要设置action，method，ID属性
- action：该属性值是服务器上一个页面的URL，此页面是在用户提交表单时接受表单信息
- method：采用get和post方法
a) get：使用该属性时，表单中的值被附加在由action所指定的URL末尾，get方法适用于以下两种情形
1.短表单（如搜索框）;
2.只从web服务器上检索数据的情形（不发送那些在数据库中要添加或删除的数据);
b) post:使用该方法时，表单中的值被放在HTTP头自信自中进行发送。如果你的表单存在以下情况就用post方法
1.允许用户上传文件
2.非常长
3.包含敏感信息（密码等）
4.对数据库中的信息进行增删改查
1.单行文本框
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15" maxlength="30" />
</p>
</form>
2.密码框
<html>
<head>
<title>Password Input</title>
</head>
<body>
<form action="http://www.example.com/login.php">
<p>Username:`
<input type="text" name="username" size="15" maxlength="30" />
</p>
<p>Password:`
<input type="password" name="password" size="15" maxlength="30" />
</p>
</form>
</body>
</html>
Password Input
3.文本域（多行文本框）
<html>
<head>
<title>Textarea</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>
Textarea
4.单选按钮
<html>
<head>
<title>Radio Button</title>
</head>
<body>
<form action="http://www.example.com/profile.php">
<p>Please select your favorite 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>
Radio Button
5.复选按钮
<html>
<head>
<title>Checkbox</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" value="itunes" checked="checked" /> iTunes
<input type="checkbox" name="service" value="lastfm" /> Last.fm
<input type="checkbox" name="service" value="spotify" /> Spotify
</p>
</form>
</body>
</html>
Checkbox
6.下拉菜单（下拉列表）
<html>
<head>
<title>Drop Down List Box</title>
</head>
<body>
<form action="http://www.example.com/profile.php">
<p>What device do you listen to music on?</p>
<select name="devices">
<option value="ipod">iPod</option>
<option value="radio">Radio</option>
<option value="computer">Computer</option>
</select>
</form>
</body>
</html>
Drop Down List Box
7.多选框
<html>
<head>
<title>Multiple Select Box</title>
</head>
<body>
<form action="http://www.example.com/profile.php">
<p>Do you play any of the following instruments? (You can select more than one option by holding down control on a PC or command key on a Mac while selecting different options.)</p>
<select name="instruments" size="3" multiple="multiple">
<option value="guitar" selected="selected">Guitar</option>
<option value="drums">Drums</option>
<option value="keyboard" selected="selected">Keyboard</option>
<option value="bass">Bass</option>
</select>
</form>
</body>
</html>
Multiple Select Box
8.文件上传域
<html>
<head>
<title>File Input Box</title>
</head>
<body>
<form action="http://www.example.com/upload.php" method="post">
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
</form>
</body>
</html>
File Input Box
9.提交按钮
<html>
<head>
<title>Submit Button</title>
</head>
<body>
<form action="http://www.example.com/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="submit" name="subscribe" value="Subscribe" />
</form>
</body>
</html>
Submit Button
10.图像按钮
<html>
<head>
<title>Image Button</title>
</head>
<body>
<form action="http://www.example.org/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="http://xiaozhuzhu77.qiniudn.com/subscribe.jpg" width="100" height="20" />
</form>
</body>
</html>
Image Button
11.按钮和隐藏控件
<html>
<head>
<title>Button and Hidden Controls</title>
</head>
<body>
<form action="http://www.example.com/add.php">
<button><img src="http://xiaozhuzhu77.qiniudn.com/add.gif" alt="add" width="10" height="10" /> Add</button>
<input type="hidden" name="bookmark" value="lyrics" />
</form>
</body>
</html>
Button and Hidden Controls
12.标签表单控件
<html>
<head>
<title>Labelling Form Controls</title>
</head>
<body>
<form action="http://www.example.com/subscribe.php">
<label>Age: <input type="text" name="age" /></label>
<br/ >
Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
</form>
</body>
</html>
Labelling Form Controls
13. 组合表单元素
<html>
<head>
<title>Grouping Form Elements</title>
</head>
<body>
<form action="http://www.example.com/subscribe.php">
<fieldset>
<legend>Contact details</legend>
<label>Email:<br /><input type="text" name="email" /></label><br />
<label>Mobile:<br /><input type="text" name="mobile" /></label><br />
<label>Telephone:<br /><input type="text" name="telephone" /></label>
</fieldset>
</form>
</body>
</html>
Grouping Form Elements
HTML5：表单验证
<html>
<head>
<title>HTML5 Form Validation</title>
</head>
<body>
<form action="http://www.example.com/login/" method="post">
<label for="username">Username:</label>
<input type="text" name="username" required="required" /></title><br />
<label for="password">Password:</label>
<input type="password" name="password" required="required" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
HTML5 Form Validation
HTML5：日期控件
<html>
<head>
<title>HTML5 Date Input</title>
</head>
<body>
<form action="http://www.example.com/bookings/" method="post">
<label for="username">Departure date:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
HTML5 Date Input
HTML5：电子邮件和URL输入控件
<html>
<head>
<title>HTML5 Email Input</title>
</head>
<body>
<form action="http://www.example.org/subscribe.php">
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" value="Submit" />
<form action="http://www.example.org/profile.php">
<p>Please enter your website address:</p>
<input type="url" name="website" />
<input type="submit" value="Submit" />
</form>
</form>
</body>
</html>
HTML5 Email Input
HTML5：搜索输入控件
<html>
<head>
<title>HTML5 Search Input</title>
</head>
<body>
<form action="http://www.example.org/search.php">
<p>Search:</p>
<input type="search" name="search" placeholder="Enter keyword"/>
<input type="submit" value="Search" />
</form>
</body>
</html>
HTML5 Search Input
表单整体示例
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action="http://www.example.com/review.php" method="get">
<fieldset>
<legend>Your Details:</legend>
<label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br />
<label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br />
</fieldset><br />
<fieldset>
<legend>Your Review:</legend>
<p>
<label for="hear-about">How did you hear about us?</label>
<select name="referrer" id="hear-about">
<option value="google">Google</option>
<option value="friend">Friend</option>
<option value="advert">Advert</option>
<option value="other">Other</option>
</select>
</p>
<p>
Would you visit again?<br />
<label><input type="radio" name="rating" value="yes" /> Yes</label>
<label><input type="radio" name="rating" value="no" /> No</label>
<label><input type="radio" name="rating" value="maybe" /> Maybe</label>
</p>
<p>
<label for="comments">Comments:</label><br />
<textarea rows="4" cols="40" id="comments"></textarea>
</p>
<label><input type="checkbox" name="subscribe" checked="checked" /> Sign me up for email updates</label><br />
<input type="submit" value="Submit review" />
</fieldset>
</form>
</body>
</html>
Forms
