• HTML5-iframe内联框架、表单元素、功能组件

    目录

    1.iframe内联框架

    2.初识表单post和get提交

    3.文本框和单选框

    4.按钮和多选框

    5.列表框文本域和文件域

    6.搜索框滑块和简单验证

    1.iframe内联框架

    格式：

    src：引用页面地址

    name：框架标识名

    <iframe src="path" name="mainFrame">iframe>

    代码测试：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>内联框架iframetitle>
    6. head>
    7. <body>
    8. <iframe src="//player.bilibili.com/player.html?aid=678141914&bvid=BV1fm4y1D7i6&cid=485620915&page=1"
    9.         scrolling="no"
    10.         border="0"
    11.         frameborder="no"
    12.         framespacing="0"
    13.         allowfullscreen="true"> iframe>
    14.  
    15. <iframe src="https://www.bilibili.com/"  frameborder="0" width="500px" height="500px">iframe>
    16.  
    17. <iframe src="" name="hello" frameborder="0" width="500px" height="500px">iframe>
    18.  
    19. <a href="我的第一个网页.html" target="hello">点击跳转a>
    20. body>
    21. html>

    iframe标签与a标签的配合使用相当于a标签的target属性设为_self 

    2.初识表单post和get提交

    1）表单语法

    form 的属性说明：

    • method：必要项，规定如何发送表单数据，常用值：get 或 post
    • action：必要项，表示向何处发送表单数据，可以是网站，也可以是一个请求处理地址

    2）测试get

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>登录注册title>
    6. head>
    7. <body>
    8. <h1>注册h1>
    10. <form action="我的第一个网页.html" method="get">
    12.     <p>名字：<input type="text" name="username">p>
    14.     <p>密码：<input type="password" name="pwd">p>
    15.     <input type="submit">
    16.     <input type="reset">
    17. form>
    18. body>
    19. html>

    运行结果：

    网页地址部分会附带提交的参数信息 

    3）与post 的对比：只需将上述代码的提交方式由get改为post即可

    如何获得post提交的元素：

    在浏览器中按 F12 打开开发者工具，选择 Network，页面点击提交后会生成箭头所指的一条记录，点击该记录，在FormData处可看见提交信息

    4）总结

    get 和 post 的区别：

    • get 提交：可以在 url 中看到提交的信息，不安全，高效
    • post 提交：比较安全，可以传输大文件

    3.文本框和单选框

    1）表单元素格式

    代码测试：只需在上述2中代码中添加几个元素即可

    2.     <p>名字：<input type="text" name="username" value="biubiu" maxlength="8" size="30">p>

    2）测试单选框

    • value：单选框的值
    • name：表示分组，其中必须是同一组的单选框才能实现单选
    • checked：该属性可以设置默认被选中
    2.     <p>性别：<input type="radio" value="boy" name="sex">男
    3.             <input type="radio" value="girl" name="sex">女
    4.     p>

    4.按钮和多选框

    1）测试多选框

    • value：多选框的值
    • name：表示分组，根据代码规范，同一组多选最好设置同样的name
    • checked：该属性可以设置默认被选中
    2.     <p>爱好：
    3.         <input type="checkbox" value="sleep" name="hobby">睡觉
    4.         <input type="checkbox" value="code" name="hobby">写代码
    5.         <input type="checkbox" value="chat" name="hobby">聊天
    6.         <input type="checkbox" value="music" name="hobby">听音乐
    7.     p>

     2）测试按钮

    2.     <p>按钮：
    3.         <input type="button" name="btn1" value="click it">
    4.         <input type="image" src="../resource/image/1.PNG">
    5.     p>

    5.列表框文本域和文件域

    1）测试下拉框

    • name：列表的名称
    • value：选项的值
    • selected：默认选中第一个值，可以通过这个属性修改默认选中的值
    2.     <p>下拉框：
    3.         <select name="国家" >
    4.             <option value="SuZhou" selected>苏州option>
    5.             <option value="ShangHai">上海option>
    6.             <option value="BeiJing">北京option>
    7.             <option value="NanJing">南京option>
    8.         select>
    9.     p>

    2）测试文本域

    • cols：定义文本域列数
    • rows ：定义文本域行数
    2.     <p>反馈：
    3.         <textarea name="textarea"cols="30" rows="8">文本内容textarea>
    4.     p>

    3）测试文件域

    • 点击选择文件按钮，会打开文件管理器，选择需要上传的文件。选中后会显示选择的文件名
    2.     <p>
    3.         <input type="file" name="files">
    4.         <input type="button" value="上传" name="upload">
    5.     p>

    6.搜索框滑块和简单验证

    1）测试邮箱验证

    • 在提交时会进行邮箱格式验证；如果输入的值不是正确的邮箱格式，那么在提交时会有提示消息
    1.     
    2.     <p>邮箱：
    3.         <input type="email" name="email">
    4.     p>

    2）url验证

    • 在提交时会进行网址格式验证；如果输入的值不是正确的网址格式，那么在提交时会有提示消息
    2.     <p>url:
    3.         <input type="url" name="url">
    4.     p>

    3）数字验证

    • max：最大值
    • min：最小值
    • step：步长，即每次增减的数量
    2.     <p>数字：
    3.         <input type="number" name="num" max="100" min="0" step="10">
    4.     p>

    4）测试滑块

    • max：最大值
    • min：最小值
    • step：步长，即每次增减的数量
    2.     <p>滑块：
    3.         <input type="range" name="voice" min="0" max="100" step="2">
    4.     p>

    5）测试搜索框

    2.     <p>搜索：
    3.         <input type="search">
    4.     p>
  • 相关阅读:
    Spring事务及分布式事务专题
    【MySQL系列】 第四章 · 约束
    DevExpress WinForms图表组件 - 直观的数据信息呈现新方式！（一）
    SSD: Single Shot MultiBox Detector（2016.11）
    C++标准模板（STL）- 输入/输出操纵符-(std::endl)
    全网都在用的英语配音软件～
    java图片转成base64传给前端
    Redis数据缓存（Redis的缓存击穿和穿透的区别）
    使用记录-MongoDB
    讨论 | AR 应用落地前，要做好哪些准备？
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126444463