Java学习的第三天（前端：表单标签+框架集）

作者: 飞奔的嗨少 | 来源:发表于2019-10-24 19:47 被阅读0次

Java学习的第三天（前端：表单标签+框架集）
前端表单框架集
前端学习之表单标签
表单
HTML-表单form-2018.07.05
Html学习之旅——常用标签03
登陆页面
表单框架集
React从零开始(4)——表单和列表
HTML笔记3_表单元素

表单标签(用于采集用户输入的数据，并且用于和服务器进行交互)

//input的属性
 type---输入框的类型
 name---框的名字，目的是接收方能够接受到对应的键（name）值(用户输入的内容)对（例如user=张三）
 value---默认显示的名字
 readonly--设置输入框只读
 placeholder--输入内容的提示信息，当用户开始输入后提示信息自动消失
 maxlength--输入框的长度

//文本框（注意：type="#"代表文本框）
<form>
  用户名：<input type="text" name="user" placeholder="请输入用户名" maxlength="6" readonly="readonly" />
</form>

//密码框（最大长度为8）
密码：<input type="password" name="password" placeholder="请输入密码" maxlength="8"/>

//单选按钮（注意：1.必须加name属性，且name属性值一致；2.展示给用户看的是外部的男女，而真正提交到服务器的是value设置的值）
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女

//复选按钮（单选和复选默认选中时设置checked="checked"）
<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="足球" checked="checked"/>足球
<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球

//文件上传
<input type="file"/>

//隐藏域(作用：把需要隐藏的内容放到隐藏域中，不让用户看到，但是需要传到服务器的一些敏感数据)
<input type="hidden" value="123456">

//下拉列表（默认选中设置selected=selected）
<select>
  <option>--请选择--</option>
  <option selected="selected">湖南</option>
  <option>湖北</option>
  <option>福建</option>
</select>

//文本域(rows代表默认多少行；cols代表默认多少列)
<textarea rows="4" cols=""5  placeholder="请输入用户简介信息">
</textarea>

//按钮（提交按钮/普通按钮/图片按钮）
<input type="submit" value="提交"/>
<input type="button" value="普通按钮"/>
<input type="image" src="图片的相对路径" value="图片按钮"/>
//除了使用上述三种方式表示一个按钮还可以...（它的效果和提交按钮功能一样）
<button>
  提交按钮
</button>
<button>
  <img src="图片的相对路径" width="宽度" height="高度" 
</button>

html5新特性

//选色卡
<input type="color"/>
//没有精确到时间的日期
<input type="date">
//精确到时分的日期
<input type="datetime-local">
//邮箱（如果没有@会有提示功能）
<input type="email">
//数字
<input type="number">

框架集frameset

/为什么要使用？？  之前用浏览器打开一个界面时只是一个网页，如果我想在一个界面同时打开多个网页，那么就要用到框架集
/如何去使用
1.去body(因为body只能显示一个网页)
2.放框架集<frameset></frameset>
3.将框架(页面)放入框架集中<frame></frame>
4.最后设置框架集分为哪几部分
实例1（设置一个上30%；下70%的框架集）
/center.html（主网页）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="30%,70%">
        <frame src="top.html"/>
        <frame src="bottom.html"/>
    </frameset>
</html>

/top.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="red">        
    </body>
</html>

/bottom.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="yellow">
    </body>
</html>

实例2（设置一个左30%；右70%的框架集）
/center.html（主网页）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset cols="30%,70%">
        <frame src="left.html"/>
        <frame src="right.html"/>
    </frameset>
</html>

/left.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="red">        
    </body>
</html>

/right.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="yellow">
    </body>
</html>

实例3（设置一个上30%；下左50%；下右50%的框架集）
//实现方式：先拆成上下两个部分，然后下部分拆成左右两个部分
/center.html(打开的网页)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="30%,70%">
        <frame src="top.html"/>
        <frameset cols="50%,50%">
            <frame src="left.html"/>
            <frame src="right.html"/>
        </frameset>
    </frameset>
</html>

/top.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="blue">
    </body>
</html>

/left.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="red">
    </body>
</html>

/right.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="yellow">
    </body>
</html>

a0.png

a1.png

a2.png

框架集指定位置的跳转（框架集中超链接打开的方式）

/如果想跳转至某个指定的界面，这个时候需要给指定界面取个名字 name="abc"
/然后使用targe="abc"去跳转，但是如果想跳转至某张图片，必须指定<a href="图片的相对路径">

target属性：
    _self(跳转至自身，不会占用整个界面)
    _blank(打开一个新界面，会占用整个界面)
    _top(_parent在本身打开一个新界面，页面会占用整个界面)

内联框架iframe

/作用：在网页中随意添加网页
/属性：src  width  height  frameboder(内联框架的边框)="0/no"

实战练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单练习</title>
    </head>
    <body background="../img/regist_bg.jpg">
        <br />
        <form action="表单个人练习.html" method="post">
            <table width="500px" height="600px" border="5px" bordercolor="#CCCCCC" cellspacing="0px" align="center" bgcolor="white">
                <tr>
                    <td width="25%" height="30px" align="left"> 
                        <font size="3">&nbsp;&nbsp;&nbsp;用户名</font>
                    </td>
                    <td width="75%">
                            &nbsp;&nbsp;<input type="text" placeholder="请输入用户名" name="username" value="飞奔的嗨少"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;密码</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<input type="password" placeholder="请输入密码" name="password" value="123456"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;确认密码</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<input type="password" placeholder="请输入确认密码" name="cmpassword" value="123456"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;邮箱</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<input type="email" placeholder="请输入邮箱" name="email" value="123456789@qq.com"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;姓名</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<input type="text" placeholder="请输入姓名" name="name" value="张三"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;年龄</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<input type="number" placeholder="请输入年龄" name="age" value="35"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;性别</font>
                    </td>
                    <td width="75%">
                        &nbsp;<input type="radio" name="sex" checked="checked" value="男"/>男
                        <input type="radio" name="sex" value="女"/>女
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;爱好</font>
                    </td>
                    <td width="75%">
                        &nbsp;<input type="checkbox" checked="checked" name="hobby" value="篮球"/>篮球
                        <input type="checkbox" name="hobby" value="足球"/>足球
                        <input type="checkbox" checked="checked" name="hobby" value="乒乓球"/>乒乓球
                        <input type="checkbox" name="hobby" value="羽毛球"/>羽毛球
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;颜色</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<input type="color" name="color"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;籍贯</font>
                    </td>
                    <td width="75%">
                        &nbsp;
                        <select name="city">
                            <option>--请选择--</option>
                            <option value="湖南">湖南</option>
                            <option value="湖北">湖北</option>
                            <option value="福建">福建</option>
                            <option value="上海">上海</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;头像</font>
                    </td>
                    <td width="75%">
                        &nbsp;
                        <input type="file" name="icon"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="100px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;简介</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<textarea rows="7" cols="20" placeholder="请输入用户简介信息" name="text"></textarea>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;生日</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<input type="date" />
                    </td>
                </tr>
                <tr>
                    <td width="100%" colspan="2" height="40">
                        &nbsp;
                        <input type="submit" value="注册"/>
                        <input type="reset" value="重置"/>
                        <input type="button" value="普通按钮"/>
                        <input type="image" value="图片按钮" src="../../homepage/img/title2.jpg"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

实战.png

Java学习的第三天（前端：表单标签+框架集）
表单标签(用于采集用户输入的数据，并且用于和服务器进行交互) html5新特性框架集frameset 框架集指定...
前端表单框架集
表单 from 添加表单 action 指向服务器地址from action：提交到后台服务器method=‘...
前端学习之表单标签
表单

Java学习的第三天（前端：表单标签+框架集）

相关文章

Java学习的第三天（前端：表单标签+框架集）

前端 表单 框架集

前端学习之表单标签

前端表单框架集