Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架

最新推荐文章于 2023-01-09 00:59:47 发布

C先生

最新推荐文章于 2023-01-09 00:59:47 发布

阅读量2.2k

点赞数 9

分类专栏：学习笔记文章标签： HTML HTML学习 HTML框架 input标签 HTML内嵌框架

本文链接：https://blog.csdn.net/hjkuuyyg/article/details/90056916

版权

学习笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

第三天HTML中input标签常用属性、框架集、内嵌框架

一、input标签常用属性
二、其它表单属性
三、框架集（frameset、frame）
四、内嵌框架（iframe）

一、input标签常用属性

表单常用于收集用户输入，然后提交给服务器，由于收集数据种类繁杂，如果只使用文本域收集数据，对数据的格式校验、转换等都存在较大困难，故常使用不同表单属性来收集各种类型的数据，可以减少数据格式校验和转换的困难！常用的表单属性有单行文本域（text）、密码框（password）、单选按钮（radio）、复选框（checkbox）、日期时间（date）、邮箱（email）、提交按钮（submit）、图片按钮（image）、重置按钮（reset）、普通按钮（button）······

表单数据提交特点：

表单数据均以键值对方式提交给服务器，键为name属性的值，值为用户输入，部分类型除外(单选按钮、复选框、下拉列表等，值为value定义的值)

（一）、文本框（text）

用于收集少量文本数据，不可换行。

<input type="text" name="uname" placeholder="张三" autofocus="autofocus" autocomplete="on"  pattern="^[a-zA-Z]\w{5,29}$" title="请输入用户名6-30位字母、数字或“_”,字母开头"/>
type="text"：定义该input类型为文本框
name="uname" ：这个文本框的名字叫做“uname”
placeholder="张三"：文本框内显示提示信息“张三”，仅当文本框为空时存在
autofocus="autofocus"：网页加载即获得焦点
autocomplete="on"：表单提交后点击回退按钮，浏览器使用提交前内容自动填写表单（正常操作会清空表单）
required="required" ：提示用户必须输入，不能为空，空则无法提交
pattern="^[a-zA-Z]\w{5,29}$"：使用正则表达式验证用户输入内容
title="请输入用户名6-30位字母、数字或“_”,字母开头"：鼠标悬停及输入不合法内容的提示信息

（二）、密码框（password）

用于网页密码输入，不显示字符，用圆点或星代替。

<input type="password" name="pwd" required="required" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$" title="密码必须包含大小写字母和数字的组合，可以使用特殊字符，至少8位"/>
type="password"：定义一个密码框
name="pwd"：这个密码框的名字叫“pwd”
required="required"：这框必须输入不能为空，空的无法提交
pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$"：使用正则表达式验证用户输入内容
（密码必须包含大小写字母和数字的组合，可以使用特殊字符，至少8位）
不符合就提示用户（提示内容见title）

（三）、单选按钮（radio）

单选按钮具有互斥性，只能选择一组中的一个！

<input type="radio" name="sex"  value="0"  checked="checked"/>男
<input type="radio" name="sex"  value="1"  />女
type="radio"：定义一个单选按钮
name="sex"：单选按钮的组名（同一组的单选按钮，该名称必须相同），这就是表单提交键值对中的键名，必须具有唯一性
value="0" ：表单提交键值对中的值（注意提交的数据不是“男”，是“0”）
checked="checked"：表示该按钮默认选中

(四）、复选框（checkbox）

复选框常用于选择一组预先定义的内容，可多选，选项间不存在互斥性。

<input type="checkbox" name="protocol" value="1"/>我已阅读并同意遵守···
type="checkbox"：定义一个复选框
name="protocol"：组名叫protocol，同单选框同一组复选框组名必须一致
value="1"：勾选后提交表单时键值对中的值，未定义该属性，则默认为“on”

（五）、日期时间（date）

日期时间类似插件，可供用户手动选择日期，以减少手动输入造成的错误日期！
部分浏览器不支持

<input type="date" name="birthday" />
type="date"：定义一个日期选择框，可弹出日期选择窗口 
name="birthday"：提交表单时键值对的键名

（六）、邮箱（email）

用于接收邮箱输入，输入完毕浏览器会校验输入是否合法。

<input type="email" name="email"/>
type="email"：定义一个接收邮箱的文本框

（七）、按钮（submit、image、reset、button）

submit、image按钮点击提交表单数据至action中的地址；
reset按钮点击清空表单数据；
button按钮常与JS连用，实现特定功能。

<input type="submit" value="注册" />
<input type="image" src="img/submit.png" />
<input type="reset" value="重置" />
<input type="button" name="button" value="普通按钮，常用于JS触发事件" onclick="test()"/>
	<script type="text/javascript">
		function test(){
			alert("我是JS！");
		}
	</script>

（八）、下拉列表（select）

从一组特定选项中选择一项。

<select name="IDType">
   	<option value="0" selected="selected">中国居民身份证</option>
   	<option value="1">港澳居民来往内地通行证</option>
   	<option value="2">台湾居民来往内地通行证</option>
   	<option value="3">护照</option>
 </select>
  <select></select>定义下拉列表
  name="IDType"：返回服务器的键名
  value="0"：该项的值

（九）案例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素学习</title>
	</head>
	<body>
		<form action="#" method="get">
			<table border="1" width="50%">
				<tr>
					<td>用户名：</td>
					<td>
						<input type="text" name="uname" placeholder="ZhangSan123" autofocus="autofocus" autocomplete="on" required="required" pattern="^[a-zA-Z]\w{5,29}$" title="请输入用户名6-30位字母、数字或“_”,字母开头"/>
					</td>
					<td>6-30位字母、数字或“_”,字母开头</td>
				</tr>
				<tr>
					<td>登录密码：</td>
					<td>
						<input type="password" name="pwd" required="required" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}$" title="密码必须包含大小写字母和数字的组合，可以使用特殊字符，至少8位"/>
					</td>
					<td>密码必须包含大小写字母和数字的组合，可以使用特殊字符，至少8位！</td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td>
						<input type="password" name="conpwd" />
					</td>
					<td>密码需要与上面一致</td>
				</tr>
				<tr>
					<td>证件类型：</td>
					<td>
						<select name="IDType">
							<option value="0" selected="selected">中国居民身份证</option>
							<option value="1">港澳居民来往内地通行证</option>
							<option value="2">台湾居民来往内地通行证</option>
							<option value="3">护照</option>
						</select>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>姓名：</td>
					<td>
						<input type="text" name="name"/>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>证件号码：</td>
					<td>
						<input type="text" name="ID" required="required" pattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)" title="请输入正确的身份证号码"/>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>证件有效期：</td>
					<td>
						<input type="date" name="IDperiod"/>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>出生日期：</td>
					<td>
						<input type="date" name="birthday" />
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="sex"  value="0" checked="checked"/>男
						<input type="radio" name="sex"  value="1" />女
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td>
						<input type="email" name="email"/>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>手机号码：</td>
					<td>
						<input type="number" name="phoneNumber"/>
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>旅客类型：</td>
					<td>
						<select name="travellerType">
							<option value="0" selected="selected">成人</option>
							<option value="1">儿童</option>
							<option value="2">学生</option>
							<option value="3">伤残军人</option>
						</select>
						
					</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td colspan="2">
						<input type="checkbox" name="protocol" value="1"/>我已阅读并同意遵守 <a href="#">《中国铁路客户服务中心网站服务条款》 《隐私权政策》
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="注册" />
					</td>
					<td>
						<input type="image" src="img/submit.png" />
					</td>
					<td>
						<input type="reset" value="重置" />
						<input type="button" name="button" value="普通按钮，常用于JS触发事件" onclick="test()"/>
						<script type="text/javascript">
							function test(){
								alert("我是JS！");
							}
						</script>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

（十）、案例运行效果

在这里插入图片描述

二、其它表单属性

（一）、隐藏域（fidden）

隐藏域用于记录一些不需要用户知道，但是对服务器有用的信息，隐藏域的内容不显示在窗口中！

<input type="hidden" name="ID" value="我是隐藏域，你看不见我" />
type="hidden"：定义隐藏域
name="ID"：键名，让服务器知道是谁
value="我是隐藏域，你看不见我"：返回服务器的数据，用户看不见

（二）、文件域（file）

文件域用于向服务器传递文件。

<input type="file" name="image" />
type="file"：定义文件域

（三）、多行文本框（textarea）

能显示多行文本，收集用户输入或者向用户展示大量文本时使用，可设置只读。

<textarea name="春夜喜雨" rows="10" cols="40" readonly="readonly">
	好雨知时节，当春乃发生。
	随风潜入夜，润物细无声。
	野径云俱黑，江船火独明。
	晓看红湿处，花重锦官城。
</textarea>
<textarea></textarea>：定义多行文本框
rows="10" cols="40"：设置文本框大小
readonly="readonly"：设置只读模式（默认不开启）

（四）、案例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>其它表单元素</title>
	</head>
	<body>
		<form action="#" method="get">
			<table border="1" width="50%">
				<tr>
					<td>隐藏域</td>
					<td>
						<input type="hidden" name="ID" value="我是隐藏域，你看不见我" />
					</td>
				</tr>
				<tr>
					<td>文件域</td>
					<td>
						<input type="file" name="image" />
					</td>
				</tr>
				<tr>
					<td>多行文本域</td>
					<td>
						<textarea name="春夜喜雨" rows="10" cols="40" readonly="readonly">
							好雨知时节，当春乃发生。
							随风潜入夜，润物细无声。
							野径云俱黑，江船火独明。
							晓看红湿处，花重锦官城。
						</textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

（五）、案例运行效果

在这里插入图片描述

三、框架集（frameset、frame）

框架集主要用于页面的整体布局。
在这里插入图片描述
一般网页布局分上中下，左中右，如上图表示的那样，中间窗格根据用户点击展示不同内容，这就是框架集实现的。

（一）、框架集的使用

1、首先准备好导航、版权、左侧、右侧、以及中间点击显示的网页

FrameHead.html：导航页
FrameFooter.html：版权页
FrameLeft.html：左侧页面
FrameRight.html：右侧页面
FrameJiaoCHeng.html：内容页1
FrameBianJiQi.html：内容页2
FrameJianJie.html：内容页3
FrameJiChu.html：内容页4
左侧页面部分源码
<ul>
	<li><a href="FrameJiaoCHeng.html" target="center">教程</a></li>
	<li><a href="FrameJianJie.html" target="center">简介</a></li>
	<li><a href="FrameBianJiQi.html" target="center">编辑器</a></li>
	<li><a href="FrameJiChu.html" target="center">基础</a></li>
</ul>
target="center"：目标页面在center（center在中间窗格定义）这个地方显示
默认（_self）在本页面显示，覆盖当前页面

2、新建主页，删掉body标签，将网页分割为上中下三块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框架学习</title>
	</head>
	<frameset rows="140,*,290" frameborder="0">
		<frame src="FrameHead.html" />
		<frame />
		<frame src="FrameFooter.html"/>
	</frameset>
</html>
rows="140,*,290"：将页面分为上中下三块，上140px，下290px，剩下的给中
frameborder="0"：不显示框架边框
<frame src="FrameHead.html" />：用frame标签插入网页

3、将中间块再分割为左中右三块

<frameset rows="140,*,290" frameborder="0">
		<frame src="FrameHead.html" />
		<frameset cols="120,*,200">
			<frame src="FrameLeft.html"/>
			<frame src="FrameJiaoCHeng.html" name="center"/>
			<frame src="FrameRight.html" />
		</frameset>
		<frame src="FrameFooter.html"/>
	</frameset>
	cols="120,*,200"：cols左中右分割
	<frame src="FrameJiaoCHeng.html" name="center"/>：插入中间窗格网页
	name="center"：位置标记，左侧页面点击跳转时使用

4、将相应网页用frame标签插入框架集中（完成）

<frameset rows="140,*,290" frameborder="0">
		<frame src="FrameHead.html" />
		<frameset cols="120,*,200">
			<frame src="FrameLeft.html"/>
			<frame src="FrameJiaoCHeng.html" name="center" scrolling="no"/>
			<frame src="FrameRight.html" />
		</frameset>
		<frame src="FrameFooter.html"/>
	</frameset>
	scrolling="no"：不显示滚动条

（二）、案例源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>框架学习</title>
	</head>
	<frameset rows="140,*,290" frameborder="0">
		<frame src="FrameHead.html" />
		<frameset cols="120,*,200">
			<frame src="FrameLeft.html"/>
			<frame src="FrameJiaoCHeng.html" name="center" scrolling="no"/>
			<frame src="FrameRight.html" />
		</frameset>
		<frame src="FrameFooter.html"/>
	</frameset>
</html>

（三）、案例运行效果

在这里插入图片描述

四、内嵌框架（iframe）

内嵌框架主要用于页面复用。便于修改，
内嵌框架的本质就是在需要该网页的地方使用网页引用，这样只要修改被引用的网页，引用该网页的地方就都修改了！

内嵌框架在body中，不能删除body！

<iframe src="Iframe_123406head.html" width="100%" height="140"></iframe>
<iframe src=""></iframe>：定义内嵌框架
src="Iframe_123406head.html"：被引用网页的地址
width="100%" height="140"：设置引用网页的大小

C先生

关注

9
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架

第三天HTML中input标签常用属性、框架集、内嵌框架一、input标签常用属性表单数据提交特点：（一）、文本框（text）（二）、密码框（password）（三）、单选按钮（radio）(四）、复选框（checkbox）（五）、日期时间（date）（六）、邮箱（email）（七）、按钮（submit、image、reset、button）（八）、下拉列表（select）（九）案例源码（十）、案...
复制链接

扫一扫