阅读模式:

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

阅读量:15  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:隐藏域:网页上看不到,但是表单提交的时候数据会自动提交给服务器...... 注意:文中代码的效果仅展示了在浏览器上的外观,并未展示效果,别问,问就是博主懒(硬气地说道)1、form表单初步:代码:<!DOCTYPE ht......

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

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

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>

谷歌浏览器:

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>

谷歌浏览器:

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>

谷歌浏览器:

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>

谷歌浏览器:

 

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>

谷歌浏览器:

 

6、maxlength:

代码:

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

谷歌浏览器:

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: