HTML笔记（二）

于 2020-12-18 17:17:17 发布
阅读量472 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qwq_666/article/details/111385987
本文深入探讨了HTML中的表单构建，包括用户注册表单的实现，下拉列表的多选功能，以及form控件的各种类型如file、hidden，详细解析了readonly、disabled属性和maxlength属性的使用。同时，还介绍了HTML中id属性的重要性以及div和span元素在布局中的作用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

表单

<!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 这是请求路径，表单提交数据最终提交给http://192.168.111.3机器上的8080端口对应的软件
		-->
		
		<!--<from action=url></form>-->
		<form action="http://192.168.111.3:8080/oa/save" >
			<!--画一个提交按钮，这个按钮可以提交表单-->
			<!--画按钮可以使用input输入域，type="submit"的时候表示该按钮是一个提交按钮，具有提交表单的能力-->
			<!--对于按钮来说，按钮的value属性用来指定按钮上显示的文本信息-->
			<input type="submit" value="登录"/>
			
			<!--这是一个普通按钮，不具备提交表单的能力-->
			<input type="button" value="设置按钮上显示的文本"/>
		</form>
		<br>
		
		<!--这个按钮和普通的超链接没有上面太大的区别（超链接和表单都可以向服务器发送请求，只不过表单发送请求的同时可以携带数据）-->
		<form action="http://www.baidu.com">
			<input type="text" />
			<input type="submit" value="百度" />
		</form>
		<br>
		
		<form action="http://localhost:8080/jd/save">
			用户名<input type="text" /><br>
			密码<input type="password" /><br>
			<input type="submit" value="登录" />
		</form>
		
		<br>
		<!--
			表单是以上面格式提交数据给服务器的？
				http://localhost"8080/jd/login?username=abc&userpwd=111"
				格式：action?name=value&name=value&name=value...
				HTTP协议规定的，必须以这种格式提交给服务器
			
			重点：
				表单项写了name属性的，一律会提交给服务器，不想提交者一项，就不要写name属性
				
			文本框和密码框的value不需要程序员指定，用户输入什么就是什么
			
			当name没有写的时候，该项不会提交给服务器
			但是当value没有写的时候，value的默认值是空字符串，会将空字符串提交给服务器，Java代码得到的是：String s = "";
		-->
		<form action="http://localhost:8080/jd/save">
			<table>
				<tr>
					<td>用户名</td>
					<td><input type="text" name="username"/></td>
				</tr>
				<tr>
					<td>密码</td>
					<!--没有name不会提交！！！-->
					<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>
		<br>
		
		<form></form>
	</body>
</html>

用户注册表单的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册的表单</title>
	</head>
	<body>
		<!--
			用户注册
				用户名
				密码
				确认密码
				性别
				兴趣爱好
				学历
				简介
			
			form表单method属性
				get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上
				post：采用post方式提交的时候，用户提交的信息不会显示在浏览器的地址栏上
				当用户提交的信息中含有敏感信息，例如密码，建议采用post方式提交
			
			method属性不指定或指定get，这种情况下都是get
			只有method属性指定为post的时候才是post
			
			注意：post提交的时候提交的数据格式和get还是一样的，只不过不在地址栏上显示出来
		-->
		<form action="http://localhost:8080/jd/register" method="post">
			用户名
			<input type="text" name="username"/>
			<br>
			密码
			<input type="password" name="userpwd"/>
			<br>
			确认密码
			<input type="password"/>
			<br>
			性别
			<input type="radio" name="gander" value="1"/>男
			<input type="radio" name="gander" value="0" checked />女<!--单选按钮的value必须手动指定-->
			<br>
			兴趣爱好
			<input type="checkbox" name="interest" value="smoke"/>抽烟
			<input type="checkbox" name="interest" value="drink" checked />喝酒<!--checked默认选中-->
			<input type="checkbox" name="interest" value="fireHair"/>烫头
			<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-->
			<textarea rows="10" cols="60" name="introduce"></textarea>
			<br>
			<input type="submit" value="注册" />
			<input type="reset" value="清空" />
		</form>
		
		<!--
			超链接也可以提交数据给服务器，但是提交的数据都是固定不变的
			超链接是get请求，不是post请求
		-->
		<a href="http://localhost:8080/oa/save?username=zhangsan&password=111">提交</a>
	</body>
</html>

下拉列表支持多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉列表支持多选</title>
	</head>
	<body>
		<!--multiple="multiple"支持多选，size设置显示的条目数量（就是设置显示几个，这里设置了显示2个）-->
		<select multiple="multiple" size="2">
			<option>河北省</option>
			<option>河南省</option>
			<option>山东省</option>
			<option>山西省</option>
		</select>
	</body>
</html>

form的控件

file控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file控件</title>
	</head>
	<body>
		<!--file控件，文件上传专用-->
		<input type="file" />
	</body>
</html>

hidden控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hidden控件</title>
	</head>
	<body>
		<form action="http://loaclhost:8080/oa/save">
			<!--隐藏域，网页上看不到，但是表单提交的时候数据会自动提交给服务器-->
			<input type="hidden" name="userid" value="111" />
			
			用户代码<input type="text" name="usercode" />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

readonly和disabled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>readonly和disabled</title>
	</head>
	<body>
		<!--
			readonly和disabled相同点：都是只读不能修改
			都是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会提交）
		-->
		<form>
			用户代码<input type="text" name="usercode" readonly />
			<br>
			用户姓名<input type="text" name="username" disabled />
			<br>
			<input type="submi" value="提交数据" />
		</form>
	</body>
</html>

控件的maxlength属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>maxlength</title>
	</head>
	<body>
		<!--maxlength是设置文本框中可输入的字符数量，这里只允许输入3个字符-->
		<input type="text" maxlength="3" />
	</body>
</html>

HTML中的id属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中元素的id属性</title>
	</head>
	<body>
		<!--
			1.在HTML文档中，任何元素（节点）都有id属性，id属性是该节点的唯一标识，所以在同一个HTML文档当中，id值不能重复
			2.注意：表单提交数据的时候，只和name有关系，和id无关
			3.id有什么作用？
				JavaScript语言：可以对HTML文档当中的任意节点进行增删改的操作
				JavaScript对HTML进行增删改之前需要先拿到这个节点，通常我们通过id来拿节点对象
				id的存在让我们获取元素（节点）更方便
			4.HTML文档是一棵树，树上有很多节点，每一个节点都有唯一的id
				JavaScript主要就是对这棵树上的节点进行增删改的
				DOM（Document）树
		-->
		
		<form id="myform">
			<input type="text" name="username" id="username" />
			<input type="password" name="userpwd" id="userpwd" />
			<!--
				id就是节点的身份证号码，不能重复
			-->
		</form>
	</body>
</html>

HTML中的div和span

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div和span</title>
	</head>
	<body>
		<!--
			1.div和span是什么，有什么用？
				div和span都可以称为“图层”
				图层的作用是为咯保证页面可以灵活的布局
				图层就是一个一个盒子，div嵌套div就是盒子套盒子
				div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可
			2.最早的网页是采用table进行布局的，但是table不灵活，太死板
			现代的网页开发中div布局使用最多，几乎很少使用table进行布局了
			
			3.div和span的区别
				div独自占用一行（默认情况下）
				span不回独自占用一行
		-->
		<div id="div1">我是一个DIV</div>
		<div id="div2">我是一个DIV</div>
		
		<span id="span1">我是一个SPAN标签</span>
		<span id="span2">我是一个SPAN标签</span>
		
		<div id="div3">
			<div>
				<div>test</div>
			</div>
		</div>
	</body>
</html>
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值