5 表单及表单应用

Notes by : chu-jun 慢慢
Learn from : 遇见狂神说
Blog : https://www.cnblogs.com/manmc/
Gitee : https://gitee.com/chujuncj/html
Motto : 择善修身，立学济世。

5.1 页面结构分析

img

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

5.2 iframe内联框架

在一个网站中嵌套另外一个(可以想作成是一个容器)

img

<!--iframe 内联框架 (可以当作一个容器)
scr : 地址
w-h : 宽度，高度
-->
<iframe src="" name="hello" frameborder="0" width="1000" height="800"></iframe>
<!--target 中的hello 指向框架中的hello-->
<a href="https://www.cnblogs.com/manmc" target="hello">点击跳转</a>

<!--内联框架哔哩哔哩
鼠标放在转发的图标上，点击嵌套代码复制，如下
-->
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->

5.3 表单语法

5.3.1 初识表单post和get提交

注册、登录、提交文件...

img

<h1>注册</h1>
<form action="1.我的第一个网页.html" method="post">

    <!--文本输入框 : input type="text"-->
    <p>名字: <input type="text" name="username"></p>

    <!--密码框 : <input type="password" name="pwd">-->
    <p>密码: <input type="password" name="pwd"></p>

    <p>
        <input type="submit">
        <input type="reset">
    </p>

5.3.2 表单元素格式

img

5.3.2.1 单选框

<!--单选框标签
    input type="radio"
    value : 单选框的值
    name : 表示组
    checked : 默认选项
    -->
    <p>性别:
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl"name="sex"/>女
    </p>

5.3.2.2 多选框

    <!--多选框
    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="game" name="hobby"/>游戏
    </p>

5.3.2.3 按钮

     <!--按钮
    input type="button" : 普通按钮
    input type="image"  : 图像按钮
    input type="submit" : 提交按钮
    input type="reset" : 重置按钮
    -->
    <p>
        <input type="button" name="btn1" value="点击变长">
        <!--点击图片按钮-->
        <input type="image" src="../resources/image/kb.jpg" width="500" height="300">
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>

5.3.2.4 下拉框(列表框)

    <!-- 下拉 ，列表框
    selected : 默认选项
    -->
    <p>国家:
        
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="us">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="yingdu">印度</option>
        </select>
    <p>

5.3.2.5 文本域

 <!--文本城
        cols="5on rows="10"
    -->
    <p>反馈:
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

5.3.2.6 文件域

    <!--文件城
    input type="file"name="files"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

5.3.2.7 简单验证

        <!--邮件验证-->
    <p>邮箱:
        <input type="email" name="email">
    </p>

    <!--URL-->
    <p> URL:
        <input type="url name="urlu>
    </p>
    <!-- 数字-->
    <p>商品数量:
        <input type="number" name="num" max="100" min="g" step="1">
    </p>

5.3.2.8 滑块

<!--滑块
    input type="range"
    -->
    <p>音量 :
    <input type="range" name="voice" min="g" max="100" step="2">
    </p>

5.3.2.9 搜索框

    <!--搜索框-->
    <p>搜索 :
        <input type="search" name="search">
    </p>

5.4 表单的应用

  • 隐藏域
  • 只读
  • 禁用
<!-- 只读 readonly-->

<p>名字: <input type="text" name="username" value="admin" readonly> </p>

<!-- 禁用 disabled-->
<p>性别:
    <input type="radio" value="boy" name="sex" checked disabled/>男
    <input type="radio" value="girl" name="sex"/>女
</p>

<!-- 隐藏 hidden
hidden value="1234561 默认密码
-->
<p>密码: <input type="password" name="pwd" hidden value="1234561> </p>

<!--增强鼠标可用性-->
<p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark">
</p>