HTML表单控件
2014-12-11 14:59
162 查看
form表单
表单结构：通常要设置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>
Username:
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 Username:
Password:
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 What did you think of this gig?
Enter your comments...
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 Please select your favorite genre:
Rock Pop Jazz
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 Please select your favorite music service(s):
iTunes Last.fm Spotify
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 What device do you listen to music on?
iPod Radio Computer
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 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.)
Guitar Drums Keyboard Bass
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 Upload your song in MP3 format:
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 Subscribe to our email list:
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 Subscribe to our email list:
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
Add
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 Age:
Gender: Female Male
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 Contact details Email:
Mobile:
Telephone:
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 Username:
Password:
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 Departure date:
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 Please enter your email address:
Please enter your website address:
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 Search:
表单整体示例
<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 Your Details: Name:
Email:
Your Review: How did you hear about us? Google Friend Advert Other
Would you visit again?
Yes No Maybe
Comments:
Sign me up for email updates
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ext 2.0 渲染HTML表单 (含中文版日期选单控件)
- 今天遇到一个问题,原来在html的form中如果只有一个type="text"的控件,如果在text中点击回车键,就是自动提交表单!
- HTML 表单控件的汇总
- html中表单使用post方式提交,为什么没有值? get方式可以得到控件的值
- HTML中禁用表单控件的两种方法readonly与disabled
- php处理HTML表单控件命名中的特殊符号
- html浮动窗口_表单及表单控件
- 我教女朋友学编程Html系列(6)—Html常用表单控件
- HTML表单控件
- HTML原有的表单及表单控件(二)
- Asp.net提交HTML控件表单
- web学习—html标签—表单及其控件（一）
- HTML学习4----表单控件
- 使用css美化html表单控件详细示例(表单美化)
- 一起学asp.net基础文章二 服务器控件、客户端控件和html表单控件
- 一起学asp.net基础文章二 服务器控件、客户端控件和html表单控件
- html表单控件--锁定
- web学习—html标签—表单及其控件（三）
- HTML ——表单标记（html控件）
- PHP+JavaScript+HTML实现注册界面表单及日历控件