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样式和排他来实现单向功能

 

转载于:https://www.cnblogs.com/chuanzi/p/10819215.html