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>htmlradio设置默认的按钮
<option value="c++">c++</option>
</select>
效果图
这种列表只能选择其中的选项⽽不能⾃定义输⼊。option的selected属性设置为默认选中，如果没有设置，则默认选中第⼀个option值。在实际使⽤中，往往会设置第⼀个option选项为空且设置display为none来达到默认值为空的效果。
主攻⽅向：
<select  name="language">
<option 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 selected></option>
<option value="java">java</option>
<option value="javascript">javascript</option>
<option value="c++">c++</option>
</select>
通过上⾯的⽰例发现显⽰多个元素时，选项与select所在⾏底端对齐，通过设置label内嵌样式达到顶端对齐的效果
<label for="language"  >主攻⽅向：</label>
<select  id="language" name="language" size="2" multiple>
<option 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样式和排他来实现单选功能

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。