1. 程式人生 > >HTML之表單form的select標籤

HTML之表單form的select標籤

form標籤中,以下標籤實現表單元素新增:
<input>表單輸入標籤
<select>下拉選單和列表標籤
<option>下拉選單和列表專案標籤
<textarea>文字域標籤
<optgroup>下拉選單和列表專案分組標籤

<select/>標籤,屬性:name,size初始下拉選項的個數,multiple(按住ctrl可以多選)
option標籤屬性:value定義送往伺服器的選項值,selected設定選項的初始選中狀態
下拉選擇框
<select name="..">
      <option value="..." selected>選項1</option>
      <option value="...">選項2</option> 
       .....
</select>

分組下拉選單
<select name="">
     <optgroup label="組1">
     <option value="...">選項1</option> 
     <option value="...">選項2</option>
     ....
    </optgroup>
    <optgroup label="組2">
     <option value="...">選項3</option> 
     <option value="...">選項4</option>
     ....
    </optgroup>
     ....
</select >

<textarea name="..." rows="..." cols="..." placeholder="">
        內容....
</textarea>

程式碼例項:

<select name="city" >
                        <optgroup label="華北">
                        <option value="beijing" selected>北京</option>
                        <option value="tianjin">天津</option>
                        <option value="hebei">河北</option>
                        </optgroup>
                        <optgroup label="華南">
                        <option value="shanghai">上海</option>
                        <option value="shenzhen">深圳</option>
                        <option value="guangzhou">廣州</option>
                        </optgroup>
                    </select>

效果: