Java學(xué)習(xí)的第三天（前端：表單標(biāo)簽+框架集）

  • 表單標(biāo)簽(用于采集用戶輸入的數(shù)據(jù)，并且用于和服務(wù)器進(jìn)行交互)
//input的屬性
 type---輸入框的類型
 name---框的名字，目的是接收方能夠接受到對(duì)應(yīng)的鍵（name）值(用戶輸入的內(nèi)容)對(duì)（例如user=張三）
 value---默認(rèn)顯示的名字
 readonly--設(shè)置輸入框只讀
 placeholder--輸入內(nèi)容的提示信息，當(dāng)用戶開始輸入后提示信息自動(dòng)消失
 maxlength--輸入框的長(zhǎng)度

//文本框（注意：type="#"代表文本框）
<form>
  用戶名：<input type="text" name="user" placeholder="請(qǐng)輸入用戶名" maxlength="6" readonly="readonly" />
</form>

//密碼框（最大長(zhǎng)度為8）
密碼：<input type="password" name="password" placeholder="請(qǐng)輸入密碼" maxlength="8"/>

//單選按鈕（注意：1.必須加name屬性，且name屬性值一致；2.展示給用戶看的是外部的男女，而真正提交到服務(wù)器的是value設(shè)置的值）
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女

//復(fù)選按鈕（單選和復(fù)選默認(rèn)選中時(shí)設(shè)置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"/>

//隱藏域(作用：把需要隱藏的內(nèi)容放到隱藏域中，不讓用戶看到，但是需要傳到服務(wù)器的一些敏感數(shù)據(jù))
<input type="hidden" value="123456">

//下拉列表（默認(rèn)選中設(shè)置selected=selected）
<select>
  <option>--請(qǐng)選擇--</option>
  <option selected="selected">湖南</option>
  <option>湖北</option>
  <option>福建</option>
</select>

//文本域(rows代表默認(rèn)多少行；cols代表默認(rèn)多少列)
<textarea rows="4" cols=""5  placeholder="請(qǐng)輸入用戶簡(jiǎn)介信息">
</textarea>

//按鈕（提交按鈕/普通按鈕/圖片按鈕）
<input type="submit" value="提交"/>
<input type="button" value="普通按鈕"/>
<input type="image" src="圖片的相對(duì)路徑" value="圖片按鈕"/>
//除了使用上述三種方式表示一個(gè)按鈕還可以...（它的效果和提交按鈕功能一樣）
<button>
  提交按鈕
</button>
<button>
  <img src="圖片的相對(duì)路徑" width="寬度" height="高度" 
</button>
  • html5新特性
//選色卡
<input type="color"/>
//沒有精確到時(shí)間的日期
<input type="date">
//精確到時(shí)分的日期
<input type="datetime-local">
//郵箱（如果沒有@會(huì)有提示功能）
<input type="email">
//數(shù)字
<input type="number">
  • 框架集frameset
/為什么要使用？？  之前用瀏覽器打開一個(gè)界面時(shí)只是一個(gè)網(wǎng)頁，如果我想在一個(gè)界面同時(shí)打開多個(gè)網(wǎng)頁，那么就要用到框架集
/如何去使用
1.去body(因?yàn)閎ody只能顯示一個(gè)網(wǎng)頁)
2.放框架集<frameset></frameset>
3.將框架(頁面)放入框架集中<frame></frame>
4.最后設(shè)置框架集分為哪幾部分
實(shí)例1（設(shè)置一個(gè)上30%；下70%的框架集）
/center.html（主網(wǎng)頁）
<!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>

實(shí)例2（設(shè)置一個(gè)左30%；右70%的框架集）
/center.html（主網(wǎng)頁）
<!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>

實(shí)例3（設(shè)置一個(gè)上30%；下左50%；下右50%的框架集）
//實(shí)現(xiàn)方式：先拆成上下兩個(gè)部分，然后下部分拆成左右兩個(gè)部分
/center.html(打開的網(wǎng)頁)
<!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
  • 框架集指定位置的跳轉(zhuǎn)（框架集中超鏈接打開的方式）
/如果想跳轉(zhuǎn)至某個(gè)指定的界面，這個(gè)時(shí)候需要給指定界面取個(gè)名字 name="abc"
/然后使用targe="abc"去跳轉(zhuǎn)，但是如果想跳轉(zhuǎn)至某張圖片，必須指定<a href="圖片的相對(duì)路徑">

target屬性：
    _self(跳轉(zhuǎn)至自身，不會(huì)占用整個(gè)界面)
    _blank(打開一個(gè)新界面，會(huì)占用整個(gè)界面)
    _top(_parent在本身打開一個(gè)新界面，頁面會(huì)占用整個(gè)界面)
  • 內(nèi)聯(lián)框架iframe
/作用：在網(wǎng)頁中隨意添加網(wǎng)頁
/屬性：src  width  height  frameboder(內(nèi)聯(lián)框架的邊框)="0/no"
  • 實(shí)戰(zhàn)練習(xí)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表單練習(xí)</title>
    </head>
    <body background="../img/regist_bg.jpg">
        <br />
        <form action="表單個(gè)人練習(xí).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="請(qǐng)輸入用戶名" 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="請(qǐng)輸入密碼" name="password" value="123456"/>
                    </td>
                </tr>
                <tr>
                    <td width="25%" height="30px" align="left">
                        <font size="3">&nbsp;&nbsp;&nbsp;確認(rèn)密碼</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<input type="password" placeholder="請(qǐng)輸入確認(rèn)密碼" 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="請(qǐng)輸入郵箱" 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="請(qǐng)輸入姓名" 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="請(qǐng)輸入年齡" 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>--請(qǐng)選擇--</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;簡(jiǎn)介</font>
                    </td>
                    <td width="75%">
                        &nbsp;&nbsp;<textarea rows="7" cols="20" placeholder="請(qǐng)輸入用戶簡(jiǎn)介信息" 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="注冊(cè)"/>
                        <input type="reset" value="重置"/>
                        <input type="button" value="普通按鈕"/>
                        <input type="image" value="圖片按鈕" src="../../homepage/img/title2.jpg"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>
實(shí)戰(zhàn).png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Html框架標(biāo)簽 特點(diǎn)：框架標(biāo)簽可以將頁面分成不同的部分frameset 框架集合，里面可以包含多個(gè)部分（fram...
    任地獄丶閱讀 436評(píng)論 0贊 0
  • 今天學(xué)習(xí)了html表單 HTML表單（<form></form>標(biāo)簽） 屬性： 1 action：決定表單提交的地...
    任地獄丶閱讀 304評(píng)論 0贊 0
  • 大數(shù)據(jù)預(yù)處理 數(shù)據(jù)預(yù)處理 由于所要進(jìn)行分析的數(shù)據(jù)量的迅速膨脹（已達(dá)G或T數(shù)量級(jí)），同時(shí)由于各種原因?qū)е铝爽F(xiàn)實(shí)世界數(shù)...
    石顯閱讀 1,368評(píng)論 0贊 0
  • 基于Apriori算法的關(guān)聯(lián)規(guī)則分析模型 基于Apriori算法的關(guān)聯(lián)規(guī)則分析模型 5.3.1基于Apriori算...
    石顯閱讀 577評(píng)論 0贊 0
  • 橋梁振動(dòng)信號(hào)的預(yù)處理 橋梁振動(dòng)信號(hào)是指布設(shè)在橋梁各處的傳感器,將收集到各通道的信號(hào)經(jīng)過放大器或變換器轉(zhuǎn)化后,再由被...
    石顯閱讀 555評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容