H5學習筆記（十三）表單

表單

現實生活中的表單是用來提交信息的，比如：辦理銀行卡填寫的申請表、找工作填寫的簡歷、入學時填寫的個人信息表。這些都是表單的一種
網頁中的表單是用來向服務器提交信息的，我們最常用到的表單就是baidu的搜索框在搜索框填入關鍵字後，點擊搜索按鈕，關鍵字會提交到baidu的服務器，服務器根據用戶輸入的關鍵字進行檢索，返回相應信息
表單可以將用戶填寫的信息提交的服務器

 

表單的標籤

使用form標籤創建一個表單
form標籤中必須指定一個action屬性，該屬性指向的是一個服務器的地址，當我們提交表單時將會提交到action屬性對應的地址   

<form action="target.html">

在表單中可以使用fieldset來爲表單項進行分組，可以將表單項中的同一組放到一個fieldset中

<fieldset>

在fieldset可以使用legend子標籤，來指定組名

<legend>用戶信息</legend>

<fieldset>
	
	<!-- 在fieldset可以使用legend子標籤，來指定組名 -->
	<legend>用戶信息</legend>
	
	
	<!-- 
		使用input來創建一個文本框，它的type屬性是text
			如果希望表單項中的數據會提交到服務器中，還必須給表單項指定一個name屬性
			name表示提交內容的名字	
			
		用戶填寫的信息會附在url地址的後邊以查詢字符串的形式發送給服務器
			url地址?查詢字符串
		格式：
			屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&屬性名=屬性值
		在文本框中也可以指定value屬性值，該值將會作爲文本框的默認值顯示	
	-->
	<!-- 
		在html中還爲我們提供了一個標籤，專門用來選中表單中的提示文字的
		label標籤
		該標籤可以指定一個for屬性，該屬性的值需要指定一個表單項的id值
	-->
	<label for="um">用戶名</label>
	<input id="um" type="text" name="username"  /> <br /><br />
	
	<!--
		密碼框
			- 使用input創建一個密碼框，它的type屬性值是password
	-->
	<label for="pwd">密碼 </label>
	<input id="pwd" type="password" name="password" /> <br /><br />
</fieldset>

<fieldset >
	
	<legend>用戶愛好</legend>

<!--
	單選按鈕
		- 使用input來創建一個單選按鈕，它的type屬性使用radio
		- 單選按鈕通過name屬性進行分組，name屬性相同是一組按鈕
		- 像這種需要用戶選擇但是不需要用戶直接填寫內容的表單項，
			還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務器
			
		如果希望在單選按鈕或者是多選框中指定默認選中的選項，
			則可以在希望選中的項中添加checked="checked"屬性
-->
性別  <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
	<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label> 
	<br /><br />

<!-- 
	多選框
		- 使用input創建一個多選框，它的type屬性使用checkbox
-->
愛好 	<input type="checkbox" name="hobby" value="zq" />足球
	<input type="checkbox" name="hobby" value="lq" />籃球
	<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
	<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
<br /><br />

</fieldset>

<!-- 
	下拉列表
		- 使用select來創建一個下拉列表
		下拉列表的name屬性需要指定給select，而value屬性需要指定給option
		可以通過在option中添加selected="selected"來將選項設置爲默認選中
		
		當爲select添加一個multiple="multiple"，則下拉列表變爲一個多選的下拉列表
-->
你喜歡的明星 
	<select name="star">
		
		<!-- 
			在select中可以使用optgroup對選項進行分組
				同一個optgroup中的選項是一組
			可以通過label屬性來指定分組的名字	
		-->
		<optgroup label="女明星">
			<!-- 在下拉列表中使用option標籤來創建一個一個列表項 -->
			<option value="fbb">范冰冰</option>
			<option value="lxr">林心如</option>
			<option value="zw">趙薇</option>
		</optgroup>
		
		<optgroup label="男明星">
			<option value="zbs" selected="selected">趙本山</option>
			<option value="ldh">劉德華</option>
			<option value="pcj">潘長江</option>
		</optgroup>
		
	</select>

<br /><br />

<!--
	使用textarea創建一個文本域
-->
自我介紹  <textarea name="info"></textarea>

<br /><br />

<!-- 
	提交按鈕可以將表單中的信息提交給服務器
	使用input創建一個提交按鈕,它的type屬性值是submit
	在提交按鈕中可以通過value屬性來指定按鈕上的文字
-->
<input type="submit" value="註冊" />

<!--
	<input type="reset" />可以創建一個重置按鈕，
		點擊重置按鈕以後表單中內容將會恢復爲默認值
-->
<input type="reset" />

<!-- 
	使用input type=button可以用來創建一個單純的按鈕，
		這個按鈕沒有任何功能，只能被點擊
-->
<input type="button" value="按鈕" />

<!--
	除了使用input，也可以使用button標籤來創建按鈕
	這種方式和使用input類似，只不過由於它是成對出現的標籤
		使用起來更加的靈活
-->
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>

框架集

框架集和內聯框架的作用類似，都是用於在一個頁面中引入其他的外部的頁面，框架集可以同時引入多個頁面，而內聯框架只能引入一個， 在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>

 

圖片

在IE6中對圖片格式png24支持度不高，如果使用的圖片格式是png24，則會導致透明效果無法正常顯示
        解決方法：
            1.可以使用png8來代替png24，即可解決問題，
                但是使用png8代替png24以後，圖片的清晰圖會有所下降
                
            2.使用JavaScript來解決該問題，需要向頁面中引入一個外部的JavaScript文件
                然後在寫一下簡單的JS代碼，來處理該問題

<body style="background-color: #bfa;">
	<div class="box1"></div>
	<div class="box2"></div>
	<img src="img/3.png"/>
	
	<!-- 在body標籤的最後引入外部的JS文件 -->
	<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
	<!--再創建一個新的script標籤，並且編寫一些js代碼 -->
	<script type="text/javascript">
		DD_belatedPNG.fix("*");
	</script>
</body>

一些代碼只需要在某個特定的瀏覽器執行，其他的不需要執行，這裏可以使用css Hack解決該問題,ie10以下支持

<!--[if IE]>
<p>遠離IE6<p>
<![endif]-->

<!--[if IE 6]>
<p>遠離IE6<p>
<![endif]-->

<!--[if lt IE 9]>  小於ie9/gt表示大於/lte小於等於
<p>遠離IE6<p>
<![endif]-->

<body style="background-color: #bfa;">
	<div class="box1"></div>
	<div class="box2"></div>
	<img src="img/3.png"/>
	
        <!--[if IE 6]>
	    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
	    <script type="text/javascript">DD_belatedPNG.fix("*");</script>
        <![endif]-->
</body>

爲了兼容ie6多寫一個樣式專門給ie6使用，可以引入樣式，添加   <!--[if IE 6]><![endif]-->