iframe窗口和form表单的应用

最新推荐文章于 2024-08-26 08:33:56 发布

永不被定义

最新推荐文章于 2024-08-26 08:33:56 发布

阅读量876

点赞数

文章标签：前端 html vscode visual studio code

本文链接：https://blog.csdn.net/weixin_51526948/article/details/125180787

版权

1.iframe窗口的基本内容

2.form表单基本内容

1.iframe窗口的基本内容

iframe声明一个iframe窗口，src指向的网页会展示在窗口里，name属性用来设置窗口的名字，frameborder用来设置窗口边框的宽度，width设置窗口宽度，height设置窗口高度。

需要使用窗口时用target=“窗口名”，下面通过一个例子来演示

代码如下

<body>
    <iframe name="页面布局" src="class09页面布局.html" frameborder="5" width="575px" height="500px">
    </iframe>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <iframe src="http://www.bdqn.cn" frameborder="3" width="575px" height="500px"></iframe>

    <br>

    <a href="http://www.bdqn.cn" target="页面布局">下边显示第二页</a><br>
    <a href="class09页面布局.html" target="页面布局">下面显示第三页</a>

</body>

运行效果如下

当点击“下边显示第二页”时，窗口会显示在此链接下放置的网页

2.form表单基本内容

form声明一个表单

form表单的action属性用来表示发送表单数据到哪里，可以是一个网址。

method属性表示表单提交的方式，一般用get或post，注意二者的区别。

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

checked元素当属性是radio或tcheckbox时默认被选。

!!!最重要的type属性的元素有（需要记忆）：

text文本框， password密码框， radio单选框， checkbox复选框， submit提交按钮， reset重置按钮，file添加文件， hidden， button普通按钮，select、option下拉列表框，number数字，email邮箱，serch搜索框，textarea文本区域， url网址，range滑块，image使用图片按钮进行提交，button普通按钮，默认为text。

下面通过案例来演示以上内容

<body>
    <form action="class02提交到.html" method="post" enctype="mul">
        用户名：<input type="text" name="Username" value="用户名"/><br/>

        密码：<input type="password" name="password" value=""/><br/>

        性别：<input type="radio" name="gen" value="男" checked/>男<input type="radio" value="女" name="gen"/>女<br/>

        年龄：<input type="number" min="0" max="200"><br/>

        爱好：<input type="checkbox" name="interest" value="sport"/>sport
        <input type="checkbox" name="interest" value="talk"/>talk
        <input type="checkbox" name="interest" value="play">play<br/>

        对编程的喜爱程度：<input type="range" min="1" max="10"><br/>

        出生年月日：<input type="number" name="byear" value="2022" size="4" maxlength="4" min="1900" max="2022">年
        <select name="bmon">
            <option value="">月</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>月
        <input type="number" min="1" max="31" value="1">日<br/>

        个人简介：<textarea name="information" id="" cols="20" rows="1">个人简介</textarea><br/>

        添加文件：<input type="file" name="files"><br/>

        邮箱：<input type="email" name="email"><br/>

        网址：<input type="url" name="url"><br/>

        搜索：<input type="search" name="sousou"><br/>

        <input type="submit" name="Button" value="提交"/>

        <input type="image" src="D:/huashan/qianduan/img/wang.jpg" width="30" height="20">

        <input type="reset" name="Reset" value="重写"/>


    </form>
</body>

运行效果