Java学习的第三天（前端：表单标签+框架集）

本文链接：https://blog.csdn.net/weixin_43908333/article/details/102780025

表单标签(用于采集用户输入的数据，并且用于和服务器进行交互)

//input的属性
 type---输入框的类型
 name---框的名字，目的是接收方能够接受到对应的键（name）值(用户输入的内容)对（例如user=张三）
 value---默认显示的名字
 readonly--设置输入框只读
 placeholder--输入内容的提示信息，当用户开始输入后提示信息自动消失
 maxlength--输入框的长度

//文本框（注意：type="#"代表文本框）
<form>
  用户名：<input type="text" name="user" placeholder="请输入用户名" maxlength="6" readonly="readonly" />
</form>

//密码框（最大长度为8）
密码：<input type="password" name="password" placeholder="请输入密码" maxlength="8"/>

//单选按钮（注意：1.必须加name属性，且name属性值一致；2.展示给用户看的是外部的男女，而真正提交到服务器的是value设置的值）
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女

//复选按钮（单选和复选默认选中时设置checked="checked"）
<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="足球" checked="checked"/>足球
<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球

//文件上传
<input type="file"/>

//隐藏域(作用：把需要隐藏的内容放到隐藏域中，不让用户看到，但是需要传到服务器的一些敏感数据)
<input type="hidden" value="123456">

//下拉列表（默认选中设置selected=selected）
<select>
  <option>--请选择--</option>
  <option selected="selected">湖南</option>
  <option>湖北</option>
  <option>福建</option>
</select>

//文本域(rows代表默认多少行；cols代表默认多少列)
<textarea rows="4" cols=""5  placeholder="请输入用户简介信息">
</textarea>

//按钮（提交按钮/普通按钮/图片按钮）
<input type="submit" value="提交"/>
<input type="button" value="普通按钮"/>
<input type="image" src="图片的相对路径" value="图片按钮"/>
//除了使用上述三种方式表示一个按钮还可以...（它的效果和提交按钮功能一样）
<button>
  提交按钮
</button>
<button>
  <img src="图片的相对路径" width="宽度" height="高度" 
</button>

html5新特性

//选色卡
<input type="color"/>
//没有精确到时间的日期
<input type="date">
//精确到时分的日期
<input type="datetime-local">
//邮箱（如果没有@会有提示功能）
<input type="email">
//数字
<input type="number">

框架集frameset

/为什么要使用？？  之前用浏览器打开一个界面时只是一个网页，如果我想在一个界面同时打开多个网页，那么就要用到框架集
/如何去使用
1.去body(因为body只能显示一个网页)
2.放框架集<frameset></frameset>
3.将框架(页面)放入框架集中<frame></frame>
4.最后设置框架集分为哪几部分
实例1（设置一个上30%；下70%的框架集）
/center.html（主网页）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="30%,70%">
		<frame src="top.html"/>
		<frame src="bottom.html"/>
	</frameset>
</html>

/top.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="red">		
	</body>
</html>

/bottom.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="yellow">
	</body>
</html>

实例2（设置一个左30%；右70%的框架集）
/center.html（主网页）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset cols="30%,70%">
		<frame src="left.html"/>
		<frame src="right.html"/>
	</frameset>
</html>

/left.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="red">		
	</body>
</html>

/right.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="yellow">
	</body>
</html>

实例3（设置一个上30%；下左50%；下右50%的框架集）
//实现方式：先拆成上下两个部分，然后下部分拆成左右两个部分
/center.html(打开的网页)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="30%,70%">
		<frame src="top.html"/>
		<frameset cols="50%,50%">
			<frame src="left.html"/>
			<frame src="right.html"/>
		</frameset>
	</frameset>
</html>

/top.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="blue">
	</body>
</html>

/left.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="red">
	</body>
</html>

/right.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="yellow">
	</body>
</html>

框架集指定位置的跳转（框架集中超链接打开的方式）

/如果想跳转至某个指定的界面，这个时候需要给指定界面取个名字 name="abc"
/然后使用targe="abc"去跳转，但是如果想跳转至某张图片，必须指定<a href="图片的相对路径">

target属性：
    _self(跳转至自身，不会占用整个界面)
    _blank(打开一个新界面，会占用整个界面)
    _top(_parent在本身打开一个新界面，页面会占用整个界面)

内联框架iframe

/作用：在网页中随意添加网页
/属性：src  width  height  frameboder(内联框架的边框)="0/no"

实战练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单练习</title>
	</head>
	<body background="../img/regist_bg.jpg">
		<br />
		<form action="表单个人练习.html" method="post">
			<table width="500px" height="600px" border="5px" bordercolor="#CCCCCC" cellspacing="0px" align="center" bgcolor="white">
				<tr>
					<td width="25%" height="30px" align="left"> 
						<font size="3">&nbsp;&nbsp;&nbsp;用户名</font>
					</td>
					<td width="75%">
							&nbsp;&nbsp;<input type="text" placeholder="请输入用户名" name="username" value="飞奔的嗨少"/>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;密码</font>
					</td>
					<td width="75%">
						&nbsp;&nbsp;<input type="password" placeholder="请输入密码" name="password" value="123456"/>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;确认密码</font>
					</td>
					<td width="75%">
						&nbsp;&nbsp;<input type="password" placeholder="请输入确认密码" name="cmpassword" value="123456"/>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;邮箱</font>
					</td>
					<td width="75%">
						&nbsp;&nbsp;<input type="email" placeholder="请输入邮箱" name="email" value="123456789@qq.com"/>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;姓名</font>
					</td>
					<td width="75%">
						&nbsp;&nbsp;<input type="text" placeholder="请输入姓名" name="name" value="张三"/>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;年龄</font>
					</td>
					<td width="75%">
						&nbsp;&nbsp;<input type="number" placeholder="请输入年龄" name="age" value="35"/>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;性别</font>
					</td>
					<td width="75%">
						&nbsp;<input type="radio" name="sex" checked="checked" value="男"/>男
						<input type="radio" name="sex" value="女"/>女
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;爱好</font>
					</td>
					<td width="75%">
						&nbsp;<input type="checkbox" checked="checked" name="hobby" value="篮球"/>篮球
						<input type="checkbox" name="hobby" value="足球"/>足球
					    <input type="checkbox" checked="checked" name="hobby" value="乒乓球"/>乒乓球
						<input type="checkbox" name="hobby" value="羽毛球"/>羽毛球
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;颜色</font>
					</td>
					<td width="75%">
						&nbsp;&nbsp;<input type="color" name="color"/>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;籍贯</font>
					</td>
					<td width="75%">
						&nbsp;
						<select name="city">
							<option>--请选择--</option>
							<option value="湖南">湖南</option>
							<option value="湖北">湖北</option>
							<option value="福建">福建</option>
							<option value="上海">上海</option>
						</select>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;头像</font>
					</td>
					<td width="75%">
						&nbsp;
						<input type="file" name="icon"/>
					</td>
				</tr>
				<tr>
					<td width="25%" height="100px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;简介</font>
					</td>
					<td width="75%">
						&nbsp;&nbsp;<textarea rows="7" cols="20" placeholder="请输入用户简介信息" name="text"></textarea>
					</td>
				</tr>
				<tr>
					<td width="25%" height="30px" align="left">
						<font size="3">&nbsp;&nbsp;&nbsp;生日</font>
					</td>
					<td width="75%">
						&nbsp;&nbsp;<input type="date" />
					</td>
				</tr>
				<tr>
					<td width="100%" colspan="2" height="40">
						&nbsp;
						<input type="submit" value="注册"/>
						<input type="reset" value="重置"/>
						<input type="button" value="普通按钮"/>
						<input type="image" value="图片按钮" src="../../homepage/img/title2.jpg"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

实战.png