内联框架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联框架学习</title><!--iframe+tab-->
</head>
<body><!--iframe内联框架
src：地址
w-h：宽度和高度
-->
<iframe src="https://www.baidu.com" name="hello" frameborder="0" width="800" height="500" ></iframe><a href="1.我的第一个网页.html" target="hello">跳转</a>
</body>
</html>

这里百度屏蔽了我们的请求，不要在意！

表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单学习</title><!--登录注册-->
</head>
<body><h1>注册</h1><!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理的地址
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post提交：比较安全，传输大文件
表单应用
readonly  只读
hidden  隐藏域
disable  禁用
表单初级验证
placeholder  提示信息
required  非空判断
pattern  正则表达式https://deerchao.cn/tutorials/regex/common.htm
-->
<form action="1.我的第一个网页.html" method="get"><!--文本输入框：input type="text"value="狂神好帅"  默认初始值maxlength="8"  最长能写几个字符size="16"  文本框的长度--><p>账号:<input type="text" name="username" placeholder="请输入用户名"></p><!--密码输入框：input type="password" --><p>密码:<input type="password" name="pw" placeholder="请输入密码"></p><!--单选框标签 radioinput type="radio"value:单选框的值name：表示组--><p>性别:<input type="radio" value="boy" name="sex">男<input type="radio" value="girl" name="sex">女</p><!--多选框 input type="checkbox"checked 默认选中--><p>爱好:<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="code" name="hobby" checked>敲代码<input type="checkbox" value="chat" name="hobby">聊天<input type="checkbox" value="girlfriend" name="hobby">女朋友<input type="checkbox" value="game" name="hobby">游戏</p><!--按钮input type="button" 普通按钮input type="image"  图像按钮input type="submit"  提交input type="reset"  重置--><p>按钮:<input type="button" name="bt1" value="点击变长"><input type="image" src="../resources/image/洛克王国.png"><a href="https://www.4399.com/flash/32979.htm" target="_blank" title="洛克王国"><img src="../resources/image/洛克王国.png" alt="洛克王国图片" ></a></p><!--下拉框，列表框--><p>国家:<select name="列表名称"><option value="us">美国</option><option value="china" selected>中国</option><option value="eth">瑞士</option><option value="jp">日本</option></select></p><!--文本域行：cols="30"列：rows="10"--><p>反馈:<textarea name="textarea" id="" cols="30" rows="10"></textarea></p><!--文件域 input type="file"--><p><input type="file" name="files"><input type="button" value="上传" name="upload"></p><!--邮件验证--><p>邮箱:<input type="email" name="email"></p><!--url验证--><p>URL:<input type="url" name="url"></p><!--数字验证--><p>商品数量:<input type="number" name="num" min="0" max="100" step="1"></p><!--滑块--><p>音量:<input type="range" name="voice" min="0" max="100" step="1"></p><!--搜索框--><p>搜索:<input type="search" name="search" disabled></p><!--提升鼠标可用性--><label for="mark">分数：</label><input type="number" id="mark" value="98" max="100" min="0"><!--提交，重置--><p><input type="submit"><input type="reset"></p>
</form>
</body>
</html>

部分截图

表单应用

作者有话说

博客创作不易，希望看到这里的读者，动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

HTML学习04之内联框架和表单相关推荐

框架详解_详解：python Web框架flask表单实现（建议收藏）
今天为大家带来的内容是:python框架flask表单实现详解文章内容主要介绍了python框架flask表单实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需 ...
用HTML制作表单表格能学到什么,Html学习之十七（表格与表单学习--排行版制作）...
表格与表单01 table{ width: 300px; height: 40px; margin: 100px auto; border-collapse: collapse; } .th2{ fl ...
PHP Yii框架之表单验证规则大全
Yii是一个基于组件的高性能PHP框架,用于开发大型Web应用.Yii采用严格的OOP编写,并有着完善的库引用以及全面的教程,本文给大家介绍php yii框架之表单验证规则大全,感兴趣的朋友一起学习吧 ...
视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
JavaScript学习（六十八）—表单校验案例
JavaScript学习(六十八)-表单校验案例学习内容 (一).如何获取页面的元素-利用id获取格式:var 变量名称 =document.getElementById('要获取的元素的id的值 ...
php验证规则表单,PHP Yii框架之表单验证规则大全
Yii是一个基于组件的高性能PHP框架,用于开发大型Web应用.Yii采用严格的OOP编写,并有着完善的库引用以及全面的教程. 废话不多说了,直接给大家贴代码了. class ContactForm ...
HTML5之内联框架和音视频标签
1.内联框架使用iframe标签向当前页面中引入其他页面属性: -src 指定要引入的网页的路径 -framborder 指定内联框架的边框(只有0和1,0表示没有边框,1表示有边框) 2.音频标 ...
框架生成的HTML修改,Django框架form表单验证修改html标签的样式
经过前面的学习,我们大致可以知道CharField.EmailField等等以Field结尾的方法,只能帮助我们对用户发来的信息做验证,不能生成html标签.字段本身自己虽然只做验证,但是我们可以通过 ...

HTML学习04之内联框架和表单

内联框架

表单

表单应用

作者有话说

HTML学习04之内联框架和表单相关推荐

最新文章

热门文章