form（表单）

介绍

1、在现实生活中表单用于提交数据

2、在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器

---

form的属性

action（表单要提交的服务器的地址）

示例：
		<form action="">
		</form>

添加input表单项

1、文本框（type=“text”）

示例：

		<input type="text">

注：

数据要提交到服务器中，必须要为元素指定一个name属性值
		<input type="text" name="">

---

2、密码框（type=“password”）

示例：

		<input type="password">

注：

数据要提交到服务器中，必须要为元素指定一个name属性值
		<input type="password" name="">

---

3、提交按钮（type=“submit”）

示例：

		<input type="submit">

注：

		<input type="submit" value="">
			`value可以设置提交按钮的值`

---

4、单选按钮（type=“radio”）

示例：

		<input type="radio">

注：

1、设置name属性可以将多个单选按钮设为一个组。意思是假如两个input的name属性值设为一样的值，则这两个input是二选一的关系；name属性值不一样则没关系，即为多选

2、像这种选择框，必须指定一个value属性，value属性最终会作为用户填写的值传递给服务器

3、checked 可以将单选按钮设置为默认选中

示例：
	
	<input type"radio" name="" value="" checked>

---

5、多选框（type=“checkbox”）

示例：
	
	<input type"checkbox" name="test" value="1">
	<input type"checkbox" name="test" value="2">
	<input type"checkbox" name="test" value="3" checked>
	

注：

1、也可以设置checked设置为默认选中

2、name属性值应该相同

---

6、下拉列表（select）

示例：
	
	<select name="">
	
			<option value="i">选项一</option>
			
			<option value="ii">选项二</option>
			
			<option selected value="iii">选项三</option>
	</select>
	

注：

在option里可以设置selected属性值，将其选项设为默认选中

---

7、重置按钮（type=“reset”）

示例：
	
	<input type"reset">
		`重置按钮，重置成默认值`

---

8、普通按钮（type=“button”）

示例：
	
	<input type"button">
		`普通按钮`

---

9、颜色选择按钮（type=“color”）

示例：
	
	<input type"color">
		`颜色选择按钮`

注：

用的不多，兼容性不好。

---

10、邮件地址输入框（type=“email”）

示例：
	
	<input type"email">
		`邮件地址输入框`

注：

用的不多，兼容性不好。

---

button

1、button提交按钮

示例：
	
	<button type="submit">提交</button>
		`提交按钮`

---

2、button重置按钮

示例：
	
	<button type="reset">重置</button>
		`重置按钮`

---

3、button普通按钮

示例：
	
	<button type="button">按钮</button>
		`普通按钮`

---

注：

button与input的区别：

1、input是一个自结束标签，而button是成对出现的标签

2、成对出现意味着可以编写更加复杂的结构，例如可以在button里放一个img图片，即可把图片当作一个按钮。更加灵活

---

input属性

1、autocomplete（自动补全）

示例：

		<input type="text" name="" autocomplete="on">
		`打开自动补全`
		
		<input type="text" name="" autocomplete="off">
		`关闭自动补全`

注：

一个autocomplete属性只能设置一个inpt，想要全都设置可以直接在form里设置这个属性

示例：

		<form action=" " autocomplete="off">
	
		</form>

---

2、readonly（只读）

将表单项设置为只读，数据会提交

示例：

		<input type="text" name="" value="123" readonly>
		`将表单项设置为只读，数据会提交`
		

---

2、disabled（禁用）

将表单项设置为禁用，数据不会提交

示例：

		<input type="text" name="" value="123" disabled>
		`将表单项设置为禁用，数据不会提交`
		

---

3、autofocus（自动获得焦点）

将表单项设置为禁用，数据不会提交

示例：

		<input type="text" name="" autofocus>
		
		

---