在css中,可以使用radio对象制作单选,只需要在input元素中设置“”样式即可。单选按钮是表示一组互斥选项按钮中的一个;当一个按钮被选中,之前选中的按钮就变为非选中的。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
一、单选按钮控件语法
<input name=Fruit type=radio value= />
使用html input标签,name为自定义,type类型为“radio”的表单,
Radio 对象代表 HTML 表单中的单选按钮。
在 HTML 表单中 <input type=radio> 每出现一次,一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。
当单选按钮被选中或不选中时,该按钮就会触发 onclick 事件句柄。
您可通过遍历表单的 elements[] 数组来访问 Radio 对象,或者通过使用 document.getElementById()。
二、radio单选按钮语法案例
<!DOCTYPE html> <html lang=en> <head> <Meta charset=UTF-8 /> <Meta http-equiv=X-UA-Compatible content=IE=edge /> <Meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Document</title> </head> <body> <form action= method=get> 您最喜欢水果?<br /><br /> <label><input name=Fruit type=radio value= />苹果 </label> <label><input name=Fruit type=radio value= />桃子 </label> <label><input name=Fruit type=radio value= />香蕉 </label> <label><input name=Fruit type=radio value= />梨 </label> <label><input name=Fruit type=radio value= />其它 </label> </form> </body> </html>
截图
推荐学习:css视频教程