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

【译】W3C WAI-ARIA最佳实践 -- 表单

复选框具有可访问标签,最好的方式是使用 aria-labelledby 关联可见标签: 将可见的内容放在角色为 checkbox 元素里面。...如果使用一个可见标签可将一组复选框标识为一个逻辑组,这些复选框应该被包含在一个具有 group 角色的元素中,且该元素的 aria-labelledby 设置为包含标签的元素的ID。...菜单一般通过激活 menu button 打开或变为可见,选择菜单中一个会打开子菜单的项目,或激活一个命令,例如Windows中的 Shift + F10 ,来打开上下文的特定菜单。...当菜单展开, 有 button 角色的元素的 aria-expanded 属性设置为 true。 当菜单收起, 建议设置 aria-expanded 属性。...当按钮被打开,该状态属性的值为 true,当被关闭,该状态属性的值为false。 示例 按钮示例:将可点击的HTML div 和 span 元素作为可访问命令和切换按钮的示例。

8.2K30
您找到你想要的搜索结果了吗?
是的
没有找到

SeleniumWebDriver处理复选框CheckBox和单选按钮RadioButton

该文章主要讲解如何识别复选框CheckBox和单选按钮RadioButton 单选按钮RadioButton 复选框CheckBox 查找元素异常情况汇总 单选按钮RadioButton 单选按钮也可以通过...在这里插入图片描述 复选框CheckBox 使用click()方法切换复选框的状态:开/关。 如下的代码是使用账户名和密码登陆百度网址,其中可见到下次自动登陆的复选框。 ?...:" + memberPass.isSelected()); 其输出为:"是否选中:False" isSelected() 方法的作用是:判断复选框是否被勾选。...: 如果在查找元素遇到NoSuchElementException(),这意味着在WebDriver访问该页面,该元素不在页面中。...click() 用于切换元素是否选中

3.4K10

与Ajax同样重要的jQuery(1)

对象转换为jQuery对象 * document 是DOM对象 jQuery(document) 成为了jQuery对象 4)jQuery(html, [ownerDocument]) // html...元素字体变为红色 ² class属性值为itcast的元素下直接a元素字体变为蓝色 ² div元素后所有兄弟a元素,字体变为黄色,大小变为30px <scripttype="text/javascript"src...a元素字体变为红色 $(".itcast a").css("color","red"); // class属性值为itcast的元素下直接a元素字体变为蓝色 $(".itcast>a").css("color...","blue"); // div元素后所有兄弟a元素,字体变为黄色,大小变为30px $("div~a").css({color:'yellow','font-size':'30px'}); });...⑨:表单对象属性过滤选择器 选取表单元素属性的过滤选择器 :enabled 选取所有可用元素 :disabled 选取所有不可用元素 :checked 选取所有被选中元素,如单选框、复选框 :selected

10K60

Vue表单输入绑定

.lazy 默认情况下v-model在每次input事件触发后输入框的值与数据进行同步,如果使用了该修饰符,则会转变为change事件进行同步。...> 当选中“男”,gender的值为1;当选中“女”,gender的值为0....单选,绑定的是选项的值(元素value属性的值);多选,绑定到一个数组,所有选中的选项的值被保存到数组中。 <!...7.1 复选框   在使用复选框,在元素上可以使用两个特殊的属性true-value和false-value来指定选中状态下和未选中状态下v-model绑定的值是什么。 <!...如下图 7.2 单选按钮   单选按钮选中,v-model绑定的数据属性的值默认被设置为该单选按钮的value值,可以使用v-bind云南苏的value属性再绑定到另一个数据属性上

7.3K70

使用 CSS Checkbox Hack 技术制作一个手风琴组件

这里运用的是:checked 伪类选择器,其意思就是”如果选中了表单(复选框、单选按钮),则应用相关样式规则“ 我们通常隐藏表单控件,然后结合来控制复选框或单选框的选择,制作一些特殊的效果...如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签,浏览器就会自动焦点转到和标签相关的表单控件上。这就是这个案例的关键所在。...接下来我们来动手实践吧,为了让对应选中的选项卡内容可见,我们使用 display: flex 让其可见,并使用 align-items: center 属性让文本内容垂直居中。...同时为了让用户区分选中了哪个选项卡,我们需要定义选项卡出于选中状态的标题颜色。...但是为了确保没有足够内容支撑,手风琴效果走样,我们需要进行一些样式上的特殊处理,效果如下图所示: 我们需要在每个当前选中状态的选项卡里添加flex-grow: 1属性,并不是所有的选项卡,让当前选中的选项卡里占据所有剩余宽度

5.3K30

【译】W3C WAI-ARIA最佳实践 -- 布局

Page Down: 以开发者设定的行数移动焦点,一般滚动,当前可见行集合中的最后一行会变为第一次滚动后可见行中的一行。...Page Up: 移动焦点到开发者设定的行数,一般滚动,当前可见行集合中的第一行会变为滚动后可见行中的一行。 Home: 焦点移动到包含焦点所在行的第一个单元格。...如果网格包含带有用于选择行的复选框的列,则该键可以用作在焦点不在复选框勾选框的快捷方式。 Control + A: 选择所有单元格。...如果网格包含用于选择行的复选框的列,当焦点不在复选框,可作为选中复选框的快捷键。 Control + A: 选择所有单元格。 Shift + Right Arrow: 向右扩展选择一个单元格。...NOTE 如果具有 grid 角色的元素HTML table 元素,那么不必为行和单元格使用ARIA角色,因为HTML元素暗含了ARIA语义。例如,HTMLTR 具有隐含的ARIA角色 row。

6.1K50

JQuery选择器(中)

HTML5学堂:在学习JQuery开发的时候,选择器有多种,而我们接着介绍选择器的其他类型,希望对大家有帮助!...:类型为E,允许或被禁止的用户界面元素 E:checked:类型为E,处于选中状态的用户界面元素(例如单选按钮或复选框) E:visible:选择所有可见元素(display值为block或visible.../p"):所有div节点的父节点下的p标签 还有相对路径的写法以及支持的Axis选择器,还不是会应用,介绍了...已经一大堆了 $的其他用法: $(html节点):根据提供的原始HTML标记字符串,动态创建由...这个元素在匹配元素集合中的位置变为0,而集合长度变成1 gt(数字):匹配的元素集合缩减为给定位置之后的所有元素 lt(数字):匹配的元素集合缩减为给定位置之前的所有元素 上面三个的例子: $("div...这意味着,每次执行传递进来的函数,函数中的this关键字都指向一个不同的元素(每次都是一个不同的匹配元素).而且,在每次执行函数,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数

2K90

Web阶段:第五章:JQuery库

可用的 :disabled 不可用的 :checked 选择的,checkbox或者单选按钮的选择 复选框、单选框等 :selected 选择的,下拉列表的选择 匹配所有选中的option元素 案例:...this.checked; }); // 需要检查一下,是否全部的球类复选框选中了 // 如果都选中了,设置【全选/全不选 】也选中...这个this对象是当前正在响应事件的dom对象 // 需要检查一下,是否全部的球类复选框选中了 // 如果都选中了,设置【全选/全不选 】也选中,反之亦然...> Jquery动画 基本动画 show() 显示隐藏的元素 第一个参数是 动画执行的时候,(单位是毫秒) 第二个参数是 动画执行完成的回调函数 hide() 隐藏可见元素 第一个参数是 动画执行的时候...,(单位是毫秒) 第二个参数是 动画执行完成的回调函数 toggle() 可见就隐藏,隐藏状态就显示 第一个参数是 动画执行的时候,(单位是毫秒) 第二个参数是 动画执行完成的回调函数 淡入淡出动画

26.2K20

PHP Web表单生成器案例分析

具体实现需求如下: 使用多维数组保存表单的相关信息 支持的表单项包括文本框、文本域、单选框、复选框和下拉列表5种类型 保存每个表单项的标记、提示文本、属性、选项值、默认值等 功能封装成函数,根据传递的参数生成指定的表单...因此,根据上述开发要求,可以每个表单项作为一个数组元素,每个元素利用一个关联数组描述,分别为:标记tag、提示文本text、属性数组attr、选项数组option和默认值default。 ?...– – ”是HTML的注释标记,用于解释和说明。 ? action属性的值可以是绝对路径、相对路径,若省略该属性则表示提交给当前文件进行处理。 GET方式传递的表单在URL地址栏中可见。...相比GET方式,POST方式提交的数据是不可见的,在交互相对安全。因此,通常情况下使用POST方式提交表单数据。...例如,选择性别,单击提示文字“男”或“女”,也可选中相应的单选按钮。 使用label标记包裹单选按钮和提示文本,即可实现单击label标记里的内容,相应的表单控件就会被选中

10.9K10

Python+Selenium笔记(七):WebDriver和WebElement

clear() 清除文本框或文本域的内容 click() 点击元素 get_attribute(name) 获取元素的属性值,name:要获取的属性名称 is_displayed() 检查元素对于用户是否可见...is_enabled() 检查元素是否可用 is_selected() 检查元素是否被选中,主要用于单选框和复选框 send_keys(value) 输入文本,value是要输入的值 submit()...、文本框、复选框、单选按钮 通过WebElement实现与各种HTML控件的自动化交互,例如在一个文本框输入文本、单击按钮、选择单选框或者复选框、获取元素的文本及属性值等。...self.driver.find_element_by_css_selector('p.txt-title.success-color').text == '注册成功') 例如,可以使用下面的方式检查博客园登录页面的复选框是否被选中...,是否默认不被选中 8 9 self.assertFalse(automatic_login.is_selected()) 10 11 #点击选中复选框 12 13 automatic_login.click

1.9K50

html下拉框设置默认值_html下拉列表框默认值

HTTP 服务默认…… name 的属性值必须要相同,必须有一个 value 值 实现默认选中的属性 :checked=”checked” – 文件输入项(在后期上传时候用到): -下拉…… html>...Radio 创建一个单选按钮控件 Submit…… 7.要在表单中添加一个默认选中状态的复选框,应使用语句 ⑨。...第 3 题 问答题 1.简要…… 限制输入的最大字符数,取值为整数 checked=“checked”使用在复选框和单选框中,表示该选项默认被选中 …,菜单里有多个选项,一般用于选择年……. . . ....下拉列表元素 语法: 内容 HTML 网页设计(表单元素) 1....本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站立刻删除。

33.7K21
领券