html中 input 和 label 标签如何将一组单选框互斥

在页面实现中,需要罗列一组选项,例如一组水果,让用户只能选择其中一个,进行提交,在html中,我们可以添加input中type="radio"属性,实现单选框,文字内容则通过label标签添加

< input type = " radio " name = " fruit " id ="orange " >

< label for = " orange " > 橙子 </ label >

< input type = " radio " name = " fruit " id =" banana " >

< label for = " banana " >香蕉 </ label >

< input type = " radio " name = " fruit " id ="apple " >

< label for = " apple " > 苹果 </ label >

1.将一组选项中input中name属性都设为fruit, name属性相同的input标签即为一组,单选框实现互斥效果
2.通过为input标签添加id,并和label for中的属性进行关联,实现单选框和文字的关联,点击文字,单选框选中,反之亦然.