H5實現表單單選的3種方式

1、使用同名radio型input元素

主攻方向：
<input type="radio" name="language" value="java" checked>java
<input type="radio" name="language" value="javascript">javascript
<input type="radio" name="language" value="c++">c++

效果圖

2、使用select元素

默認選中第一個

<select name="language">
    <option value="java">java</option>
    <option value="javascript">javascript</option>
     <option value="c++">c++</option>
 </select>

效果圖

這種列表只能選擇其中的選項而不能自定義輸入。option的selected屬性設置為默認選中，如果沒有設置，則默認選中第一個option值。 在實際使用中，往往會設置第一個option選項為空且設置display為none來達到默認值為空的效果。

主攻方向：
<select  name="language">
    <option style="display: none" selected></option>
    <option value="java">java</option>
    <option value="javascript">javascript</option>
    <option value="c++">c++</option>
</select>

補充：設置size屬性可讓select元素顯示多個選項，設置mutiple屬性則可讓用戶一次選擇多個屬性，選擇多個因素時需要按住ctrl鍵。

<label for="language">主攻方向：</label>
<select  id="language" name="language" size="2" multiple>
    <option style="display: none" selected></option>
    <option value="java">java</option>
    <option value="javascript">javascript</option>
    <option value="c++">c++</option>
</select>

 通過上面的示例發現顯示多個元素時，選項與select所在行底端對齊，通過設置label內嵌樣式達到頂端對齊的效果

<label for="language"  style="vertical-align: top">主攻方向：</label>
<select  id="language" name="language" size="2" multiple>
    <option style="display: none" selected></option>
    <option value="java">java</option>
    <option value="javascript">javascript</option>
    <option value="c++">c++</option>
</select>

 

使用optgroup元素可以在select元素中分組以建立一定的結構。其label屬性為整組選項提供一個小標題，disabled屬性禁止使用組內任一選項

  <select>
    <optgroup label="球類">
        <option value="lq">籃球</option>
        <option value="zq">足球</option>
    </optgroup>
    <optgroup label="其他" disabled>
        <option value="lq">跑步</option>
        <option value="zq">游泳</option>
    </optgroup>
  </select>

注意option元素的label屬性值、value屬性值以及它的內容往往是設置為一致的，其中label屬性值和內容都是用於說明，label值會覆蓋option的內容顯示，真正提交的值為value值。

  <label>主攻方向：</label>
    <select name="language">
        <option value="java" label="使用人數較多">java</option>
        <option value="javascript" label="網頁霸主">javascript</option>
        <option value="c++" label="底層操作系統首選">c++</option>
    </select>

3、使用數據列表

將input元素的list屬性值設置為一個datalist元素的id屬性值，在文本輸入時即可選擇datalist中的選項， datalist元素是HTML5中新增的，用以提供一批值，datalist中的每個選項由option元素定義。

input、datalist二者結合使用的結果類似於select，但是卻可以自定義輸入值。當input元素有輸入后（包括自定義輸入和選擇輸入）下面的列表項就只會顯示與輸入內容相匹配的選項

<label for="language">主攻方向：</label>
<input type="text" list="testdatalist" id="language" name="language">
<datalist id="testdatalist">
    <option value="java">java</option>
    <option value="javascript">javascript</option>
    <option value="c++">c++</option>
</datalist>

默認為空

沒有內容時顯示三個可選項

 

可以像普通input元素一樣輸入內容

 輸入內容后只顯示相匹配的兩個選項

補充，這里的option元素的label屬性值作為一種補充說明，不會覆蓋option內容顯示

<label for="language">主攻方向：</label>
<input type="text" list="testdatalist" id="language" name="language">
<datalist id="testdatalist">
    <option value="java" label="使用人數較多">java</option>
    <option value="javascript" label="網頁霸主">javascript</option>
    <option value="c++" label="底層操作系統首選">c++</option>
</datalist>

 

 

 4、其他方式

除了使用原始表單外，還可以結合js和css設置div樣式和排他來實現單選功能