form表单标签的简单使用

form表单标签<form></form>：

- 1.作用：收集客户信息

注意：在写radio，checkbox（单选，多选）的时候，一定要写name和value；name属性是分组，value属性设置值，提交的参数形式：name值=value值。select标签（下拉栏）的name在select中，value在其子标签option中

- 2.form的属性：

主要是action和method

属性	值	说明
accept	MIME_type	HTML 5 中不支持。
accept-charset	charset_list	规定服务器可处理的表单数据字符集。
action	URL	规定当提交表单时向何处发送表单数据。
autocomplete	on、off	规定是否启用表单的自动完成功能。
enctype	见说明	规定在发送表单数据之前如何对其进行编码。
method	get、post	规定用于发送 form-data 的 HTTP 方法。
name	form_name	规定表单的名称。
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证。
target	_blank、_self、_parent、_top、framename	规定在何处打开action URL。

method：get，post

post和get的区别

get: 提交参数在地址栏上，不安全，提交数据量有限
post：提交参数在请求体中，相对安全，提交数据量无上限
注意：文件上传必须用post

- 3.form三大子标签：

其中三大子标签有：input，select，textArea

3.1 input：

input的属性：

属性名	属性说明
type	定义表单输入项input的组件类型详见下一个表格*type属性值说明
name	组件名。给组件起一个名字 作用：提交时 name属性对应的值是参数名，用户输入的数据是参数值 form.html?username=lucy&password=666
value	组件默认值。如果是单选框或者复选框：需要手动给其设置值
checked	设置单选框/复选框的默认选中状态
readonly	设置该标签的参数值只读，用户无法手动更改，参数正常提交。
disabled	设置该标签不可用（禁用），参数值无法更改，参数不能提交
size	组件的长度

input-type属性的取值（input的主要属性）

type属性：

取值	说明
text	文本框
password	密码输入框（加密）
radio	单选框（name分组，value设置值）
checkbox	多选框（name分组，value设置值）
file	文件输入框
color	取色器
number	数字，只能输入数字
email	只能输入email格式
date	日期输入框
button	按钮
submit	提交按钮
image	图片按钮
reset	重置按钮
hidden	隐藏域

3.2 select：下拉选

select属性：name(名)，multiple(可以多选)multiple='multiple'
select子标签：
<option value="">数据</option>
option属性：value（值）,selected（selected=‘selected’）表示被选中，跟radio的checked用法一样

<select name="selectSth">
	<option value ="drinking">喝酒</option>
	<option value ="smoking">抽烟</option>
	<option value ="sleeping" selected="selected">睡觉</option>
</select>

注意：select必须有name属性，不然表单数据拿不到；option必须有value属性，不然拿到的属性是on

3.3 textArea：文本域

拥有固定长度和宽度的文本输入框 并且宽度和长度可以更改
cols：宽度
rows：高度
注意：都为数字
css属性：resize:none;可以禁止更改尺寸

<textarea cols="10" rows="5"></textarea>

表单提交问题:

提交表单时，input必须有name属性，不然提交不到服务器
1.需要把所有填写好的数据都需要传递到后台服务器
2.传递给后台服务器的时候需要拼写具体的信息 而不是on（在单选或多选的时候，没有设置value属性，会显示on；如：sex=on）

标签的共有属性：

name属性：
1.可以将多个单选和复选设置为一组
2.可以把数据传递到后台服务器
传递到后台服务器的数据格式：url地址?key=value&key1=value1…

value属性:
1.可以为按钮定义一个名称，若按钮已经存在默认的名称 那么在进行value设置的时候会覆盖默认名称
2.设置为某个标签的值。传递参数是 name=value

form表单的默认值设置：

1、针对于text和password 设置value属性即可
2、针对于radio和checkbox 设置被选中：checked=‘checked’ 或者简写为checked
3、针对于下拉选 设置被选中：selected=‘selected’ 或者简写为selected 需要写在option标签上
4、针对于文本域 直接在标签体中设置值即可

例子1(整合)：

<form action="" method="">
			
			text：<input type="text" name="name"  /><br />
			password：<input type="password" name="pwd" /><br />
			radio：<input type="radio" name="sex" value="man" checked="checked"/>radio1 
			<input type="radio" name="sex" value="women" />radio2
			<br/>
			checkbox：<input type="checkbox" name="hobby" value="sing"/>checkbox1 
			<input type="checkbox" name="hobby" value="dance"/>checkbox2
			<input type="checkbox" name="hobby" value="rap" checked="checked" />checkbox3
			<br />
			date:<input type="date" name="date"/><br/>
			number:<input type="number" name="number"/><br/>
			email:<input type="email" name="email" /><br/>
			color:<input type="color" name="color" /><br/>
			
			file：<input type="file" name="file" /><br/>
			<input type="submit"  value="submit" />
			<input type="reset" value="reset"/>
			<input type="button" value="button" />
			<input type="image" value="img" />
			
			<br/><br/>
			select：<select name="like" multiple="multiple">
				<option value ="drinking">option1</option>
				<option value ="smoking">option2</option>
				<option value ="sleeping">option3</option>
			</select><br/>
			
			<textarea name="自我介绍" rows="10" cols="20">textarea</textarea>
			
</form>

效果图：

点击提交或image的时候，会提示格式。number和email会有校验


提交的参数：

http://127.0.0.1:8848//form/form1.html?name=&pwd=&sex=man&hobby=rap&date=&number=&email=&color=%23000000&file=&%E8%87%AA%E6%88%91%E4%BB%8B%E7%BB%8D=textarea

例子2（readonly和disable）：

<form action="" method="get">
			text1(readonly):<input type="text" name="text1" readonly="readonly" value="只能看不能输入" /><br/>
			text2(disabled):<input type="text" name="text2" disabled="disabled" /><br/>
			radio:<input type="radio" name="radio" value="radio1value" />radio1
			<input type="radio" name="radio" value="radio2value" readonly="readonly"/>radio2(readonly)
			<input type="radio" name="radio" value="radio3value" disabled="disabled"/>radio3(disabled)<br/>
			<input type="submit" value="submit"/>
		</form>

注意：**对于text标签，readonly只能读不能输入，disabled也只能读不能输入，且传参的时候不能传disabled。

对于radio，readonly也能选，但是disabled修饰的radio不能用，同样不能传参。**