手把手式教学！ html之一大板块:表单

表单在网页中主要负责数据采集功能，目的是用户输入与服务器进行交互，也是html又一大板块，所以本期单独列举表单之内容，几乎是手把手式教学，希望能够对你有所帮助。

首先一个表单需要一个form标签

<form action="" method=""></form>

其中action的值是数据提交的服务器地址,method的值是数据提交的方法，有两个属性:get:查询服务器的数据和post:修改服务器的数据。一般采用post，因为更加安全，在提交表单时地址栏不会显示提交内容。

其次是表单类型

一般表单分为文本框，密码框，提交框，单选框，复选框，上传文件，重置按钮，图片按钮，下拉框，多行文本框和普通按钮。

名称	属性值	表单域
文本框	text	input
密码框	password	input
提交框	submit	input
单选框	radio	input
复选框	checkbox	input
下拉框	option	select
上传文件	file	input
多行文本框	textarea	textarea
图片按钮	image	input
重置按钮	reset	input
普通按钮	button	button

下面来细讲

文本框：

<form >
	 文本框:<input type="text" placeholder="提示" name ="name" 	value="默认值">
</form>

显示内容：

这里说明一下，placeholder值设置提示文本，value设置默认文本，如果加上disabled属性则将value值设置为不可更改。

密码框：

<form >
	 密码框:<input type="password" placeholder="提示" >
</form>

显示内容：

提交框:

<form >
	提交框：<input type="submit" value="点击提交">
</form>

显示内容：

单选框：

<form >
	单选：<input type="radio" name ="sex"  checked="checked">男
	<input type="radio" name ="sex" >女
</form>

显示内容：

这里说明一下，如果写上checked属性则表示默认选择这个单选选项，name值必须设置一致才能使其二选一，否则会出现多选现象。
复选框：

<form >
爱好:
		<label>
		<input type="checkbox" name="favorite"  />
		唱歌</label>
		<label>
		<input type="checkbox" name="favorite"  />
		跳舞</label>
		<input type="checkbox" name="favorite"  />
		游泳
		<br/>
		<input type="checkbox" name="favorite"  />
		看书
		<input type="checkbox" checked="checked" name="favorite"  />
		玩手机
</form>

显示内容：

这里说明一下，如果在一个input标签上嵌套label标签，则会使得点击文字也能选中该框。

下拉框：

		<form>学历
			<select size="1">
				<option selected>博士</option>
				<option>硕士</option>
				<option>本科</option>
				<option>大专</option>
			</select>
			<br>
			<br>
			学历
			<select size="3" multiple="multiple">
				<option selected>博士</option>
				<option>硕士</option>
				<option>本科</option>
				<option>大专</option>
			</select>
		</form>

显示内容：

这里说明一下，selected表示默认值，option设置每一个下拉选项，multiple代表显示滑动条，一般和size配套使用，size设置一次显示的内容有几个。

上传文件：

		<form>
			<input type="file" />
		</form>

显示内容：

多行文本框：

		<form>
			多行文本框：
			<br>
			<textarea rows="10" cols="30" >
			</textarea>
		</form>

显示内容：

图片按钮：

		<form>
			<input type="image" src="1.jpg">
		</form>

该图片可直接点击。

重置按钮：

		<form action="" method="post">
			<input type="reset" name="" id="" value="重置" />
		</form>

点击重置后所有表单数据清空，并设置为默认值。

普通按钮：

		<form action="" method="post">
			<button type="button">同意</button>
		</form>

显示内容：

以上涵盖了几乎所有表单涉及到的，几乎是手把手的教学，希望对你入门html或者复习html有帮助。谢谢观看！