HTML案例/form标签/frameset标签-（html补充）

HTML案例/form标签/frameset标签

一。简历模板

image.png
<html>
    <head>
        <title>简历作业</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <h3>简历作业</h3>
        <hr />
        <table border="1px" cellspacing="0px" style="border-bottom: none;">
            <tr height="27px">
                <td colspan="5">基本情况</td>
            </tr>
            <tr height="27px">
                <td width="120px">姓名</td>
                <td width="120px"></td>
                <td width="120px">性别</td>
                <td width="120px"></td>
                <td width="120px" rowspan="7"></td>
            </tr>
            <tr height="27px">
                <td>民族</td>
                <td></td>
                <td>出生年月</td>
                <td></td>
        
            </tr>
            <tr height="27px">
                <td>政治面貌</td>
                <td></td>
                <td>健康</td>
                <td></td>
            
            </tr>
            <tr height="27px">
                <td>籍贯</td>
                <td></td>
                <td>学历</td>
                <td></td>
        
            </tr>
            <tr height="27px">
                <td>电子信箱</td>
                <td></td>
                <td>联系电话</td>
                <td></td>
        
            </tr>
            <tr height="27px">
                <td>专业</td>
                <td colspan="3"></td>
            </tr>
            <tr height="27px">
                <td>毕业院校</td>
                <td colspan="3"></td>
            </tr>
            <tr height="27px">
                <td>求职意向</td>
                <td colspan="4"></td>
            </tr>
        </table>
        <table border="1px" cellspacing="0px" style="border-top: none;border-bottom: none;">
            <tr height="27px">
                <td colspan="4">教育情况</td>
            </tr>
            <tr height="27px">
                <td width="151px">时间</td>
                <td width="151px">院校</td>
                <td width="151px">专业</td>
                <td width="151px">学历</td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <table border="1px" cellspacing="0px" style="border-top: none;">
            <tr height="27px">
                <td colspan="4">培训经历</td>
            </tr>
            <tr height="27px">
                <td width="151px">时间</td>
                <td width="151px">培训机构</td>
                <td width="151px">课程</td>
                <td width="151px">证书</td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

二。内嵌标签学习iframe

1.src:要显示的网页资源路径

可以是本地(相对路径)也可以是网络资源(URL)

注意:

默认当前页面打开及加载src指向的资源

2.width:设置显示区域的宽度

3.height:设置显示区域的高度

4.name:设置内嵌区域的名字,结合超链接标签的target属性使用.

作用:在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.

<html>
    <head>
        <title>内嵌标签学习</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <h3>内嵌标签学习</h3>
        <hr />
        <!--
            内嵌标签:
                iframe
                    src:要显示的网页资源路径
                        可以是本地(相对路径)也可以是网络资源(URL)
                        注意:
                            默认当前页面打开及加载src指向的资源
                    width:设置显示区域的宽度
                    height:设置显示区域的高度
                    name:设置内嵌区域的名字,结合超链接标签的target属性使用.
            作用:
                在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.
        -->
        <a href="http://www.baidu.com" target="_if">百度一下</a>
        <a href="http://www.so.com" target="_tt">360搜索</a><br />
        <iframe src="" width="48%" height="400px" name="_if"></iframe>
        <iframe src="" width="48%" height="400px" name="_tt"></iframe>
    </body>
</html>

三。框架标签学习 frameset

1.注意:

第一步一定要删除body标签

frameset

rows:按照行进行切分页面

cols:按照列进行切分页面

子标签:

frame:进行切分区域的占位,一个frame可以单独加载网页资源.

src:资源路径(本地或者网络)

name:区域名,结合超链接使用

<html>
    <head>
        <title>框架标签学习：</title>
        <meta charset="UTF-8"/>
    </head>
    <!--
        注意:
            第一步一定要删除body标签
        框架标签学习:
            frameset
                rows:按照行进行切分页面
                cols:按照列进行切分页面
                子标签:
                    frame:进行切分区域的占位,一个frame可以单独加载网页资源.
                        src:资源路径(本地或者网络)
                        name:区域名,结合超链接使用
    -->
    <frameset rows="10%,*,10%">
        <frame src="frameset/top.html" />
        <frameset cols="10%,*">
            <frame src="frameset/left.html" />
            <frame src="frameset/right.html" name="_right"/>
        </frameset>
        <frame src="frameset/bottom.html" />
    </frameset>
</html>

四。form表单标签

作用:收集并提交用户数据给指定服务器

1.属性:

action:收集的数据提交地址也就是URL

method:收集的数据的提交方式

get
:适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.

post:适合大量数据,安全,隐式提交

2.注意1:

表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.

提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据

3.注意2:

form标签会收集其标签内部的数据

3.注意3:

form表单的数据提交需要依赖于submit提交按钮.

4.form表单域标签学习:

作用:给用户提供可以进行数据书写或者选择的标签.

5.使用:

文本框:

input

type:text 收集少量的文本数据,用户可见

password 收集用户密码数据

name:数据提交的键,也会被js使用

value: 默认值

单选框:

input

type:radio

name:name属性值相同的单选框只能选择一项数据

value:要提交的数据

checked:checked 使用此属性的单选默认是选择状态

多选框:

input:

type:checkbox

name:一个多选组需要使用相同的name属性值

value:要提交的数据

checked:checked 使用此属性的多选框默认是选择状态

单选下拉框:

select:

name:数据提交的键名,必须声明

子标签option:一个option标签表示一个下拉选项

value:要提交的数据

文本域:

textarea:声明一个可以书写大量文字的文本区域

name:数据提交的键名,js和css也会使用

rows:声明文本域的行数

cols:声明文本域的列数

普通按钮:

input:

type:button

value:

隐藏标签:

input

type:hidden

name

value

注意:表单数据提交提交的是表单域标签的value值

6.form表单标签的使用:

在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式

提交给action属性所指明的提交地址.

<h3>form标签学习</h3>
        <hr />
            <form action="#" method="get">
                用户名:<input type="text" name="uname" value="王五"/><br />
                密码: <input type="password" name="upwd"/><br />
                性别  :  男<input type="radio" name="sex" value="1" checked="checked"/>  女<input type="radio" name="sex" value="0"/><br />
                爱好: <br />
                    吃饭<input type="checkbox" name="fav" value="1" checked="checked"/><br />
                    睡觉<input type="checkbox" name="fav" value="2"/><br />
                    打豆豆<input type="checkbox" name="fav" value="3"/><br />
                籍贯:<br />
                    <select name="address">
                        <option value="">--请选择--</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3" selected="selected">商丘</option>
                    </select>
                    <br />
                文本域:<br />
                    <textarea name="intro" rows="10" cols="30"></textarea><br />
                普通按钮:<br />
                    <input type="button" id="" value="普通按钮" />
                隐藏标签:
                    <input type="hidden" name="hidden" id="" value="哈哈" />
                <input type="submit" value="登录"/>
            </form>
    </body>

五。模拟注册页面

image.png
<html>
    <head>
        <title>注册页面</title>
        <meta charset="UTF-8"/>
        <!--
            http://127.0.0.1:8020/HTML%E5%AD%A6%E4%B9%A0/15-HTML-%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2.html?
            uname=zhangsan&pwd=123&mail=123123&phone=123123123&sex=1
            &fav=1&fav=2&address=1&intro=123123123&agree=1#
        -->
    </head>
    <body>
        <h3>注册页面</h3>
        <hr />
        <form action="#" method="get">
            <table border="1px" cellspacing="0" cellpadding="5px">
                <tr height="35px">
                    <td width="70px">用户名:</td>
                    <td width="200px">
                        <input type="text" name="uname" id="uname" value="" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>密码:</td>
                    <td>
                        <input type="password" name="pwd" id="pwd" value="" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>邮箱:</td>
                    <td>
                        <input type="text" name="mail" id="mail" value="" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>手机号:</td>
                    <td>
                        <input type="text" name="phone" value="" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>性别:</td>
                    <td>
                        男<input type="radio" name="sex" id="sex" value="1" checked="checked"/>
                        女<input type="radio" name="sex" id="sex" value="0" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>爱好:</td>
                    <td>
                        <input type="checkbox" name="fav" id="fav" value="1" />唱歌
                        <input type="checkbox" name="fav" id="fav" value="2" />打球
                        <input type="checkbox" name="fav" id="fav" value="3" />旅游
                    </td>
                </tr>
                <tr height="35px">
                    <td>籍贯:</td>
                    <td>
                        <select name="address" id="">
                            <option value="1">商丘</option>
                            <option value="2">菏泽</option>
                            <option value="3">信阳</option>
                        </select>
                    </td>
                </tr>
                <tr height="35px">
                    <td>个人介绍:</td>
                    <td>
                        <textarea name="intro" rows="4" cols="20"></textarea>
                    </td>
                </tr>
                <tr height="35px">
                    <td colspan="2" align="center">
                        <input type="checkbox" name="agree" id="agree" value="1" />是否同意本公司的协议
                    </td>
                </tr>
                <tr height="35px">
                    <td colspan="2" align="center">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>

    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 09.HTML表单
    HTML表单HTML表单用于搜集用户输入HTML表单常用属性及说明:属性描述accept-charset规定在被提...
    Lv_0阅读 3,434评论 0赞 1
  • HTML常用标签介绍（二）
    本文将继续上文接着介绍一些HTML常用标签 1:HTML全局属性 在介绍常用常见的HTML标签之前，先以最简单的方...
    憨憨二师兄阅读 3,012评论 0赞 0
  • 6-HTML< form>表单标签和属性
    一.什么是< form>表单 格式： 作用：form表单一般用来收集用户的信息，并把信息传送到后台。 注意点：1....
    饥人谷_刘冲阅读 7,811评论 0赞 1
  • 任务5-form表单的用法
    1.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？ HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 4,421评论 0赞 1
  • (5-)HTML form表单的用法
    1.动手 form 表单table 表格 2. <form>表单元素 1） 简述： 元素是块级元素,其开始标签和结...
    _Dot912阅读 6,228评论 2赞 8

友情链接更多精彩内容