xiaozhuzhu77

导航

 

form表单

表单结构:通常要设置action,method,ID属性

  1.   action:该属性值是服务器上一个页面的URL,此页面是在用户提交表单时接受表单信息
  2.    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?

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?

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.)

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

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

Gender:

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

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

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:


Your Review:

Would you visit again?



posted on 2014-12-11 14:59  xiaozhuzhu77  阅读(300)  评论(1编辑  收藏  举报