一,表单标签

最新推荐文章于 2024-06-16 09:46:44 发布
最新推荐文章于 2024-06-16 09:46:44 发布
阅读量152 收藏
点赞数
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58276266/article/details/132634391
版权

一,表单标签

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用标签</title>
	</head>
	<body>
		<!-- 1.表单标签:比表格多了数据提交的功能
		1.1, 要求:必须使用form标签  + 必须有提交按钮 + 必须配置name属性
		1.2, 效果: 实现了数据提交,数据都在地址栏进行了拼接,多组数据使用&连接
http://127.0.0.1:8848/hbuilderx/cgb2111/register.html?user=jack&pwd=123
		1.3, 数据提交的格式: 属性名=属性值是
		     其中,属性名是 网页上name属性的值 ,属性值 是用户在浏览器中输入的数据
		1.4, 提交数据的方式:get和post两种方式!!!!!!
			get方式提交数据:在地址栏拼接数据,可以方便的查看数据,但是不安全,长度受限
			post方式提交数据:安全,数据大小不受限,但是,不好找数据了...
		1.5, form标签拥有两个重要属性: 
			method属性用来指定数据提交方式,默认是get
			action属性用来指定数据提交给哪段java程序来处理
		-->
		
		<!-- 
		 总结:
		 1,标签:form表单用来提交数据,table表格,h1标题,tr表里的行,td行里的列,input输入框
			   select用来定义下拉框,option定义下拉选项,img图片,button是按钮,textarea文本域
		 2,属性:method是用来指定form提交数据的方式,action是用来指定form提交数据到哪段程序
				bgcolor设置表格的背景色,border设置表格的边框,width设置表格的宽度,
				cellspacing设置单元格间距,type是设置输入框的类型,src用来指定图片的位置
				name是用来作为数据提交时的标识,colspan用来设置列合并
		 3,问题: 单选框和多选框,默认提交的都是on
		 4,解决方案:给单选框和多选框提供value属性用来指定提交时要使用的值(不再提交on了)
		-->
		<form method="post" action="#">
			<h1>注册表单</h1>
			<table bgcolor="lightgray" border="1px" 
					width="500px" cellspacing="0">
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" name="user"/>
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td>确认密码:</td>
					<td>
						<input type="password" name="repwd"/>
					</td>
				</tr>
				<tr>
					<td>昵称:</td>
					<td>
						<input type="text" name="nick"/>
					</td>
				</tr>
				<tr>
					<td>邮箱:</td>
					<td>
						<input type="email" name="mail"/>
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<input type="radio" name="sex" value="1"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" name="like" value="lq"/>篮球
						<input type="checkbox" name="like" value="zq"/>足球
						<input type="checkbox" name="like" value="ppq"/>乒乓球
					</td>
				</tr>
				<tr>
					<td>城市:</td>
					<td>
						<select name="city">
							<option value="">请选择</option>
							<option value="bj">北京</option>
							<option value="gz">广州</option>
							<option value="sz">深圳</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td>
						<input type="file" name="photo"/>
					</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td>
						<input type="text" />
						<img src="a.png" />
						<button>点我换一张</button>
					</td>
				</tr>
				<tr>
					<td>自我描述:</td>
					<td>
						<textarea>请在这里写...</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<button type="submit">提交</button>
						<button type="reset">重置</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

–2,其他标签


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 在网页中加入音频 -->
		<audio controls="controls">
			<source src="jay.mp3"></source>
		</audio>
		<!-- 在网页中加入视频 -->
		<video controls="controls">
			<source src="b.mp4"></source>
		</video>
		
		<!-- 一个占一行:块元素(h1~h6,ul+li) -->
		<div>大家好</div>
		<div>大家好</div>
		<div>大家好</div>
		
		<p> Nice</p>
		<p> Nice</p>
		<p> Nice</p>
		
		<!-- 多个占一行:行元素(img,a,input,button) -->
		<span> hello</span>
		<span> hello</span>
		<span> hello</span>
	</body>
</html>

–3,练习学生管理系统
在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息管理系统MIS</title>
	</head>
	<body>
		<!-- 提供表单来提交学生的数据 -->
		<form>
			<h1>学生信息管理系统MIS</h1>
			<table>
				<tr>
					<td>
						姓名: <br />
						<input type="text" name="user" placeholder="请输入姓名.."/>
					</td>
				</tr>
				<tr>
					<td>
						年龄: <br />
						<input type="number" name="age" placeholder="请输入年龄.."/>
					</td>
				</tr>
				<tr>
					<td>
						性别:(单选框) 
						<input type="radio" name="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好:(多选) 
						<input type="checkbox" name="like" value="ppq" checked="checked"/>乒乓球
						<input type="checkbox" name="like" value="ps"/>爬山
						<input type="checkbox" name="like" value="cg"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历:(下拉框)  
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">研究生</option>
							<option value="4">小学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期:  <br />
						<input type="date" name="intime"/>
					</td>
				</tr>
				<tr>
					<td>
						<button type="submit">保存</button>
						<button type="reset">取消</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

二,CSS
–1,概述
1,全称是层叠样式表stylesheet,专门用来修饰HTML网页的,就是让网页变漂亮.
2,语法: 选择器 { 属性名:属性值;样式2;样式3; }
3,使用位置: 内联CSS , 内部CSS , 外部CSS

–2,入门案例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css入门案例</title>
	</head>
	<body>
		<!-- css代码的出现位置:行内css/内联css  -->
		<!-- 1, 需求:把div文字修饰成红色 -->
		<div style="color: red;">你好css1</div>
		<div style="color: red;">你好css2</div>
		<div style="color: red;">你好css3</div>
	</body>
</html>

三,选择器
css为了方便的选中网页中的元素进行修饰,提供了各种选择器,分类:基础选择器+高级选择器

–1,标签名选择器
按照标签的名字,来选中元素.可能会选中多个.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<!-- css的存在位置:内部css -->
		<style>
			/* 1.标签名选择器 */
				/* 练习1:把div修饰成红色文字 */
				div{  /* 选中了网页中所有叫div的标签们 */
					color:red; /* 红色文字 */
				}
				/* 练习2:把span字号加大 */
				span{
					font-size:30px; /* 字号加大 */
					font-family: "宋体" ;/* 字体 */
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div> 
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

–2,class选择器
也叫类选择器,比标签名选择器更细致.
使用步骤: 给你想要修饰的元素加 class属性 + 通过.获取class的值


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<!-- 在HTML网页中,嵌入一段css代码,使用style标签 -->
		<style>
			/* 语法: 选择器{样式1;样式2;} */
			/* 1.类选择器/class选择器:
					先加class属性 + 通过.获取class的值
					其中,class的值可以相同.
			 */
				/* 练习1:只div2修饰字号加大 */
				.a{ /* 选中了网页中 所有class=a的元素*/
					font-size: 40px;
				}
				/* 练习2:div1 div3加背景色 */
				.b{ /* 选中了网页中 所有class=b的元素*/
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<div class="b">我是div1</div>
		<div class="a">我是div2</div>
		<div class="b">我是div3</div>
		<a href="#">我是a1</a>
		<a href="#" class="a">我是a2</a>
	</body>
</html>

–3,id选择器
id选择器的值不能相同 , 如果要使用id选择器只会选中一个元素.
使用步骤: 给想要修饰的元素加id属性 + 通过#获取id的值


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<style>
			/* id选择器: 加id属性(属性值不让相同) + 通过#获取id的值 */
				/* 练习1:设置用户名输入框的背景色 */
				/* 选择器{样式1;} */
				#a{
					background-color: hotpink;/* 背景色 */
				}
				/* 练习2:设置 我是span2 字体透明度 */
				#c{
					opacity: 0.3;/* 值0.0~1.0区间,值越小越透明 */
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名..." id="a"/>
		<input type="text" placeholder="密码..." id="b"/>
		<span>我是span1</span>
		<span id="c">我是span2</span>
	</body>
</html>

–4,分组选择器
是指,把使用不同选择器选中的元素,分成一组,统一设置样式.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		<style>
			/* 1.分组选择器:使用不同的选择器,来选中多种元素 */
			/* 语法: 选择器 {  样式1; 样式2; } */
				/* 练习1:把标签名/id选择器选中的元素,设置背景色 */
				div , #input1{ /* 分组选择器,多种选择器间用逗号隔开 */
					background-color: limegreen;
				}
				/* 练习2:把id/class选择器选中的元素,设置背景色 */
				#input1 , .a{
					background-color: pink;
				}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		<input type="text" placeholder="账号" id="input1"/>
		<input type="text" placeholder="密码"/>
		<span class="a">我是span1</span>
		<span class="a">我是span2</span>
	</body>
</html>

–5,属性选择器
根据标签的不同属性,来选中一些元素


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 选择器</title>
		
		<style>
			/* 1.属性选择器:根据不同属性,选中不同元素 */
				/* 练习1:把有type属性的 设置背景色 */
				[type]{ /* 选中了,有type属性的元素 */
					background-color: indianred;
				}
				/* 练习2:把有type属性的input 设置边框 */
				input[type]{
					border: 3px dashed blue;/* 宽度 虚线 颜色 */
					border-radius: 25px; /* 圆角边框,值越大越圆 */
				}
				/* 练习3:type=text的input设置背景色 */
				input[type="text"]{
					background-color:seagreen;
					display: none; /* 隐藏元素*/
				}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名.."/>
		<input type="password" placeholder="密码.."/>
		<input type="number" placeholder="年龄.."/>
		<input type="text" placeholder="地址.."/>
		<a href="#">我是a1</a>
	</body>
</html>
银河系的一束光
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
表单标签概述及详解
qq_40208605的博客
04-04 4192
1.1表单标签概述1.1.1什么是表单标签 我们去银行办理一些业务的时候，我们通常需要填写一些纸质单据，而如果我们在网页中需要填写一些单据呢？我们可以通过HTML的表单来实现。例如： 1.2表单标签详解1.2.1输入项标签 <input/>标签 表单输入项标签之一，用户可以在该标签上 通过填写和选择 进行数据的输入。 Ø type:设置该标签的种类 ü text...
表单标签详解
m0_72313625的博客
07-12 3944
表单元素一共可以分为input输入表单元素 select下拉表单元素 textarea文本域表单元素
表单标签
缘 源 园
04-22 2942
1. 表单的介绍 表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器 。 2. 表单相关标签的使用 <form>标签 表示表单标签，定义整体的表单区域 <label>标签 表示表单元素的文字标注标签，定义文字标注 <input>标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式 type属性 type="text" 定义单行文本输入框 type="password" 定.
表单标签及属性
zheng_qingyuan的博客
06-25 1325
用于数据的采集： 文本框输入标记（单）：密码框输入标记（单）：单选框输入标记（单）：在同一个选项组内，每个选项中的name值必须相同复选框输入标记（单）：
HTML 表单标签
weixin_45904557的博客
02-28 7958
一、什么是表单标签 表单是用来采集用户的输入数据，然后将数据提交给服务器 二、表单的组成 一个表单有三个基本组成部分： ①表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。 ②表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 ③表单按钮：包括提交按钮、复位按钮和一般按钮； 三、表单标签 表单标签＜form＞＜/form＞ 功能：用于申明表单，定义采集数据的范围，也就是＜form＞和＜/form＞里面包含的数据
form表单标签
xun_fong的博客
05-28 6453
一、form表单标签 form标签是一个块级元素，以<form>开头，</form>结尾，它能够包含input、textarea、select等元素。 1.表单标签的属性 form表单常用属性 属性 值 说明 action URL 指定表单发送的地址; method get post 指定数据传送到服务器的方式，get会将发送的数据显示在地址栏，post就不会，单论安全而言，post安全性更高; name
html中的表单标签
weixin_51182359的博客
04-23 3454
html 中的表单标签介绍
Spring 表单标签
节至
06-13 5462
SpringMVC学习系列（11） 之 表单标签 本篇我们来学习Spring MVC表单标签的使用，借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松。 一.首先我们先做一个简单了例子来对Spring MVC表单表单标签的使用有一个大致的印象，然后再结合例子对各个标签介绍一下如何使用。 1.首先，在com.demo.web.models包中添加一个
html5 表单标签
weixin_49346755的博客
09-30 1938
HTML 表单用于收集不同类型的用户输入，表单标签允许用户在表单中输入内容。表单标签指的是不同类型的 input 标签、复选框、单选按钮、提交按钮等。多数情况下被用到的表单标签是输入标签 ，输入类型是由 type 属性定义。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
layui 表单标签的校验
郭岚的博客
10-22 4752
layui表单元素的校验、需在其元素上加入lay-verify。 layui提供了以下值。 required（必填项） phone（手机号） email（邮箱） url（网址） number（数字） date（日期） identity（身份证） lay-v也erify支持一个input多条规则的验证。 比如： 格式：lay-verify=”规则1|规则2” 如：lay-verify...
SpringMVC表单标签使用详解
08-31
主要为大家详细介绍了SpringMVC表单标签的使用方法，教大家如何用Spring封装的一系列表单标签
layui 表单标签的校验方法
10-16
今天小编就为大家分享一篇layui 表单标签的校验方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
JSP实现用于自动生成表单标签html代码的自定义表单标签
01-08
这个是自己写的一个简单的JSP表单标签，用于自动生成checkbox,select,radio等标签，传入菜单集合生成html代码，自动选中指定值，用于java web项目的jsp页面。 1. Servlet部分代码： Map<String> map = new HashMap...
jQuery表单浮动标签设计效果代码
06-24
jQuery表单浮动标签设计效果代码是一款分为标签上浮动，标签右浮动和标签下浮动等多种效果。
基于springboot的青年公寓服务平台源码数据库
最新发布
s123456sj的博客
06-16 547
本青年公寓服务平台分为管理员还有用户两个权限，管理员可以管理用户的基本信息内容，可以管理房屋投诉信息以及房屋投诉的租赁信息，能够与用户进行相互交流等操作，用户可以查看房屋信息，可以查看房屋投诉以及查看管理员回复信息等操作。
【Java02】Java中数组的定义与初始化
饮冰室
06-10 568
推荐第一种方式。这种方式容易让人理解，数据类型是type[]，对象名称是arrayName。第二种方式有些老旧了。由于数组是一种引用变量（也就是一个指针），所以定义的时候还没有指向任何有效的内存空间，因此在定义数组的时候不能指定数组的长度，也不能直接使用。必须进行初始化。可以使用var让系统自动推断变量类型，既可以用于静态初始化，也可以用于动态初始化。
【2024最新华为OD-C/D卷试题汇总】[支持在线评测] CPU算力分配(100分) - 三语言AC题解(Python/Java/Cpp)
清隆学长的博客
06-11 344
### 问题描述 K小姐是某公司运营部门的主管,最近她需要对公司的两组服务器进行算力分配。每组服务器有多个算力不同的 $CPU$,其中 $A$ 组第 $i$ 个 $CPU$ 的运算能力为 $A[i]$,而 $B$ 组第 $i$ 个 $CPU$ 的运算能力为 $B[i]$。一组服务器的总算力是各 $CPU$ 的算力之和。 为了让两组服务器的算力相等,K小姐允许从每组各选出一个 $CPU$ 进行一次交换。她希望从 $A$ 组服务器中选出算力尽可能小的 $CPU$ 来交换,你能帮她计算出应该选择哪两个 $CP
微型操作系统内核源码详解系列四（3）：操作系统调度算法（FreeRTOS内核篇上）
2301_77061352的博客
06-12 803
-uxTopPriority，被设定为是代表最大优先级的数字，自减操作代表从就绪列表最后一个链表（优先级最高的链表）开始查找，直到找到任务链表不为空的优先级任务，那么这个任务肯定也是所有任务中优先级最大的任务，然后获取这个任务的TCB并更新pxCurrentTCB（切换的具体函数），最后更新uxTopReadyPriority的值。容笔者说一下个人看法，从c语言和数据结构算法的层面学习，只能说是舍本逐末，透过Freertos这个小型系统，窥见庞大的操作系统架构的一角，这才是我们学习的重点。
Invalid keystore format，获取安全码SHA1值出错
yfy1907的博客
06-11 185
Invalid keystore format 错误
Spring的表单标签库
06-11
Spring的表单标签库包括以下标签： 1. `<form:form>`标签：用来定义表单。 2. `<form:input>`标签：用来绑定表单中的文本框的数据。 3. `<form:textarea>`标签：用来绑定表单中的多行文本框的数据。 4. `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值