JavaWeb学习笔记--day01

HTML表单标签

<form></form> 定义一个表单范围
-属性
	**action：提交到的地址 默认本页面
	**method：表单提交方式
		-常用的两种提交方式：get 与 post	默认get
		get与post的区别：
		*get请求地址栏会携带提交的数据，post不会携带，而是放到请求体里
		*get请求安全级别低于post请求
		*get请求的请求数据有大小限制，post则没有
	**enctype：做文件上传时需要用到这个属性

输入项：可以输入内容或者选择内容的部分
	-大部分的输入项格式： <input type="输入项的类型"/>
	在输入项中需要有一个name属性
	*** 普通输入项：<input type="text"/>
	*** 密码输入项：<input type="password"/>
	*** 单选输入项：<input type="radio"/>
		-在里面需要属性name
		-name属性必须相同
		-必须有一个value值
			****实现默认选中的属性--checked="checked"
	***复选输入项：<input type="checkbbox"/>
		-在里面需要属性name
		-name属性必须相同
		-必须有一个value值
		****实现默认选中的属性--checked="checked"
	***文件输入项：<input type="file"/>
	***下拉输入项：
		<select name="birth">
			<option value="1991">1991<option/>
			<option value="1992">1992<option/>
		</select>
		****实现默认选中的属性--selected="selected"
	***文本域：<textarea></textarea>
		属性：cols列，rows行
	***隐藏项：<input type="hidden"/>
	***提交按钮：<input type="submit" value="显示文本"/>
	-使用图片提交：<input type="image" scr=“../” />
	***重置按钮：<input type="reset" value="重置"/>
	***普通按钮（跟js一起用）：<input type="button" value="显示文本"/>

示例代码

<form action="hello.html">
	手机号码:<input type="text" name="telnumber" /><br />
	创建密码:<input type="password" name="pwd" /><br />
	性别:<input type="radio" name="gender" value="male" />男 <input type="radio" name="gender" value="female" checked="checked"/>女<br />
	爱好:<input type="checkbox" name="habbit" value="ymq" />羽毛球<input type="checkbox" name="habbit" value="ppq" />乒乓球<input type="checkbox" name="habbit" value="pq"  checked="checked"/>排球<br />
	文件:<input type="file" /><br />
	生日:<select name="birth">
				<option value= "0">请选择</option>
				<option value= "1991">1991</option>
				<option value= "1992" selected="selected">1992</option>
				<option value= "1993">1993</option>
			<select/><br/>
	自我描述:<textarea cols="10" rows="10" name="tex"></textarea><br/>
	隐藏项:<input type="hidden" name="hid" /><br /><br/>
	<input type="submit" value="注册" /><br />
	<input type="reset" value="重置" /><br />
	<input type="image" scr=" " /><br />
	<input type="button" value="普通按钮" /><br />
</form>

表单提交方式

*使用submit提交
	<form> <input type="submit"></form>
*使用button提交
	function form1(){
		//获取form
		var form1=document.getElementById("form1");	
		form1.action="hello.html"
		form1.submit();
	}
*使用超链接提交
	<a href="hello.html?username=123456">使用超链接提交</a>
*   onclick:鼠标点击事件
	onchange:改变内容(select搭配)
	onfocus:获得焦点
	onblur:失去焦点

资料来源：黑马程序员教学视频