html表單 &框架集
阿新 • • 發佈：2018-12-13
表單
form:建立一個表單必須指定action屬性【指向伺服器地址】
fieldset：對錶單進行分組
|- 使用legend子標籤，來指定組名
label:專門用來表示表單中的提示文字
該標籤可以指定一個for屬性，該屬性的值需要指定一個表單項的id值
<label for="[表單項的id值]">使用者名稱</label>
文字框：
<input type="text" value="" name=""/>
使用input來建立一個文字框，它的type屬性是text
name屬性：表單項中的資料提交到伺服器時，提交內容的名字
單選按鈕：
<input type="radio" name="sex" value="male" id="male" /> 使用input來建立一個單選按鈕，它的type屬性使用radio name屬性：通過name屬性進行分組，name屬性相同是一組按鈕 value屬性：【必須指定】被選中的表單項的value屬性值將會最終提交給伺服器 checked屬性：指定預設選中的選項。checked="checked"
多選框:
使用input建立一個多選框，它的type屬性使用checkbox
提交按鈕:
使用input建立一個提交按鈕,它的type屬性值是submit
<input type="submit" value="註冊" />
提交按鈕可以將表單中的資訊提交給伺服器，
value屬性：指定按鈕上的文字
重置按鈕：
<input type="reset" value="重置" />
點選重置按鈕以後表單中內容將會恢復為預設值
普通按鈕：
<input type="button" value="按鈕" /> 使用input type=button可以用來建立一個單純的按鈕， 這個按鈕沒有任何功能，只能被點選
除了使用input，也可以使用button標籤來建立按鈕
這種方式和使用input類似，只不過由於它是成對出現的標籤
使用起來更加的靈活
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
下拉列表
使用select來建立一個下拉列表 <select name=""> <option value=""></option> </select> 下拉列表的name屬性需要指定給select， 而value屬性需要指定給option 可以通過在option中新增selected="selected"來將選項設定為預設選中 當為select新增一個multiple="multiple"，則下拉列表變為一個多選的下拉列表 /* multiple ['mʌltɪpl] adj. 多重的；多樣的；許多的 */ 在select中可以使用optgroup對選項進行分組 同一個optgroup中的選項是一組 可以通過label屬性來指定分組的名字
文字域:
使用textarea建立一個文字域
自我介紹 <textarea name="info"></textarea>
使用者填寫的資訊會附在url地址的後邊以查詢字串的形式傳送給伺服器
url地址?查詢字串
格式：
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值
在文字框中也可以指定value屬性值，該值將會作為文字框的預設值顯示
<form action="./new_file.html" method="get">
<fieldset id="fieldset1">
<legend>使用者資訊</legend>
<label for="username">使用者名稱：</label>
<!-- 文字框 -->
<input type="text" id="username" name="username" value="" /><br>
<label for="psw">密 碼:</label>
<input type="text" id="psw" value="" /><br>
<!-- 單選按鈕 -->
<span>性別:</span>
<input type="radio" name="sex" id="male" value="male" checked="checked"/>
<label for="male">女</label>
<input type="radio" name="sex" id="female" value="female" />
<label for="female">男</label><br>
<!-- 多選框 -->
<span>愛好：</span>
<input type="checkbox" name="hobby" value="ks" />看書
<input type="checkbox" name="hobby" value="sj" checked="checked"/>睡覺
<input type="checkbox" name="hobby" value="xdm" />寫程式碼
<input type="checkbox" name="hobby" value="lq" />籃球<br>
<!-- 下拉列表 -->
<label for="mx">請選擇最喜歡的明星:</label><br>
<select name="star" id="mx">
<optgroup label="男明星">
<option value ="ldh">劉德華</option>
<option value ="zwj">張衛健</option>
<option value ="cl">成龍</option>
</optgroup>
<optgroup label="女明星">
<option value ="lxr1" selected="selected">林心如1</option>
<option value ="lxr2">林心如2</option>
<option value ="lxr3">林心如3</option>
</optgroup>
</select><br>
<textarea >
自我介紹
</textarea><br>
</fieldset>
<input type="submit" name="submit" value="註冊" />
<input type="reset" value="重置" /><br>
<button type="button">按鈕</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
框架集
框架集和內聯框架的作用類似，都是用於在一個頁面中引入其他的外部的頁面，
框架集可以同時引入多個頁面，而內聯框架只能引入一個，
在h5標準中，推薦使用框架集，而不使用內聯框架
使用frameset來建立一個框架集，注意frameset不能和body出現在同一個頁面中
所以要使用框架集，頁面中就不可以使用body標籤
屬性：
rows，指定框架集中的所有的框架，一行一行的排列
cols， 指定框架集中的所有的頁面，一列一列的排列
這兩個屬性frameset必須選擇一個，並且需要在屬性中指定每一部分所佔的大小
frameset中也可以再巢狀frameset
frameset和iframe一樣，它裡邊的內容都不會被搜尋引擎所檢索，
所以如果搜尋引擎檢索到的頁面是一個框架頁的話，它是不能去判斷裡邊的內容的
使用框架集則意味著頁面中不能有自己的內容，只能引入其他的頁面，而我們每單獨載入一個頁面
瀏覽器都需要重新發送一次請求，引入幾個頁面就需要傳送幾次請求，使用者的體驗比較差
如果非得用建議使用frameset而不使用iframe
<frameset cols="30% , * , 30%">
<!--
在frameset中使用frame子標籤來指定要引入的頁面
引入幾個頁面就寫幾個frame
-->
<frame src="01.表格.html" />
<frame src="02.表格.html" />
<!-- 巢狀一個frameset -->
<frameset rows="30%,50%,*">
<frame src="04.表格的佈局.html" />
<frame src="05.完善clearfix.html" />
<frame src="06.表單.html" />
</frameset>
</frameset>