【HTML】笔记(3)— form表单;实现用户注册表单;下拉列表支持多选;file控件;readonly与disabled;maxlength

  • A+
所属分类:Web前端
摘要

注意:文中代码的效果仅展示了在浏览器上的外观,并未展示效果,别问,问就是博主懒(硬气地说道)

注意:文中代码的效果仅展示了在浏览器上的外观,并未展示效果,别问,问就是博主懒(硬气地说道)

 

1、form表单初步:

代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>form表单初步</title> 	</head> 	<body> 		<!-- 			1、表单有什么用? 				收集用户信息,表单展示之后,用户填写表单,点击提交,提交数据给服务器 			2、怎么画一个表单? 				使用form标签画表单 			3、一个网页当中可以有多个表单form 			4、表单最终是需要提交给服务器的,form表单有一个action属性,这个属性用来指定服务器地址: 				action属性用来提交数据给哪个服务器 				action属性和超链接中中的href属性一样,都可以向服务器发送请求(request) 			5、http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给: 				192.168.111.3 这台机器上的8080端口对应的软件 		--> 		 		<form action="http://192.168.111.3:8080/oa/save"> 			<!--画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮,具有提交表单的能力--> 			<!--对于按钮来说,value属性用来指定按钮上显示的文本信息,有提交功能的按钮默认为“提交”--> 			<input type="submit" value="注册"/> 			 			<!--这是一个普通的按钮,没有提交表单的能力--> 			<input type="button" /> 		</form> 		 		<br /><br /> 		 		<!-- 			这个按钮和普通的超链接没什么太大的区别(超链接和表单都可以向服务器发送请求,只不过表单发送请求的同时可以顺便提交数据) 			注意:利用表单来提交数据的单位是一个“form”,所以只会提交form之“内”的数据 		--> 		<form action="http://www.baidu.com"> 			<input type="submit" value="百度"/> 		</form> 		 		<br /><br /> 		 		<!--关于form的代码只有放到form里,才能正常使用--> 		<!-- 			表单是以什么格式提交给服务器的? 				格式:action?name=value&name=value&name=value&name=value... 				HTTP协议规定,必须以这种形式提交给服务器 				例如: 					http://localhost:8080/jd/login?username=aaa&userpwd=123456 			 			注意:若文本框不设置name属性,浏览器就不会提交数据给服务器 				 文本框的value和按钮的value不一样,没有关系,不要搞混!!! 				  				 当文本框的name没有设置的时候,该项不会提交给服务器 				 但是当value没有写的时候,value的默认值是空字符串"",这意味着java代码得到的是String string = "" 		--> 		<form action="http://localhost:8080/jd/login"> 			<table> 				<tr> 					<td>用户名</td> 					<!--文本框也可以设置value,这个value会作为默认值,但是没有什么意义,所以一般不设置文本框的value--> 					<td><input type="text" name="username" value="bbb"/></td> 				</tr> 				 				<tr> 					<td>密码</td> 					<td><input type="password" name="userpwd"/></td> 				</tr> 				 				<tr align="center"> 					<td colspan="2"> 						<input type="submit" value="登录"/> 						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 						<input type="reset" value="清空"/> 					</td> 				</tr> 			</table> 		</form> 	</body> </html> 

 

谷歌浏览器:

【HTML】笔记(3)--- form表单;实现用户注册表单;下拉列表支持多选;file控件;readonly与disabled;maxlength

 

2、用户注册的表单:

代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>用户注册的表单</title> 	</head> 	<body> 		<!-- 			form表单method属性: 				get:用户提交的信息会显示在浏览器的地址栏上(method默认为get)。 				post:用户提交的信息不会显示在浏览器地址栏上。 		--> 		 		<form action="http://localhost:8080/jd/register"> 			用户名 			<!--文本框格式--> 			<input type="text" name="username"/> 			<br> 			 			密码 			<!--文本框格式--> 			<input type="password" name="userpwd" /> 			<br> 			 			确认密码 			<!--文本框格式--> 			<!-- 			确认密码不需要设置name的,因为确认密码如果要提交给服务器,说明与密码相同,所以只需要name(提交)密码就行了,不需要再提交一个相同的信息 			--> 			<input type="password"/> 			<br> 			 			性别 			<!--单选圈圈(只能勾选一个圈圈)--> 			<!--两个圈圈的name相同是因为都属于“用户性别信息”,所以要相同name,若不相同,就可能出现既是男又是女的情况--> 			<input type="radio" name="gender" value="1" />男 			 			<!-- 				如何判断是否需要设置value? 					若我们需要的是用户手动输入的信息,如简介,密码等。则不需要设置value; 					若我们需要的是用户选择我们给定的选项(而不是用户输入的信息),则需要设置特定的value以提交给服务器,如性别等 			--> 			<input type="radio" name="gender" value="0" checked/>女 <!--标记checked代表默认此选项--> 			<br> 			 			兴趣爱好 			<!--多选框格式(可以多选,也可以单选)--> 			<input type="checkbox" name="interest" value="smoke"/>抽烟 			<input type="checkbox" name="interest" value="drink" checked/>喝酒<!--标记checked代表默认喝酒--> 			<input type="checkbox" name="interest" value="fireHair" checked/>烫头<!--标记checked代表默认烫头--> 			<br> 			 			学历 			<!--下拉列表格式(单选)--> 			<select name="grade"> 				<option value="gz">高中</option> 				<option value="dz">大专</option> 				<option value="bk" selected>本科</option> <!--selected标记代表默认本科--> 				<option value="ss">硕士</option> 			</select> 			<br> 			 			简介  			<!--文本域格式,文本域没有value属性,用户填写的内容就是value--> 			<!--可以通过设置row(宽)和(长)cols来调整文本框的大小--> 			<textarea rows="10" cols="60" name="introduce"></textarea> 			<br> 			 			<!--最后给form提供一个提交数据按钮,将以上数据提交给服务器--> 			<input type="submit" value="注册" /> 			<!--设置一个按钮实现清空所有文本框内数据的功能--> 			<input type="reset" value="清空" /> 		</form> 		 		<!--超链接其实也可以提交数据,但是只能是固定不变的value,所以不可能用这种方式提交用户信息--> 		<!--超链接是get请求--> 		<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a> 		 		 	</body> </html>

 

谷歌浏览器:

【HTML】笔记(3)--- form表单;实现用户注册表单;下拉列表支持多选;file控件;readonly与disabled;maxlength

 

3、下拉列表支持多选:

代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>下拉列表支持多选</title> 	</head> 	<body> 		<!-- multiple="multiple" 支持多选的 size设置显示条目数量。--> 		<!--同时按ctrl和鼠标左键才可以实现多选--> 		<select multiple="multiple" size="4"> 			<option>河北省</option> 			<option>河南省</option> 			<option>山东省</option> 			<option>山西省</option> 		</select> 	</body> </html> 

 

谷歌浏览器:

【HTML】笔记(3)--- form表单;实现用户注册表单;下拉列表支持多选;file控件;readonly与disabled;maxlength

 

4.file控件:

代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>file控件</title> 	</head> 	<body> 		<!--file控件:文件上传专用。--> 		<input type="file" /> 		 		<form action="http://localhost:8080/oa/save"> 			 			<!-- 				隐藏域:网页上看不到,但是表单提交的时候数据会自动提交给服务器 				用于提交需要提交但是又不想让用户看到的数据 			--> 			<input type="hidden" name="***" value="***" /> 			 			用户代码<input type="text" name="usercode" /> 			 			<input type="submit" value="提交" /> 			 		</form> 		 	</body> </html> 

 

谷歌浏览器:

【HTML】笔记(3)--- form表单;实现用户注册表单;下拉列表支持多选;file控件;readonly与disabled;maxlength 

 

5、readonly 与 disabled:

代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>readonly disabled</title> 	</head> 	<body> 		<!-- 			readonly和disabled相同点:都是只读不能修改。 			但是readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交。) 		--> 		<form action="http://localhost:8080/taobao/save"> 			用户代码<input type="text" name="usercode" value="456" readonly /> 			<br> 			用户姓名<input type="text" name="username" value="zhangsan" disabled /> 			<br> 			<input type="submit" value="提交数据" /> 		</form> 	</body> </html> 

 

谷歌浏览器:

【HTML】笔记(3)--- form表单;实现用户注册表单;下拉列表支持多选;file控件;readonly与disabled;maxlength 

 

6、maxlength:

代码:

<!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<title>maxlength</title> 	</head> 	<body> 		<!-- 			maxlength 设置文本框中可输入的字符数量。 		--> 		<input type="text" maxlength="3" /> 	</body> </html> 

 

谷歌浏览器:

【HTML】笔记(3)--- form表单;实现用户注册表单;下拉列表支持多选;file控件;readonly与disabled;maxlength