html表单

表单标签

form表单:所有希望提交给服务器的数据都必须放在form表单里面
表单提交:
1.可以通过按钮提交
2.通过js提交
3.通过图片提交
action: 表单提交的服务器地址
method: 请求方式
get请求和post请求的区别:
get请求:
1.地址栏输入
2.form表单没有指定method属性
3.method属性为get
get请求传输的数据量较小,一般不能大于2KB
请求参数直接拼接在URL后面，不安全
POST请求:
1.设置请求方式post
post请求数据量大小不受限制,但往往取决于服务器的限制
post请求发送的请求参数以及对应的值放在HTML HEADER中传输，地址栏上看不到,安全性较高
开发中一般都是post

		input: 表示输入表单标签
					
		四要素
			type="" name="" id="" value=""
			type: 表示输入表单的类型
					text 表示文本类型
					sumbit: 表示当前输入表单是提交按钮
			name: 传输到服务器的数据所指定的键的信息   username(键) = zhangsan(值)
					name值必不可少
			value: 传输到服务器的数据所指定的值的信息 
			id: 输入表单组件的编号,一般配合js或者label标签使用
			placeholder: 输入提示
			
			提交格式:
			传输协议://服务器地址:端口/服务器路径? name=value&name=value;
			http://127.0.0.1:8848/day02_html2/server/server.html?username=admin&password=123456

<form action="../server/server.html" method="get">
			<!-- form表单:所有希望提交给服务器的数据都必须放在form表单里面 -->
			<label for="username">用户名:</label> <input type="text" name="username" id="username" value="" placeholder="请输入用户名..."/>
			<br>
			<label for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label> <input type="password" maxlength="6" name="password" id="password" value="" placeholder="请输入密码..."/>
			<br>
			<input type="submit" value="提交"/>
		</form>

单选按钮

name属性需要保持一致才能够达到单选的效果
向服务器提交的数据是 name和value的值

<form action="../server/server.html" method="get">
			
			<span>性别:</span> <input type="radio" name="gender" id="male" value="male" /> <label for="male">男</label>
				 <input type="radio" name="gender" id="female" value="female" /> <label for="female">女</label>
			<br>
			<input type="submit" value="提交"/>
		</form>

复选按钮

复选框是一键多值

<input type="checkbox" name="hobby" id="playBasketball" value="playBasketball" /> <label for="playBasketball">打篮球</label>
<input type="checkbox" name="hobby" id="playgame" checked value="playgame" /><label for="playgame">打游戏</label>
<input type="checkbox" name="hobby" id="swimming" value="swimming" /><label for="swimming">游泳</label>
<input type="checkbox" name="hobby" id="sleep" value="sleep" /><label for="sleep">睡觉</label> <br>

下拉框选项

<select name="game" id="game" multiple>
	<option value ="ms">魔兽世界</option>
	<option value ="lol" selected>英雄联盟</option>
	<option value ="cs">CS</option>
	<option value ="cf">CF</option>
	<option value ="cf">CF</option>
	<option value ="cf">CF</option>
	<option value ="cf">CF</option>
	<option value ="cf">CF</option>
</select>

文本域表单

<textarea rows="60" cols="60" name="introduceMyself">
				
			</textarea>

文件表单

如果表单中有文件表单，那么form必须加上 enctype=“multipart/form-data”

application/x-www-form-urlencoded: 表示当前表单数据提交时会使用URL进行编码处理

<form action="../server/server.html" method="get" enctype="multipart/form-data">
			<h3>选择文件</h3>
			<!-- 普通表单: 和我们之前学习的表单一模一样-->
			<input type="text" name="" id="" value="" />
			<p>
				<!--文件表单 -->
				<input type="file" name="upload" value="上传" />
			</p>
			<input type="submit" value="提交"/>
		</form>

提交方式

提交按钮提交的相关信息:

		http://127.0.0.1:8848/day02_html2/server/server.html
		?
		username=admin
		&password=123456
		&gender=male
		&hobby=playBasketball&hobby=playgame
		&game=cs
		&introduceMyself=%09hahahahah%09%09
		
		http://127.0.0.1:8848/day02_html2/server/server.html?username=admin&password=31231&gender=female&hobby=playBasketball&hobby=playgame&game=cf&introduceMyself=%09ddd%09%09
		&
		x=65&y=29
		
		<input type="button" name="" id="" value="点一下" />
		type=button:一般用来触发点击事件，调用函数
		
		<input type="reset" name="" id="" value="重置" />
		恢复到初始的状态，初始状态指的是网页第一次加载保存的数据记录
		
		checked:默认选中
		selected: 默认被选择

<input type="submit" value="提交"/> <br>
			<input type="reset" value="重置" /> <br>
			<!-- 如果type类型是button 表示的是一个按钮,不能够和服务器进行交互,仅作为一个普通按钮,一般和js结合使用  -->
			<input type="button" value="点击" onclick="alert('啊,我被点了')"/> <br>
			<input type="image" src="../img/renren.gif" /> <br>

隐藏域表单

<input type="hidden" name="goodid" id="goodid" value="1001" />