HTML基本元素（四）_ZenDei技術網路在線

HTML基本元素（HTML框架、HTML表單、HTML5表單新屬性） ...

1.HTML框架

　　框架的作用就是把瀏覽器視窗劃分成多個子視窗，而且每個子視窗都可以載入各自的HTML文檔。

　　*註意：html框架集與body同級，因此不能同時出現！

　　框架結構標簽：<frameset>，每個標簽可定義行或列，rows和cols可設定每行或每列占據視窗的值。

　　如果上下分割兩個視窗，兩行各占據瀏覽器視窗的50%，示例代碼如下：

<frameset rows="50%,50%">
    <frame src="URL" name="框架名稱1"/>
    <frame src="URL" name="框架名稱2"/>
</frameset>

　　如果左右分割兩個視窗，兩列各占據瀏覽器視窗的50%，示例代碼如下：

<frameset cols="50%,50%">
    <frame src="URL" name="框架名稱1"/>
    <frame src="URL" name="框架名稱2"/>
</frameset>

　　當瀏覽器不支持框架的時候顯示內容：（把<noframes>標簽插入到<frameset>標簽中，把文字放在<body>中）

<frameset>
    <noframes>
        <body>當前瀏覽器不支持框架</body>
    </noframes>
</frameset>

框架屬性說明
屬性	屬性值	說明
rows	px,%	上下分割視窗
cols	px,%	左右分割視窗
src	url	指定要載入到框架的頁面地址
name	名稱	框架的名稱
scrolling	yes,no,auto	是否使用滾動條
noresize	true,false	是否禁止改變框架的尺寸大小
marginwidth	px	框架內左右的空白區域
marginheight	px	框架內上下的空白區域
frameborder	1,0	是否顯示邊框
framespacing	0	框架與框架間保留的空白的距離
border	0	邊框

　　<iframe> 內嵌框架

　　基本結構：<iframe src="URL" name="框架名"></iframe>

　　<iframe>和<frame>的區別：

　　1、frame不能脫離frameset單獨使用，iframe可以；

　　2、frame不能放在body中，iframe可以；

　　3、嵌套在frameset中的iframe必需放在body中；

　　4、不嵌套在frameSet中的iframe可以隨意使用；

　　5、frame的高度只能通過frameset控制；iframe可以自己控制，不能通過frameset控制；

　　6、frame與iframe兩者可以實現的功能基本相同，不過iframe比frame具有更多的靈活性。 frame是整個頁面的框架，iframe是內嵌的網頁元素。

　　一般情況下在框架中的a鏈接使用target屬性實現框架內文件跳轉時：

　　href(指向打開的文件路徑不需要變)

　　_self --> 自己框架頁面打開“預設”

　　_blank --> 新頁面打開

　　_top --> 頂級框架頁面打開

　　_parent --> 到其父級框架頁面打開

　　framename --> 將我們想要打開的頁面在指定的框架中打開

2.表單

　　表單使用<form>標簽定義，用於向伺服器傳輸數據。

　　表單包括：input文本域、textarea多行文本域、select下拉框、等等

　　基本結構：

<form action="" method="post" name="">
    用戶名：<input type="text" name="username" />
    密 碼：<input type="password" name="password" />
</form>

　　form標簽的屬性說明：

　　1.name 指定表單的名稱

　　2.action 指定提交地址

　　3.method 指定數據提交的方式（get,post）

　　　　①get，將表單參數直接放在URL中，用戶可見，安全性低。但在編寫表單時可以使用，方便查看調試。

　　　　②post，將表單參數傳輸給伺服器進行處理時，可以採用加密的方法，安全性高。

　　4.enctype 規定在發送到伺服器之前應該如何對錶單數據進行編碼

　　5.target 指定打開方式

　　1）<input>輸入框

　　　　*所有input標簽都應該嵌套在<form>中，以保證顯示該有的效果。

說明
屬性	說明
type	input元素類型
name	input元素名稱
value	input元素的值
size	input元素的寬度
readonly	是否只讀
maxlength	輸入字元的字元長度
disabled	是否禁用

　　○ 文本框

　　用戶名：

<input type="text" name="username" value="" />

　　○ 密碼框

　　密碼：

<input type="password"name="password" value="" />

　　○ 單選按鈕

　　男女

<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="0"/>女

　　○ 覆選框

　　聽音樂看電影玩游戲

<input type="checkbox" name="love" value="music" /> 聽音樂
<input type="checkbox" name="love" value="movie"/> 看電影
<input type="checkbox" name="love" value="game"/> 玩游戲

　　○ 按鈕

普通按鈕：<input type="button" name="btn" value="確定"/>
提交按鈕：<input type="submit" name="submit" value="提交"/>
重置按鈕：<input type="reset" name="reset" value="重置"/>
圖片按鈕：<input type="image" name="img_btn" src="URL"/>

　　○ 隱藏域

　　隱藏域用於在程式發送時沒必要讓用戶看到特定值的時候使用。

<input type="hidden" name="uid" value="10"/>

　　○ 上傳文件

<input type="file" name="photo"/>

　　○ 數字鍵盤

手機號碼：<input type="number" name="phone" />

　　○ 顏色選擇器

<input type="color" name="color"/>

　　○ 日期選擇器

<input type="date" name="date"/>

　　○ 時間選擇器

<input type="time" name="time"/>

　　○ 日期時間選擇器

<input type="datetime-local" name="datetime-local""/>

　　○ 月選擇器

<input type="month" name="month"/>

　　○ 周選擇器

<input type="week" name="week" />

　　○ E-mail地址文本框

<input type="email" name="email"/>

　　○ 滑動條

<input type="range" min="0" max="10" value="0"/>

　　○ 搜索框

<input type="search" name="search" />
<input type="submit" name="submit" value="搜索"/>

　　○ 地址輸入框

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

　　○ 自動完成（HTML5新屬性，請自行複製代碼查看效果）

<input type="search" name="keywords" autocompulete="on">
<input type="submit" name="submit" value="提交" />

　　*自動完成允許瀏覽器預測對欄位的輸入。當用戶在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在欄位中填寫的選項。

　　○ 自動焦點（HTML5新屬性，請自行複製代碼查看效果）

<input type="search" name="keywords" autofocus="on"/>
<input type="submit" name="submit" value="提交" />

　　*規定當頁面載入時按鈕應當自動地獲得焦點。

　　○ 提示文本（占位文本）（HTML5新屬性，請自行複製代碼查看效果）

用戶名：<input type="text" name="username" placeholder="請輸入用戶名..." />

　　*該提示會在輸入欄位為空時顯示，並會在欄位獲得焦點時消失。

　　○ 必填項（HTML5新屬性，請自行複製代碼查看效果）

*<input type="text" name="username" required/>
<input type="submit" name="submit" value="提交"/>

　　*如果使用該屬性，則欄位是必填（或必選）的。

　　○ 輸入下拉框結合（HTML5新屬性，請自行複製代碼查看效果）

<input list="book" placeholder="請輸入..."/>
<datalist id="book">
    <option value="HTML">
    <option value="CSS">
</datalist>

　　2）<textarea>多行文本域

<textarea name="content" rows="5" cols="50"> </textarea>

　　*rows 指定文本框的高度， cols 指定文本框的寬度，單位是字元。

　　3）<select>下拉框

<select name="city">
    <option value="0">請選擇</option>
    <option value="dg">東莞</option>
    <option value="gz">廣州</option>
</select>

　　*<select>元素中的<option>標簽用於定義列表中的可用選項。

說明
屬性	說明
name	下拉列表框的名稱
size	下拉列表框的顯示行數
multiple	是否多選
disabled	是否禁用
selected	設置預設選中的選項
value	選項的值

　　4）<optgroup>下拉框分組

　　　　<optgroup> 標簽定義選項組，對相關的選項進行組合會使處理更加容易。

<select name="city">
    <optgroup label="主要城市">
        <option value="1">廣州</option>
        <option value="2">北京</option>
    </optgroup>
    <optgroup label="其他城市">
        <option value="3">深圳</option>
        <option value="4">珠海</option>
    </optgroup>
</select>

　　*label 指定組合選項名稱

　　5）<label>

　　　　<label>標簽的作用是將輸入項或選項及其標簽文字關聯起來。

　　　　男女

<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>

　　　　*註意：請把"for"屬性的值設置為相關元素的"id"屬性的值。