HTML04：iframe内联框架和表单标签
iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<h1>iframe内联框架</h1>
<!--iframe内联框架-->
<!--
src：引用页面路径
frameborder：边框宽度
width：宽度
height：高度
allowFullScreen：允许全屏
name：框架标识名，链接标签可以根据target属性在该框架内打开链接
-->
<iframe src="https://v.qq.com/txp/iframe/player.html?vid=g0014r3khdw" name="blog" frameborder="0" allowFullScreen="true" width="100%" height="300px"></iframe>
<!--正常情况会打开新的标签页，但是如果存在框架标识名，就可以在那个框架里打开-->
<a href="https://www.yuankexue.cn" target="blog">点击跳转</a>
</body>
</html>
表单标签
输入标签
列表框标签
文本域标签
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
<a name="top"></a>
<h1>表单标签</h1>
<h2>输入标签</h2>
<h2>列表框标签</h2>
<h2>文本域标签</h2>
<h2>表单验证</h2>
<h3>登录</h3>
<!--表单标签-->
<!--
method：get/post
action：向何处发送表单数据，可以是网站，也可以是一个请求处理地址
-->
<form action="https://www.yuankexue.cn" method="get">
<!--输入标签-->
<!--
type：输入格式（文本text，密码password，按钮button，图片按钮image，单选框radio，多选框checkbox，文件域file，滑块range、搜索search）
name：表单元素的名称
value：元素默认值（radio属性必须要）
placeholder：提示输入信息
required：不能为空
pattern：正则表达式
readonly：只读
disabled：禁用
hidden：隐藏域
-->
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<p>密码：<input type="password" name="password" placeholder="请输入密码" required></p>
<!--
单选框和多选框的name属性必须一致，否则无法识别为一个组
checked：默认勾选哪个选项
-->
<p>性别：
<input type="radio" name="gender" value="man" checked>男
<input type="radio" name="gender" value="woman">女
</p>
<p>感兴趣的领域：
<input type="checkbox" name="interest" value="Java" checked>Java
<input type="checkbox" name="interest" value="Python">Python
<input type="checkbox" name="interest" value="PHP">PHP
</p>
<p><input type="image" src="../万叶.jpg" name="photo"></p>
<p>简历：
<input type="file" name="resume">
<input type="button" name="upload" value="上传">
</p>
<p>滑块：
<input type="range" name="bright" min="1" max="100">
</p>
<p>搜索：
<input type="search" name="search" placeholder="请输入要搜索的内容">
</p>
<!--表单验证-->
<!--邮箱验证-->
<p>邮箱：
<input type="email" name="email" placeholder="请输入QQ邮箱">
</p>
<!--网址验证-->
<p>网址：
<input type="url" name="url" placeholder="请输入https网址">
</p>
<!--数字验证-->
<p>年龄：
<input type="number" name="age" min="1" max="100" step="1">
</p>
<!--列表框标签-->
<!--
name：列表名称
option：子选项
selected：默认显示哪一个选项
-->
<p>国籍：
<select name="国籍">
<option value="country">法国</option>
<option value="country" selected>中国</option>
<option value="country">俄罗斯</option>
</select>
</p>
<!--文本域标签-->
<!--
name：文本域名称
cols：文本域列数
rows：文本域行数
-->
<p>评论：
<textarea name="comment" cols="30" rows="10" placeholder="请输入评论"></textarea>
</p>
<p>
<input type="submit" name="login" value="登录">
<input type="reset" name="clear" value="清空">
</p>
<!--增强鼠标可用性-->
<!--
1、在input标签中加上id
2、让label标签的for属性等于该id，就可以实现点击label的文字，自动选中input输入框
-->
<p>
<label for="mark">点击自动选框：</label>
<input type="text" name="name" id="mark">
</p>
<a href="#top">回到顶部</a>
</form>
</body>
</html>
浙公网安备 33010602011771号