A03-HTML5框架和表单

目录

1.框架

1.1 内嵌框架iframe

1.2 框架标签升级使用

1.3 框架集合frameset

1.4 iframe和frameset的对比

2.表单form


1.框架

1.1 内嵌框架iframe

属性:

  • width\height: 框架宽\高
  • frameborder:框架边框,如果是0就不显示
  • name=‘aaa':给框架起个名字aaa
    • 作用:对应于a标签中的target属性。
  • src:默认打开的页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学习框架和表单</title>
		<meta name="author" content="张梦姣,zmj,ZMJ,ZhangMengjiao"/>
		<meta name="keywords" content="框架,表单,HTML5"/>
		
	</head>
	<body>
		<h1 align='center'>开始学习框架和表单吧</h1>
		<ul>
			<li><a target="aaa" href="https://uland.taobao.com/sem/tbsearch?refpid=mm_26632258_3504122_32538762&keyword=1688%E7%BD%91%E4%B8%8A%E5%95%86%E5%9F%8E&clk1=bf5904735adb92c1883e118aa0d4bf5a&upsId=bf5904735adb92c1883e118aa0d4bf5a">阿里巴巴</a></li>
			<li><a target="aaa" href="https://www.tencent.com/">腾讯</a></li>
			<li><a target="aaa" href="http://www.bjsxt.com">北京尚学堂</a></li>
		</ul>
		
		<iframe src="我的首页.html" frameborder="2" width="1030" height="600" name="aaa"></iframe>
	</body>
</html>

效果展示:

1.2 框架标签升级使用

1.3 框架集合frameset

        frameset元素可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset元素仅仅会规定在框架集中存在多少列或多少行。您必须使用cols或rows 属性。在使用frameset框架集时,当前页面不能再使用body标签,也不能再定义其他内容,只能作为引入其他页面来使用。

frameset

  • 使用frameset框架进行布局的时候必须删除body。
  • rows:上下分成多少行
  • cols:左右分成多少列  cols="第一列宽度,第二列宽度,... ...,"
  • *含义:代表剩下所有的,eg:'20px,*,30px'
  • frameborder='no':去掉边框
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- 注意:使用frameset框架进行布局的时候必须删除body。 -->
	<frameset rows='100px,640px,80px'><!-- 先横向再纵向划分 -->
		<frame src='sxt/top.html'/>
		<frameset cols="15%,*">
			<frame src='sxt/left.html'/>
			
			<frame src='' name='aaa'/>
		</frameset>
		<frame/>
	</frameset>
</html>

1.4 iframe和frameset的对比

共同点:都可以实现网页中整体布局、都是框架标签。

不同点:

  • frameset:对于移动端(手机/平板)支持效果比较差。

2.表单form

问题:

  1. 搜索的信息提交到了哪里去了?
    https://www.baidu.com/s
  2. 搜索的信息是如何传递过去的?
    wd=bjsxt&rsv_spt=1

https://www.baidu.com/s?wd=bjsxt&rsv_spt=1

  • ?之前代表的是提交的地址URL
  • ?之后代表的是携带的参数;参数和参数之间使用&进行分割;参数的形式都是name=value

重点:如果我们想要传递参数,input中必须含有name属性才可以

form属性:

  • action:数据提交地址
  • method:提交方式get/post
    • get():默认,提交数据依附于URL,不安全; 地址栏有限定,传输数据量有限定;效率高
    • post():提交数据依附于文本域,安全;传输数据量无限制;效率低

input属性:

  • type:指定类型
    • ‘text':普通文本框
    • 'submit':提交
    • 'password':密码框
    • ‘radio':单选框    如果想要实现单选效果必须增加相同的name属性,真正提交的给网站的是value的值
    • 'checkbox':多选框
    • ‘file':文件表单项
    • ’hidden':隐藏域 ==》定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段常常存储默认值,或者由JavaScript改变它们的值:
    • ‘reset': 重置 ==》  相当于刷新一次,清空form中的内容【不常用,用户体验差】
    • 'button':普通按钮,以后会结合js一起使用
    • ’email':用于e-mail 地址的字段(当提交表单时会自动对email字段的值进行验证)
       
    • ’url':定义用于输入URL的字段
    • 'color':从拾色器中选取颜色
    • ‘number':只能输入数字,输入字母不显示
    • ’range':度量值
    • ‘date':年月日
    • ’month':年月
    • 'week':年周
  • value:给框框取名字
  • checked:默认勾选,应用于type='radio'/'checkbox'
  • autofocus:规定在页面加载时,域自动地获得焦点。
    注释: autofocus属性适用于所有<input>标签的类型。
  • autofocus/multiple/placeholder/required:

select:下拉框

  • <option>。。。</option>
    • selected:表示已经选中,用于下拉框,区别checked

textarea属性:多行文本框

  • rows='10':文本框只显示10行的大小 
  • cols='30':文本框只显示30个字符的大小 ,但也许会多两个;一个中文占两个字符。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com/s" method="get"><!-- 必须写s -->
			<input type="text" name='wd'/><!-- 普通文本框 -->
			<input type="submit" value="牛逼一下" /><!-- value:给提交框取名字 -->
			<input type="password"/><br/><br/>
			
			男:<input type="radio" name='sex' value="男" checked/>
			女:<input type="radio" name='sex' value='女'/><br/><br/>
			
			抽烟:<input type="checkbox" value='抽烟' checked='checked'/>
			喝酒:<input type="checkbox" value='喝酒'/> <!-- 属性和内容一样,可以只写一个 -->
			打牌:<input type="checkbox" value='打牌' checked/><br/><br/>
			
			<select><!-- 下拉框 -->
				<option>--请选择--</option>
				<option>北京</option>
				<option selected>上海</option>
				<option>深圳</option>
			</select><br/><br/>
			
			个人介绍:<textarea name="" id="" cols="20" rows="4"></textarea><br/><br/><br/>
			
			<input type="file"/><br/><br/><br/><!-- 文件表单项 -->
			<input type="hidden"/><!-- 隐藏域 -->
			<input type="reset"/><!--重置 -->
			<input type="button" value="2022.10.1" onclick="alert('国庆节快乐')"/><br/><br/><!-- 普通按钮 -->
			
			
			Email:<input type="email"/><br/>
			URL:<input type="url" /><br/>
			<input type="submit"><br/><br/>
			color:<input type="color"/><br/>
			年龄:<input type="number"/><br/>
			声音:<input type="range"/><br/><!-- 度量值 -->
			生日(年月日):<input type="date"/><br/><!-- 定义选择年/月/日控件 -->
			生日(年和月):<input type="month"/><br /><!-- ___年__月 -->
			选择周:<input type="week"/><br /><!-- ____年第_周 -->
			
		</form>
	</body>
</html>

展示效果:

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值