html:表单

最新推荐文章于 2024-04-16 11:00:11 发布

xiazdong

最新推荐文章于 2024-04-16 11:00:11 发布

阅读量1.3k

点赞数 1

分类专栏：【Html、XHtml、CSS】文章标签： html input action web服务服务器 button

本文链接：https://blog.csdn.net/xiazdong/article/details/6817723

版权

【Html、XHtml、CSS】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<form>元素：一切表单的开始

表单就像是一张单子，里面包含了单选、复选、输入框等。

表单都位于<form>中，当然<form>可以包含其他的XHTML标记。

form中不能嵌套form。

当用户填写好一个表单后，数据以“名/值”对的形式发送给服务器，名字是表单控件的名称，值是用户输入的内容。

比如有一个文本输入框,name = "txt",value就是输入的内容，单击submit后，就以txt=***的形式发送。

一次只能向web服务器发送一个表单数据。

<form>属性：

(1)action：web服务器接收处理表单数据的页面或程序。

(2)method：get或post传送数据，get就是将数据包含在URL中，post则是隐藏在http头中。

(3)id：唯一标识form元素。

(4)onsubmit：在传送给web服务器之前先运行一段脚本，检查数据的正确性。

(5)onreset：清空表单所有内容，对应一个脚本函数。

(6)accept：接受的文件的类型，比如"image/gif"

(7)target：提交表单后生成的页面加载到哪个页面。

表单控件：放在<form>中

1.文本输入：

(1)单行文本输入text

name和value属性将作为名/值对发送给服务器。

size指定文本输入框的宽度。

maxlength指定最多输入的字符数。

(2)密码文本输入password

(3)文本区域textarea元素

默认文本

</textarea>

textarea属性：

(1)rows:

(2)cols:

(3)wrap:是否换行，virtual或phyical可选。

2.按钮：

按钮可以通过input进行创建也可以通过button元素进行创建。

(1)submit：用于提交给服务器数据，<input type = "submit" name = "button" value = "OK"/> value表示按钮上显示的字

(2)reset：把所有表单中的组件复位，<input type = "reset" name = "resetbutton" value = "Reset"/>

(3)button：触发某个脚本，onClick.

(4)image：以图像作为按钮,当单击后，就发送名/值，值是点击的（x，y）坐标，<input type = "image" src = "*.jpg" name = "imageButton"/>

3.多选框checkbox:

<input type = "checkbox" name = "name" value = "value1"/>value1<br />

<input type = "checkbox" name = "name" value = "value2"/>value2<br />

以上是两个多选按钮，因为name属性值一样，因此归为一个组。

一个复选框可以表示状态的开和关。

4.单选按钮radio：

<input type = "radio" name = "name" value = "value1"/>value1<br />

<input type = "radio" name = "name" value = "value2"/>value2<br />

以上是一组单选按钮，因为name属性值一样，只能同时选一个。

5.选项框：

</select>

select中的常用属性：

(1)name

(2)multiple：允许多选。

(3)size：创建滚动框，并在一个框中容纳size个元素

6.文件选项框：file

规定：form 中一定要有 enctype = "multipart/form-data" method = "post"

综合实例：

<html>
	<head><title>demo</title></head>
	<body>
		<h1>表单案例：</h1>
		<ol>
			<li><a href = "#list1">文本框</a></li>
			<li><a href = "#list2">复选框</a></li>
			<li><a href = "#list3">单选按钮</a></li>
			<li><a href = "#list4">选项框</a></li>
			<li><a href = "#list5">文件选项框</a></li>
		</ol>
		<hr />
		<h2><a id = "list1">单行文本框案例</a></h2>
		<form action = "http://blog.csdn.net/xiazdong" method = "post" id = "form1">
			UserName:<input type = "text" name = "txtInput1" value = ""/><br />
			Password:<input type = "password" name = "pwdInput1" value = ""/><br />
			留言：<br /><textarea name = "area1" rows = "3" wrap = "physical"></textarea><br />
			<input type = "submit"/><input type = "reset" value = "Clear"/>
		</form>
		<br /><br /><br />
		<h2><a id = "list2">复选框案例</a></h2>
		<form action = "http://blog.csdn.net/xiazdong" method = "post" id = "form2">
			<input type = "checkbox" name = "Book" value = "Book1" checked = "checked"/>Book1<br />
			<input type = "checkbox" name = "Book" value = "Book2"/>Book2<br />
			<input type = "checkbox" name = "Book" value = "Book3"/>Book3<br />
			<input type = "checkbox" name = "Book" value = "Book4"/>Book4<br />
		</form>	
		<br /><br /><br />
		<h2><a id = "list3">单选按钮案例</a></h2>
		<form action = "http://blog.csdn.net/xiazdong" method = "post" id = "form3">
			<input type = "radio" name = "Book" value = "Book1"/>Book1<br />
			<input type = "radio" name = "Book" value = "Book2"/>Book2<br />
			<input type = "radio" name = "Book" value = "Book3"/>Book3<br />
			<input type = "radio" name = "Book" value = "Book4"/>Book4<br />
		</form>	
		<br /><br /><br />
		<h2><a id = "list4">选项框案例</a></h2>
		<form action = "http://blog.csdn.net/xiazdong" method = "post" id = "form4">
			<select name = "Booklist">
				<optgroup label = "Book">
				<option name = "Book1" value = "Book1">Book1</option>
				<option name = "Book2" value = "Book2">Book2</option>
				<option name = "Book3" value = "Book3">Book3</option>
				<option name = "Book4" value = "Book4">Book4</option>
				</optgroup>
			</select>
		</form>	
		<br /><br /><br />
		<h2><a id = "list5">文件选项框案例</a></h2>
		<form action = "http://blog.csdn.net/xiazdong" method = "post" id = "form5" enctype = "multipart/form-data">
			<input type = "file" name = "file"/>
			<br />
			<input type = "submit" />
		</form>	
		</body>
</html>

7.标签<label>

label中的for属性表示这个label对应哪个表单控件。

8.<fieldset>和<legend>

fieldset类似于一个框，把相关的控件都框在一起。

legend就是fieldset的名字。

. . .

</fieldset>

注意：fieldset一定要在table的外面。

9.焦点：tabindex属性

如果一个组件被禁用，则不能参与焦点。

10.readonly和disable属性：

readonly：只读，但是能够发送给服务器数据。

disable：禁用，不能把数据发送给服务器。

HTTP get和post：

get优点：可以添加书签。

get缺点：不能处理大量数据和敏感数据。

综合实例：

<html>
	<head><title>Registration</title></head>
	<body>
		<h1>User Registration</h1>
		<b>Please complete the following form to register with our site:</b><br />
		<fieldset>
		<legend>About <u>Y</u>ou(Alt+Y)</legend>
			<table>
				<tr>
					<td><label for = "user">User name:</label></td>
					<td><input type = "text" id = "user" value = ""/></td>
				</tr>
				<tr>
					<td><label for = "password">Password:</label></td>
					<td><input type = "password" id = "password" value = ""/></td>
				</tr>
				<tr>
					<td><label for = "confirm">Confirm Password:</label></td>
					<td><input type = "password" id = "confirm" value = ""/></td>
				</tr>
				<tr>
					<td> </td>
					<td> </td>
				</tr>
				<tr>
					<td><label for = "first">First name:</label></td>
					<td><input type = "text" id = "first" value = ""/></td>
				</tr>
				<tr>
					<td><label for = "last">Last name:</label></td>
					<td><input type = "text" id = "last" value = ""/></td>
				</tr>
				<tr>
					<td> </td>
					<td> </td>
				</tr>
				<tr>
					<td><label for = "email">Email address:</label></td>
					<td><input type = "text" id = "email" value = ""/></td>
				</tr>
				<tr>
					<td> </td>
					<td> </td>
				</tr>
				<tr>
					<td><label>Gender:</label></td>
					<td>
						<input type = "radio" name = "radioButton"/>Male<br />
						<input type = "radio" name = "radioButton"/>Female<br />
					</td>
				</tr>
			</table>
		</fieldset>
		<fieldset>
		<legend>About <u>U</u>s(Alt+U)</legend>
			<table>
				<tr>
					<td><label for = "select">How did you hear about us?</label></td>
					<td>
						<select id = "select" name = "select">
							<option selected = "selected" value = "Select answer">Select answer</option>
							<option value = "Hello">Hello</option>
						</select>
					</td>
				</tr>
				<tr>
					<td><label for = "check">Please select this box if you wish to join us.</label></td>
					<td><input type = "checkbox" id = "check"/></td>
				</tr>
			</table>
		</fieldset>
	</body>
</html>