form多个单选框代码
时间: 2023-04-01 19:02:41 浏览: 56
以下是一个 form 中多个单选框的代码示例:
```html
<form>
<p>请选择您喜欢的颜色:</p>
<input type="radio" name="color" value="red"> 红色<br>
<input type="radio" name="color" value="green"> 绿色<br>
<input type="radio" name="color" value="blue"> 蓝色<br>
<br>
<p>请选择您喜欢的水果:</p>
<input type="radio" name="fruit" value="apple"> 苹果<br>
<input type="radio" name="fruit" value="banana"> 香蕉<br>
<input type="radio" name="fruit" value="orange"> 橙子<br>
<br>
<input type="submit" value="提交">
</form>
```
希望能对您有所帮助。
相关问题
layui form表单中多个单选框值相同如何区分
在Layui的form表单中,通过相同的name属性来区分多个单选框。如果多个单选框的name属性相同,则只能选择其中的一个,无法区分。如果需要区分,可以给不同的单选框设置不同的value属性值,这样在提交表单时会将所选单选框的value属性值作为表单数据的值传递到后台,从而实现区分。
以下是示例代码:
```
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">颜色</label>
<div class="layui-input-block">
<input type="radio" name="color" value="red" title="红色">
<input type="radio" name="color" value="green" title="绿色">
<input type="radio" name="color" value="blue" title="蓝色">
</div>
</div>
</form>
```
在上述代码中,三个单选框的name属性值都为"color",但是它们的value属性值分别为"red"、"green"、"blue",这样就能够区分不同的单选框了。
html单选框回显
在 HTML 中,单选框是通过 `<input type="radio">` 标签来实现的,通常需要设置 `name` 属性,以便将多个单选框组合成一个单选框组,只有一个单选框可以被选中。
要回显选中的单选框,可以使用 JavaScript 来实现。可以使用 `document.getElementsByName()` 方法获取单选框组中所有的单选框,然后遍历这些单选框,判断哪个单选框被选中了,最后将其值赋给某个元素来进行回显。
以下是一个示例代码:
```html
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br>
</form>
<p id="result"></p>
<script>
var radios = document.getElementsByName("gender");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
document.getElementById("result").innerHTML = "You selected: " + radios[i].value;
break;
}
}
</script>
```
在这个示例中,有一个单选框组,其 `name` 属性为 `gender`,每个单选框都有一个不同的 `value` 值。当用户选中其中一个单选框后,点击提交按钮时,JavaScript 会通过遍历单选框组中的所有单选框来找到被选中的单选框,并将其值回显到页面上。