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

最新推荐文章于 2024-11-17 20:29:19 发布

小黑神zxs

最新推荐文章于 2024-11-17 20:29:19 发布

阅读量350

点赞数 1

分类专栏： HTML学习文章标签： html 前端 idea html5

本文链接：https://blog.csdn.net/ZXS1002/article/details/122547273

版权

HTML学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

内联框架

<!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>

    <!--单选框标签 radio
    input 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>