HTML基础标签(下)(学习笔记)

1.HTML的表单

开发中很多页面都需要用户输入数据，提交到服务器，此时这个页面我们可以使用表单来完成！！
表单标签：<form></form> 
	单独写这个标签没有任何效果，必须通过表单输入项来控制！！！

2.HTML表单常用标签

普通输入框：<input type="text">
密码框：<input type="password">
单选按钮：<input type="radio" >
复选框：<input type="checkbox">
下拉列表：
	<select>
		<option></option>
		<option></option>
		<option></option>
	</select>
文本域：<textarea></textarea>
文件上传框：<input type="file"> 
提交按钮：<input type="submit">
普通按钮：<input type="button">
重置按钮：<input type="reset">
隐藏字段：<input type="hidden">

3.HTML表单常用标签的属性

要想点击提交按钮，能够将表单进行数据提交，需要为<form>标签指定属性！！！
3.1 <form>标签的属性：
	action:提交的位置(url地址) ======>>>> 这个我们在后面学习服务器端内容时候才会接触，这几天都是用#(点击提交按钮，页面不发生跳转)
	method:提交方式(get和post)
		默认值为get

3.2 get方式与post方式的区别:
	get请求方式，提交的数据在浏览器地址栏会显示！安全性相对较低！处理中文乱码比较麻烦！数据长度有限制！
	post请求方式，提交的数据不会在浏览器地址栏显示！安全性相对较高！处理中文乱码相对简单！数据长度没有限制！

3.3 普通输入框的属性【开发一般只需要name placeholder】
	name:要想普通输入框的数据能够提交到服务器端(通过这个name属性值来获取数据)，那么必须指定这个属性！！取值任意！建议：见名知意！
		构成的数据：提交的action的值?name属性值=用户输入的值  =====>>>前提是get请求方式！！！
	value:为普通文本输入框设置默认值！！！如果用户输入数据了，会覆盖默认值！！  =====>>>> 一般不会为普通输入框设置默认值
		通过value属性来控制最终提交到服务器端的值！！！

readonly：取值：readonly，当前输入框是只读状态(不能输入数据了)
required: 取值：required，当前输入框内容不能为空！(如果为空，不能提交这个表单)
maxlength：取值：数字，最大的长度为指定数字的字符数
size:取值：像素值px，设置输入框的宽度！！！
placeholder：取值：给出的具体提示信息(文字)
disabled：禁用当前输入项

3.4 密码输入框的属性【开发一般只需要name placeholder】
name:要想普通输入框的数据能够提交到服务器端(通过这个name属性值来获取数据)，那么必须指定这个属性！！取值任意！建议：见名知意！
构成的数据：提交的action的值?name属性值=用户输入的值&name属性值=用户输入的值 =====>>>前提是get请求方式！！！
例如：http://localhost:63342/day22_HTML&CSS_77/01_表单标签/02_表单标签属性.html?username=jack&password=123

	value:为普通文本输入框设置默认值！！！如果用户输入数据了，会覆盖默认值！！  =====>>>> 一般不会为普通输入框设置默认值
		通过value属性来控制最终提交到服务器端的值！！！

	readonly：取值：readonly，当前输入框是只读状态(不能输入数据了)
	required: 取值：required，当前输入框内容不能为空！(如果为空，不能提交这个表单)
	maxlength：取值：数字，最大的长度为指定数字的字符数
	size:取值：像素值px，设置输入框的宽度！！！
	placeholder：取值：给出的具体提示信息(文字)
	disabled：禁用当前输入项

3.5 单选按钮radio【name value】
	name：
		要想数据提交到服务器能够获取，必须提供name属性和值
		分组！！(性别的单选按钮和最高学历单选按钮)【同一组的name属性值必须一样！所有的单选按钮都能点！】
		互斥！！(只能选一个)
	
	value: 最终提交到服务器端的数据！！！ 取值也是任意的，一般与后面的文本内容一致！【不指定，出现的值是on】

	checked:取值：checked 默认选中！！！

3.6 复选框checkbox 【name value】
	name：
		要想数据提交到服务器能够获取，必须提供name属性和值
		分组！！(爱好和曾经居住过的城市)【同一组的name属性值必须一样！】

	value: 最终提交到服务器端的数据！！！ 取值也是任意的，一般与后面的文本内容一致！【不指定，出现的值是on】

	checked:取值：checked 默认选中！！！

3.7 下拉列表select
	name：要想数据提交到服务器能够获取，必须提供name属性和值

	value:提交到服务器端具体数据

	selected:默认选中！【在没有指定默认选中的前提下，第一个option会被选中！】

3.8 文本域 textarea【了解 开发会被富文本编辑取代！】
	name:服务器端通过name属性的值获取文本域中的数据
	cols:指定一行能显示多少个字符
	rows:多少行之后出现滚动条

3.9 文件上传窗口 input type="file"
	必须指定三块内容(文件上传三要素)：
		input的type属性值必须是file
		form标签的method属性值必须是post (get请求有大小限制!)
		form标签的enctype属性值必须是multipart/form-data  (默认值：application/x-www-form-urlencoded)
		multipart/form-data：将表单拆分为多个部分(每个输入项都是一个部分)！服务器端获得的数据都是字节！
		application/x-www-form-urlencoded：将整个表单所有输入项作为一个整体！服务器端获得的数据是字符！

3.10 按钮
	提交按钮submit：一般只需要设置value属性和值即可！！！默认值为 提交  【直接能够提交表单数据到action属性指定的位置】
	普通按钮button：必须设置value属性！(没有设置显示白板) 【点击没有任何效果，但是我们可以通过后面学习的javascript让其具备一定的功能】
	重置按钮reset:一般不需要设置任何属性(有默认值：重置)，它能够在用户输入数据错误的前提下，让所有输入项的数据还原(恢复为默认值)

3.11 隐藏字段
	在页面不显示，但是数据会跟随表单一并提交到服务器！
	会指定2个属性
		name:服务器通过name属性的值获取隐藏字段的数据
		value:隐藏字段具体的数值