3.块标签、表单标签

最新推荐文章于 2024-07-10 01:10:22 发布

日拱一卒无有尽，功不唐捐终入海

最新推荐文章于 2024-07-10 01:10:22 发布

阅读量197

点赞数

分类专栏：编程自学笔记 # JavaWeb学习笔记文章标签： html

本文链接：https://blog.csdn.net/m0_49128301/article/details/120397087

版权

编程自学笔记同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

JavaWeb学习笔记

25 篇文章 0 订阅

订阅专栏

块标签

1.<div></div>

①适用于大量信息展示

②默认占满一行（把这种呢默认占满一行的标签叫做块标签）

2.<span></span>

①适用于少量信息展示，有多少内容，就占多少空间

②行级标签，不会自动换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>我你瑾瑾，我会让你幸福的，我会赚很多钱，会让你健健康康，快快乐乐。</div>
		<div>我要把 一辈子都对你好，作为我的人生信条。</div>
		<span>登录 </span>		<span>账号  密码 </span>
	</body>
</html>

3.1表单标签

表单标签的作用：用来提交用户输入的数据，提交给服务器的程序，相当于一web程序的入口

相当于java基础学习的Scanner

①定义一个表单<form>表单内容</form>

②在表单中定义对应的表单输入项

action、method属性应该放在<form></form>标签内

>>action：将数据提交到何处。

默认提交到本页

本机内网路径：

①相对路径demo.html

②绝对路径

互联网路径：http://www.baidu.com/xxx

>>method：将数据以何种方式提交

默认为：get

提交方式可定义：get 或者 post

get和post区别区别	get	post
提交后结果	提交的参数列表拼接到了地址栏后面	方式不会拼接到地址栏
使用场景	提交普通数据	对于敏感性稀比较安全
提交数据容量	有限	理论上提交的数据量无限大

尽量使用post方式提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="demo.html" method="get">
			<input type="text" name="uname" />
			<input type="submit" />
		</form>
			<br/>
		<form action="demo.html" method="post">
			<input type="text" name="uname" />
			<input type="submit" />
		</form>
		
	</body>
</html>

3.2输入标签

<input/> 为自闭标签

表单输入项标签之一，用户可以在该标签上通过填写和选择进行数据输入

>>type：设置该标签种类 byte字节

①text：文本框，默认

②password：密码框。输入内容非明文

③radio：单选框。在同一组内有单选效果：用户只能选择不能输入

④checkbox：复选框，在同一组内有复选效果

⑤submit：提交按钮。用于控制表单提交数据

⑥reset：重置按钮。用于将表单输入项恢复到默认状态

⑦file：附件框。用于文件上传。

⑧hidden：隐藏域，一般用作提交服务器需要拿到，但用户不需要看到的数据

⑨button：普通按钮，可以作为按钮的名字存在，value=“名字”，需要和js的时间一起用

>>name：单选框、复选框进行数据的分组。设置该标签对应的参数名

>>value：设置该标签对应的参数值；某个表单输入项需要通过参数列表提交，就必须设置name属性

value属性标签的设置策略

①文本框、密码框这样的表单输入选项，必须强制指定value，因为用户可以自由输入

②单选框】reset 复选框这样的表单输入项，必须强制指定value，因为用户只能选择，如果不指定value值，那么提交上去的只有on。

input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的
当 type 的取值为 button、reset、submit 中的其中一个时，此时 value 属性的值表示的是按钮上显示的文本
当 type 的取值为 text、password、hidden 中的其中一个时，此时 value 属性的值表示的是输入框中显示的初始值，此初始值可以更改，并且在提交表单时，value 属性的值会发送给服务器（既是初始值，也是提交给服务器的值）
当 type 的取值为 checkbox、radio 中的其中一个时，此时 value 属性的值表示的是提交给服务器的值
当 type 的取值为 image 时，点击它提交表单后，会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器

————————————————
版权声明：本文为CSDN博主「WinstonLau」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/WinstonLau/article/details/88537552

>>checked：设置单选框/复选框的默认选中状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			<!--用户ID，到时候是服务器生成的不需要，不需要用户看到-->
			用户ID：<input type="hidden" name="uid" value="csdv156dd1" /><br/>
			账户：<input type="text" name="username"   /><br/>
			姓名：<input type="text" name="name" /><br/>
			爱好：<input type="checkbox" name="code"   value="code" checked="checked"/>编程<br/>
			     <input type="checkbox"   name="basketball" value="basketball"/>打篮球<br/>
			     <input type="checkbox" name="dog" value="dog" />遛狗
			     <br/>
			      <input type="submi t" value="注册" />
			       <input type="reset" />
			       <input type="button" value="我是个按钮" /><br/>
			      照片：  <input type="file"  name="photo"/>
			      
		</form>
	</body>
</html>

>>readonly：设置该标签的参数值只读，用户无法手动更改。数据可以正常提交

>>disabled：设置该标签不可用，参数值无法改变，且参数值也无法提交。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			用户名：<input type="text" name="uname"   /><br/>
			密码：<input type="password" name="password" /><br/>
			姓名：<input type="text" name="name" readonly="readonly" value="xxx" /><br/>
		       别名：<input type="text" name="otherName" disabled="disabled" value="张三" /><br/>
	</body>
</html>

3.3、选择框标签

<select></select>标签定义一个选择框和form为同级标签

用户只能选择不能输入的，都必须给value值

>>name :设置该标签对应的参数名

>>multiple：设置该标签选项全部显示，并且可以进行多行提交，默认为单选

<option></option>标签

选项标签，用于为一个选择框添加一个选项

>>value：设置需要提交的参数值，后台可以看到的值

>>selected：设置选项的默认选中状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
					<select name="text">
						<option value="1">选项卡一</option>
						<option value="2" >选项卡二</option>
						<option value="3">选项卡三</option>
					</select>
					<br/>
					<select name="city">
						<option value="">请选择	城市</option>
						<option value="beijing" selected="selected">北京</option>
						<option value="shanghai" >上海</option>
						
					</select>
					<br/>
					<select name="hobby" multiple="multiple">
						<option value="1">编程</option>
						<option value="2" >阅读</option>
						<option value="3">跑步</option>
					</select>
					<br/>
					<input type="submit" value="提交"/>
		</form>
	</body>
</html>

3.4、文本域标签

<textarea></textarea>标签

表单输入项标签之一，用户可以在该标签上通过输入进行数据输入。

>>name：设置该标签对应的参数名

文本框和文本域的区别：

①文本框不能换行，文本域可以换行

②文本框参数值是value属性（提交数据后地址栏显示的数据），文本域参数值是标签的内容体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			个人简历：<textarea name="text"></textarea><br/>
			<input type="submit" />
		</form>
	</body>
</html>

3.5、提交表单注意事项

3.5.1、提交中文问题(火狐浏览器不存在这个问题，用IE浏览器测试)

3.5.1.1、为什么要使用URI编码？

正常提交数据）（提交数字，字符时）

?text=1&city=beijing&hobby=1&hobby=2&hobby=3

？password=123#ohhh&bdfbf&bfbfnghd&username=zhangsan

非正常数据：

？password=123#ohhh&bdfbf&bfbfnghd&username=zhangsan （&会切割这段编码）

URL编码解决方式：特殊符号，中文

例如：&→%26

编码前？password=123#ohhh&bdfbf&bfbfnghd&username=zhangsan

↓

编码完之后？password=123#ohhh%26bdfbf%26bfbfnghd&username=zhangsan

为了保证表单数据传递时能更好区分出name和value

保证数据传递的完整性

3.5.1.2、URL编码的表现形式&本质

例如：你好，用UTF-8编码，编码的字节数组为：

[-28,-67,-96,-27,-91,-67]

步骤：

①你好，用UTF-8编码，编码的字节数组。【使用的是页面规定的字符集，例如utf-8】

②字节数组中的每一个元素，都会从10进制转换为16进制

③把已经转换为16进制的字节数组，以%进行拼接。拼接的字符串，就是URL编码后的结果

URL编码后：

%E4%BD%A0%E5%A5%BD

-28 -67 -96 -27 -91 -67

%E4 %BD %A0 %E5 %A5 %BD

日拱一卒无有尽，功不唐捐终入海

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
3.块标签、表单标签

块标签1.<div></div>①适用于大量信息展示②默认占满一行（把这种呢默认占满一行的标签叫做块标签）2.<span></span>①适用于少量信息展示，有多少内容，就占多少空间②行级标签，不会自动换行<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>...
复制链接

扫一扫