首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么单选按钮复选框不能共存?

它们的外观本身并不能反映它们在功能上的细微差别。视觉线索上只有圆点复选框的区别;除了选项之外,其他对用户毫无意义。因此,单选按钮复选框同时存在违反了用户体验中的一致性原则。...单选按钮复选框 单选按钮表示相互排斥的选项,而复选框表示相互包含的选项。这两种组件通常都用于从列表中选择选项的场景。...标签单复数 与复选标记圆点相比,标签的名词形式更能清楚地说明相斥/包容的关系。一个勾选标记或一个圆点并不能表示互斥还是包容关系,只有设计师、开发人员精通技术的用户才熟悉这个约定。...组件对比 使用Check Circles代替 如果用户需要一个组件用于在列表中选择选项,与其使用单选按钮复选框,不如直接使用Check Circles。...把Check Circles用于列表选项选择,用户就不会被单选按钮复选框之间的差异分散注意力了。他们可以更多地关注选项标签,选择最适合自己的选项。用户是否只能选择一个或多个选项并不重要。

1.5K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    HTML初学

    块级标签:(特点是独占一行) 1. h1 h2 h3 h4 h5 h6 标题 注:一个网站用一个h1,一般放logo或者网站标题 2. p 段落 3. br 换行 4. div 块 5. ul 无序列表...无序列表 标签 说明 ul 表示列表整体,只能包含li li 列表每一项 2. 有序列表 标签 说明 ol 表示列表整体,只能包含li li 列表每一项 3....文本域 label标签 直接使用lable标签把内容(如文本)表单标签一起包裹。...3.name 属性用于对提交到服务器后的表单数据进行标识 4. value 为input元素设定值(默认值) 输入框的值 选项的值 按钮上的文字 5.checked 在页面加载时应该被预先选定的单选复选选项...6. selected 规定在页面加载时预先选定的下拉列表选项 7. readonly 规定输入字段为只读(不能编辑) 8. disabled 规定应该禁用input元素(既不能编辑也不能提交)

    3.3K40

    html学习笔记第二弹

    HTML支持无序列表、有序列表、自定义列表列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由方便。 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点●进行标记。... 注意事项: 无序列表的各个列表项之间没有顺序级别之分,是并列的。 中只能嵌套,不能直接在标签中输入其他标签或者文字。...无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。 有序列表 有序列表就是有顺序排列的列表,其各个列表项会按照一定的顺序排列定义。...dd> 个数没有限制,经常是一个对应多个 定义列表列表项内部可以使用段落、换行符、图片、链接以及其他列表等等 列表总结: 标签名定义说明无序列表里面只能包含...是每个表单元素都有的属性值,主要是给后台人员使用 name表单元素的名字, 要求单选按钮复选框要有相同的name值. checked属性主要针对于单选按钮复选框, 主要作用一打开页面,就要可以默认选中某个表单元素

    9410

    html学习笔记第二弹

    HTML支持无序列表、有序列表、自定义列表列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由方便。 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点●进行标记。... 注意事项: 无序列表的各个列表项之间没有顺序级别之分,是并列的。 中只能嵌套,不能直接在标签中输入其他标签或者文字。...dd> 个数没有限制,经常是一个对应多个 定义列表列表项内部可以使用段落、换行符、图片、链接以及其他列表等等 列表总结: 标签名 定义 说明 无序列表...定义复选框 file 定义输入字段“浏览按钮”,供文件上传 hidden 定义隐藏的输入字段 image 定义图像形式的提交按钮 password 定义密码字段,该字段中的字符被掩码 radio 定义单选按钮...是每个表单元素都有的属性值,主要是给后台人员使用 name表单元素的名字, 要求单选按钮复选框要有相同的name值. checked属性主要针对于单选按钮复选框, 主要作用一打开页面,就要可以默认选中某个表单元素

    3.9K10

    前端面试题-HTML语义化标签

    命令按钮,比如单选按钮、复选框或按钮 用于描述文档或文档某个部分的细节 对话框,比如提示框 标签包含 details 元素的标题...(2)导航通常使用 无序列表。若是面包屑链接,则使用 有序列表。 (3)HTML5 规范不推荐对辅助页脚链接使用 nav,除非页脚再次显示顶级全局导航、或者是招聘信息等重要链接。...(3)用 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,如书籍、杂志、期刊,等等。...(3)可以导致段落断开的标签(例如标题、 标签)绝不能包含在 所定义的块里。...(4)pre 元素中允许的文本可以包括物理样式基于内容的样式变化,还有链接、图像水平分隔线。 阅读更多

    1.4K40

    【CSS】课程网站 Banner 制作 ③ ( Banner 栏右侧课程盒子测量及样式 | Banner 版心盒子模型右侧课程栏代码示例 )

    文章目录 一、Banner 栏右侧课程盒子测量及样式 1、盒子尺寸测量 2、课程表头部样式 3、列表样式 4、最下方按钮样式 二、Banner 版心盒子模型右侧课程栏代码示例 1、HTML 标签结构...: 0 15px; } 无序列表如下图矩形框所示 , 该无序列表距离顶部标题有 10 像素的间隔 , 无序列表 与 顶部的 10 像素间隔 , /* Banner 条右侧 课程表 无序列表 距离头部有...Banner 条右侧 课程表 无序列表 列表项样式 */ .course-bd li { /* 列表项高度是 60 像素, 文字与顶部有 10 像素间隔 这里将列表项设置成 50 像素...; } /* Banner 条右侧 课程表 无序列表 列表项 课程内容 文本样式 */ .course-bd li .span2 { font-size: 14px; color: #4e4e4e...设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表中的链接样式 */ .nav ul li a { /*

    3.6K60

    html常用标签

    类型类型之间有什么区别,css课上讲。 不能往网页中插入的图片格式是:psd、ai HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。 插入方法: 1!...无序标签 无序列表,用来表示一个列表的语义,并且每个项目每个项目之间,是不分先后的。...ul就是英语unordered list,“无序列表”的意思。 li 就是英语list item , “列表项”的意思。 你会发现,这是我们学习的第一个“组标签”,就是要么不写,要么就要写一组。...浏览器会默认的给无序列表小圆点的“先导符号” 但是,我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的。...非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio。 单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。

    5.2K20

    HTML标签(二)

    根据使用情景不同,列表可以分为三大类:无序列表、有序列表自定义列表无序列表 标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 标签定义。...无序列表的基本语法格式如下: 列表项1 列表项2 列表项3 ......无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。 有序列表 有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。...type 属性的属性值及其描述如下: 其他属性 namevalue是每个表单元素都有的属性值主要给后台人员使用 name表单元素的名字,要求单选按钮复选框要有相同的name值 checked属性主要针对于单选按钮复选框主要作用一打开页面... 元素 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 标签。

    18310

    前端成神之路-列表表单

    第01阶段.前端基础.列表表单 1. 列表标签(重点) 学习目标 理解 无序列表的应用场景 自定义列表的应用场景 应用 无序列表语法 自定义列表语法 问?...1.1 无序列表 ul (重点) 无序列表的各个列表项之间没有顺序级别之分,是并列的。...但是实际中比 无序列表 用的少很多。 1.3 自定义列表(理解) 定义列表常用于对术语或名词进行解释描述,定义列表列表项前没有任何项目符号。...dt dd 我们现在还没有学布局,现在只要保证2个点: 学会什么时候用无序列表, 学会什么时候用自定义列表 无序列表自定义列表代码怎么写?...较常见于 单选按钮复选按钮

    1.6K20

    前端|Bootstrap——导航组件

    通常都是利用列表实现来导航的,常用的是无序列表()有序列表()。自定义列表()一般不会用来实现导航。 常见的导航菜单有标签式的导航菜单,胶囊式的导航菜单等等。...图1.1 效果图 问题描述 如何制作导航菜单 首先要引入jquery.js、bootstrap.min.jsbootstrap.min.css文件。...解决方案 (1)常规导航栏 先创建一个无序或者有序列表,把基本的元素先放进去。以一个带有 class=“nav”的无序列表开始,再添加class=“nav nav-tabs”。...如果没有data-toggle="dropdown"的话,即使被定义为dropdown-toggle类,也不能实现动态的菜单下拉收回的效果。...当添加 data-toggle="dropdown" 属性,就可以让下拉菜单默认隐藏,只有在点击按钮或链接时,它才显示出来。 此外,这里的下拉菜单,还使用了使用来指示按钮作为下拉菜单。

    6.6K10

    HTML(2)

    阻止a标签的默认点击行为 点我呀      (3)打电话 打电话 2.无序列表...,无序列表中的每一项是     ul:unordered list,"无序列表"的意思     li: list item, "列表项"的意思     type = "属性值".属性值可以选...4.定义列表   dl: definition list,没有属性.dl的子元素只能是dtdd.     ...属性值可以是:value="内容":文本框里的默认内容(已经被填好了的) text(默认) password:密码类型 radio:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的...reset:重置按钮,清空当前表单的内容,并设置为最初的默认值 image:图片按钮提交按钮的功能完全一致,只不过图片按钮可以显示图片。 file:文件选择框。

    3.5K40

    【CSS】课程网站 网格商品展示 模块制作 ① ( 网格商品展示模块盒子模型测量及样式 | 顶部文本标题盒子测量及样式 | 代码示例 )

    导航栏盒子 - 使用无序列表实现 --> 首页 ...设置左浮动 */ .nav ul li { /* 设置 无序列表项 从左到右排列 */ float: left; } /* 设置无序列表中的链接样式 */ .nav ul li a { /*...列表项 继续学习 文本样式 */ .course-bd li .span1 { font-size: 16px; color: #4e4e4e; } /* Banner 条右侧 课程表 无序列表...列表项 课程内容 文本样式 */ .course-bd li .span2 { font-size: 14px; color: #4e4e4e; } /* Banner 条右侧 课程表 无序列表...列表项 正在学习 文本样式 */ .course-bd li p { font-size: 12px; color: #a5a5a5; } /* Banner 条右侧 课程表 底部按钮样式 */

    4.3K40

    【Python100天学习笔记】Day22 Web学习-Html标签

    下标(subscript) sup sub 空白(白色空间折叠) 折行(break)水平标尺(horizontal ruler) br hr 语义化标签 加粗强调 - strong...引用 - blockquote 缩写词首字母缩写词 - abbr / acronym 引文 - cite 所有者联系信息 - address 内容的修改 - ins / del 列表(list) 有序列表...(ordered list)- ol / li 无序列表(unordered list)- ul / li 定义列表(definition list)- dl / dt / dd 链接(anchor)...- radio / 复选按钮 - checkbox 文件上传 - file / 隐藏域 - hidden 提交按钮 - submit / 图像按钮 - image / 重置按钮 - reset 下拉列表...-- 这是一段注释,注释不能够嵌套 --> 属性 id:唯一标识 class:元素所属的类,用于区分不同的元素 title:元素的额外信息(鼠标悬浮时会显示工具提示文本) tabindex:Tab键切换顺序

    50030

    初识MarkDown

    标题: 而在 Markdown 中,只需要在文本前面加上“#” 即可,同理、你还可以增加二级标题、三级标题、四级标题、五级标题六级标题,总共六级,只需要增加 “#” 即可,标题字号相应降低。...例如: 标题一 标题二 标题三 标题四 标题五 标题六 列表列表分为有序列表无序列表,在文字前面加上“-”为无序列表,而加上“n.”为有序列表。...无序列表: 内容一 内容二 内容三 有序列表: 内容一 内容二 内容三 插入链接: 在 Markdown 中,插入链接不需要其他按钮,你只需要使用 显示文本 这样的语法即可,例如: 简书 插入图片:...在 Markdown 中,插入图片不需要其他按钮,你只需要使用“ !...: Markdown 的粗体斜体也非常简单,用两个 * 包含一段文本就是粗体的语法,用一个 * 包含一段文本就是斜体的语法。

    32510

    【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)

    无序列表(重要) 标签、标签。 有序列表(用的不多) 标签、标签。 自定义列表(重要) 总标签、小标题、围绕标题来说明上面有个小标题。...标签/标签中只能放标签不能放其他标签,标签中只能放标签标签。 标签中可以放其他标签。 列表带有自己的样式,可以使用CSS来修改。...content="width=device-width, initial-scale=1.0"> Document 无序列表...尤其是对于单选按钮,具有相同的name才能多选一。 value:标签中的默认值。 checked:默认被选中。(用于单选按钮多选按钮)。 maxlength:设定最大长度。 1....3 -> HTML特殊字符 有些特殊的字符在html文件中是不能直接表示的,例如: 空格: ; 小于号:<; 大于号:>; 按位与:&; 标签就是用表示的。

    11910
    领券