HTML表單選項菜單，option與optgruop標簽的用法！

作者：佚名   時間：2014-04-03   分享到：

使用option標簽可以定義一個<select>表單控件中的每個條目。瀏覽器將<option>標簽中的內容作為<select>標簽的菜單或是滾動列表中的一個元素顯示，這樣，其內容只能是純文本，不能有任何裝飾。
value屬性

使用value屬性可以為每個選項設置一個值，當用戶選中該選項時.瀏覽器會將其發送給服務器。如果還沒有指定value屬性，選項的值將被設置為<option>標簽中的內容。看看下面這個示例中的HTML選項:

coption value=dog>dog <option>dog

這兩者具有同樣的值。第一個是輸出在<option>標簽中設置值，第二個則是默認地設置為<option>標簽本身的內容：“dog”

selected屬性

默認情況下，所有多選的<select>標簽中的選項都是未選中狀態，因此當客戶端向服務器提高表單時，這些選項不會包括在參數列表中。在<option>標簽中包括selected屬性后，就可以預先選定一個或多個選項、隨后用戶可以再取消選擇。

selected屬性的HTML版本沒有值。其XHTML版本則有值，selected=selected如果沒有任何選項被預先顯式選定，那么單選的<select>標簽會預先選中第一選項。

label屬性

通常情況下，在將元素顯示給用戶時，會用<option>標簽中的內容來生成元素的標記。但是如果提供了label屬性的話，就要用它的值來用作標記。

<optgroup>標簽

表單中的選項菜單有可能非常長，這使得它們很難顯示和使用。在這種情況下，將一些相關的選項分組會很有幫助，然后將這些組作為一組嵌套的層疊式菜單呈現給用戶。<optgroup>在HTML 4.0中是新引人的標簽，雖然使用方式有限，但是它為HTML和XHTML的表單提供了這種功能。

只能在<select>標簽中使用<optgroup}標簽，并且它只能包含<<option>標簽。瀏覽器會為<select>主菜單中的每個<optgroup>標簽都生成子菜單。例如，在HTML中，可以利用<optgroup>來顯示一個表單菜單，該菜單是按地名排列！

<select name=state>
 <optgroup label=龍崗區>
      <option>布吉鎮
      <option>坂田鎮
</optgroup>
<optgroup label=寶安區>
      <option>龍華鎮
      <option>西鄉鎮
</optgroup>
</select>

由于還沒有瀏覽器能夠完全支持<optgroup>標簽(一般瀏覽器會簡單地將它們顯示為滾動菜單)，我們無法向讀者展示這樣的菜單是什么樣子。但是，它們可能和我們所熟悉的下拉菜單非常相似，對大多數圖形化用戶界面來說，下拉菜單是很普遍

的功能。當用鼠標或鍵盤選定后，<optgroup>會通向一個或多個菜單。例如，在我們關于“州(state )”的示例中，可能會有標記為“Northeast" , "South”這樣的子菜單，拉開每個子菜單都會顯示其所包含的州名列表。

可惜的是，<optgroup>標簽最大的障礙是它無法嵌套，這樣就限制了只能有一層子菜單。但是在XHTML將來的版本中，有可能會突破這個限制。使用label屬性可以定義一個<optgroup子菜單的標題以顯示給用戶。其標記應該短小精悍，這樣才能保證菜單在不同的顯示情況下都能顯示出來。

將<select>菜單中與<option>相關的元素組織在一起。