HTML定义及标签简单理解3(表单,内联框架)

最新推荐文章于 2024-04-10 20:23:08 发布

原来她是猫

最新推荐文章于 2024-04-10 20:23:08 发布

阅读量285

点赞数 2

文章标签： 1024程序员节 html

本文链接：https://blog.csdn.net/qq_45866940/article/details/109260922

版权

本文详细介绍了HTML中的表单元素，包括文本输入、密码输入、单选按钮、复选框、文件上传、下拉选择和多行文本域等，并展示了如何设置属性和事件处理。同时，讲解了内联框架的概念，如何在网页中嵌套子窗口，以及使用`target`属性控制链接在父窗口还是子窗口中打开。示例中包含了多个实例，帮助理解其工作原理。

摘要由CSDN通过智能技术生成

1.表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="A网站.html" method="get">
			<!-- form 提供输入,选择的组件.
                      用户输入信息后提交至服务器,
                      最终保存在数据库中
				 action="服务地址(url)"
				 method="提交方式(get/post)"-->
				 <!-- <p>账号<input type="text"文本框
				  id=""唯一,不能以数字开头,自定义
				  name=""自定义,可重复
				  placeholder="请输入账号"
				  readonly="readonly"只读
			      size="宽度" maxlength="最大输入字数" /></p> -->
			 <label for="aId">账号:</label>
			 <input type="text" id="aId" 
			 name="aId" value="123" placeholder="请输入账号"
			  /><br />
			 <!-- 密码框 type="password" -->
			 <label for="bid">密码:</label><input  type="password" id="bid"/><br />
			 <!-- 单选框  type="radio"
			             name="" 分组,name相同为一组
						 value=""凡是选择组件需给出默认值
						 checked="checked"默认选中
				  多选框  type="checkbox"-->
			 性别:<input type="radio" name="sex" value="男" checked="checked" />男
			      <input type="radio" name="sex" value="女" id="womanId" />
				       <label for="womanId">女</label><br />
		     课程:<input type="checkbox" name="sub" value="java"
			 checked="checked"/>java
			      <input type="checkbox" name="sub" value="jsp"
				  id="kc"/><label for="kc">jsp</label>
				  <input type="checkbox" name="sub" value="c++"/>c++<br>
			 <!-- 文件框 type="file" accept="选择文件类型"-->
			 文件:<input type="file" name="file" accept="image/gif" /><br />
			 <!-- 下拉选择框 <slect name=""><option value=""> 
			       name放在select中,option中添加value值
			       默认选择 selected="selected"-->
			 省份:<select name="province">
				 <option value="101">北京</option>
				 <option value="610" selected="selected">陕西</option>
				 <option value="210">天津</option>
			 </select><br />
			 <!-- 多行文本域<textarea name="address" rows="1"行数
			 cols="20"列数>value值</textarea> -->
			 地址:<textarea name="address" rows="1" cols="20">陕西西安</textarea><br />
            <!-- 按钮  <input type="reset" value="重写"/>
				            <input type="submit" value="进入"/>
				            <input type="button" value="按一按" 
							οnclick="alert('输入密码不正确')" />可在value中修改按钮名字-->
			 <input type="reset" value="重写"/>
			 <input type="submit" value="进入"/>
			 <input type="button" value="按一按" onclick="alert('输入密码不正确')" />
			 
		</form>
	</body>
</html>

2.内联框架

网页中显示网页,即为父窗口中打开子窗口

父窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		父窗口
		<a href="http://www.baidu.com" target="rooo">百度</a>
		<a href="http://www.qq.com" target="rooo">腾讯</a>
		<iframe src="子窗口.html" frameborder="1" height="500"
		width="400" name="rooo" >子窗口</iframe>
		
		
	</body>
</html>

子窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		子窗口
		<iframe src="孙窗口.html" frameborder="1" height="200" >孙窗口</iframe>
	</body>
</html>

从父窗口选择百度,用子窗口打开如图:
在这里插入图片描述
此外,我们通过第三个"孙窗口"来理解

target="_top"返回顶部
target="_parent"返回上一级窗口

孙窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		孙窗口
		<a href="http://www.baidu.com" target="_top">百度</a>
		<a href="http://www.qq.com" target="_parent">腾讯</a>
	
	</body>
</html>