首页前端开发CSScss中的单选怎么做

css中的单选怎么做

时间2024-01-28 10:44:03发布访客分类CSS浏览255
导读:收集整理的这篇文章主要介绍了css中的单选怎么做,觉得挺不错的,现在分享给大家,也给大家做个参考。在css中,可以使用radio对象制作单选,只需要在input元素中设置“”样式即可。单选按钮是表示一组互斥选项按钮中的一个;当一个按钮被选中...
收集整理的这篇文章主要介绍了css中的单选怎么做,觉得挺不错的,现在分享给大家,也给大家做个参考。

在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单选按钮语法案例

html代码

!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视频教程

以上就是css中的单选怎么做的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

radio

若转载请注明出处: css中的单选怎么做
本文地址: https://pptw.com/jishu/589536.html
外部css样式不生效怎么办 css字体图标怎么用

游客 回复需填写必要信息