Search completed in 0.92 seconds.
<input type="checkbox"> - HTML: Hypertext Markup Language
<input> elements of type
checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form.
...a
checkbox allows you to select single values for submission in a form (or not).
... note: radio buttons are similar to
checkboxes, but with an important distinction — radio buttons are grouped into a set in which only one radio button can be selected at a time, whereas
checkboxes allow you to turn single values on and off.
...And 42 more matches
ARIA: checkbox role - Accessibility
the
checkbox role is used for checkable interactive controls.
... elements containing role="
checkbox" must also include the aria-checked attribute to expose the
checkbox's state to assistive technology.
... <span role="
checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk1-label"> </span> <label id="chk1-label">remember my preferences</label> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria.
...And 12 more matches
checkbox - Archive of obsolete content
attributes accesskey, checked, command, crop, disabled, src, label, preference, tabindex properties accesskey, accessibletype, checked, command, crop, disabled, src, label, tabindex examples <
checkbox label="enable javascript" checked="true"/> <
checkbox label="enable java" checked="false"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... for buttons, the type attribute must be set to
checkbox or radio for this attribute to have any effect.
... src type: uri set this to an uri pointing to an image to appear in the
checkbox.
...mespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related interfaces nsiaccessibleprovider, nsidomxul
checkboxelement ...
nsIPromptService
alertcheck() shows an alert dialog with an ok button and a labeled
checkbox.
... acheckmsg text to appear with the
checkbox.
... acheckstate contains the initial checked state of the
checkbox when this method is called and the final checked state after this method returns.
...And 32 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="button" name="button" />
checkbox a check box allowing single values to be selected/deselected.
... <input type="
checkbox" name="
checkbox"/> color a control for specifying a color; opening a color picker when active in supporting browsers.
...required for accessibility autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio,
checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction image, submit url to use for form submission formenctype image...
...And 24 more matches
UI pseudo-classes - Learn web development
this included some usage of pseudo-classes, for example using :checked to target a
checkbox only when it is selected.
... :checked, :indeterminate, and :default: respectively target
checkboxes and radio buttons that are checked, in an indeterminate state (neither checked or not checked), and the default selected option when the page loads (e.g.
... an <input type="
checkbox"> with the checked attribute set, or an <option> element with the selected attribute set).
...And 13 more matches
Creating our first Vue component - Learn web development
inside that <div>, let's add a
checkbox and a corresponding label.
... add an id to the
checkbox, and a for attribute mapping the
checkbox to the label, as shown below.
... <template> <div> <input type="
checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working.
...And 11 more matches
MenuItems - Archive of obsolete content
checkbox menu items sometimes, you will want to have an item on a menu that acts as a toggle.
...to indicate the current state of the toolbar, a
checkbox would be displayed next to the menu item label.
... if the
checkbox is on, the toolbar is shown, whereas if the
checkbox is off, the toolbar is not shown.
...And 9 more matches
Advanced form styling - Learn web development
to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks:
checkboxes and radio buttons <input type="search"> the ugly: some elements can't be styled thoroughly using css.
...earch: </label> <input id="search" name="search" type="search"> </p> <p> <label for="text">text: </label> <input id="text" name="text" type="text"> </p> <p> <label for="date">date: </label> <input id="date" name="date" type="datetime-local"> </p> <p> <label for="radio">radio: </label> <input id="radio" name="radio" type="radio"> </p> <p> <label for="
checkbox">
checkbox: </label> <input id="
checkbox" name="
checkbox" type="
checkbox"> </p> <p><input type="submit" value="submit"></p> <p><input type="button" value="button"></p> </form> applying the following css to them removes system-level styling.
...in a couple of cases — search and radio buttons/
checkboxes, it becomes way more useful.
...And 9 more matches
treecol - Archive of obsolete content
attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a
checkbox in the first column, requires the style below.
... <tree flex="1" editable="true"> <treecols> <treecol label="active" type="
checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the
checkbox visible on some platforms, the following styles need to be added to the stylesheet (see treecol.type).
...if targeting firefox for mac os x, be sure to use these styles but include your own
checkbox image.
...And 8 more matches
Vue conditional rendering: editing existing todos - Learn web development
<template> <div class="stack-small"> <div class="custom-
checkbox"> <input type="
checkbox" class="
checkbox" :id="id" :checked="isdone" @change="$emit('
checkbox-changed')" /> <label :for="id" class="
checkbox-label">{{label}}</label> </div> <div class="btn-group"> <button type="button" class="btn" @click="toggletoitemeditform"> edit <span class="visually-hidden">{{label}}</span> </button> <button type="b...
...if isediting is true, we want to use that flag to display our todoitemeditform instead of the
checkbox.
...add this line at the top of your <script> element: import todoitemeditform from "./todoitemeditform"; and add a components property about the props property inside the component object: components: { todoitemeditform }, now, if you go to your app and click a todo item's "edit" button, you should see the
checkbox replaced with the edit form.
...And 8 more matches
Accessible Toolkit Checklist
for example, lists of
checkboxes are implemented in windows with images of checked and unchecked
checkboxes.
... most widgets (like
checkboxes) can have a label outside of themselves, which should focus the widget when clicked on, or when its mnemonic is pressed.
... get_accname: get the "name" of the iaccessible, for example the name of a button,
checkbox or menu item.
...And 8 more matches
Practical positioning examples - Learn web development
let's have a look at the html in the file: <label for="toggle">❔</label> <input type="
checkbox" id="toggle"> <aside> ...
...here it is associated with the <input>
checkbox using the for and id attributes.
... here we are going to use these elements for a slightly different purpose — another useful side effect of <label> elements is that you can click a
checkbox's label to check the
checkbox, as well as just the
checkbox itself.
...And 7 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="my dialog" buttons="accept,cancel" ondialogaccept="savevalues(); window.close();" ondialogcancel="window.close();"> <
checkbox label="my option"/> </dialog> listing 8: a dialog figure 5: output from listing 8 note: the functions behind the dialog elements discussed here require "xpconnect privileges," which are discussed in chapter 4, so this example will only run correctly if it can run as firefox code itself or installed extension code.
...'menu-item-custom'); function handlecommandevent(aevent) { alert('ok'); item.removeeventlistener('command', handlecommandevent, false); item.parentnode.removechild(item); } item.addeventlistener('command', handlecommandevent, false); listing 11: additions and deletions using a dynamic event listener special menu items much like input elements in html, menuitem elements can operate like
checkboxes and radio buttons by setting their type attributes.
...
checkbox adding type="
checkbox" to a menuitem element will check that when it is selected, and uncheck it if it is selected again.
...And 6 more matches
tree - Archive of obsolete content
r idlist = []; var rangecount = tree.view.selection.getrangecount(); for (var i = 0; i < rangecount; i++) { var start = {}; var end = {}; tree.view.selection.getrangeat(i, start, end); for (var c = start.value; c <= end.value; c++) { idlist.push(tree.view.getitematindex(c).firstchild.id); } } the following returns a array of the indicies of the rows where the value is checked in a
checkbox type column: function getcellchecked(tree, columnid) { var arr = []; var column = tree.columns.getnamedcolumn(columnid); for (var i = 0; i < tree.view.rowcount; i++) { if (tree.view.getcellvalue(i, column) == 'true') arr.push(i); } return arr; } to get the text value for a specific column (for example column 'age') from the currently focused row in the tree: var t = docume...
...nt.getelementbyid('mytree'); document.title = t.view.getcelltext(t.currentindex,t.columns.getnamedcolumn('age')); to select the
checkbox and display the cell's text value, you can use code like the following.
...ree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="file://c:/main.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues" oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="active" type="
checkbox" editable="true" /> <treecol label="name" flex="1" id="name"/> </treecols> <treechildren> <treeitem> <treerow> <treecell value="false"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> </window> ...
...And 6 more matches
XForms Input Element - Archive of obsolete content
mozilla extensions labelposition - only for boolean types: show the label before or after the
checkbox (see below) type restrictions the input element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these.
... representations the xforms input element can be represented by the following widgets for the spcified data types (or types derived from these data types): text field - the default widget when no type is specified or the data is of type xsd:string (xhtml/xul)
checkbox - used for xsd:boolean instance data.
...
checkbox most often used when the form author only needs a simple 'true', 'false', '1', or '0' response from the user (xhtml/xul).
...And 6 more matches
Basic native form controls - Learn web development
this article covers: the common input types button,
checkbox, file, hidden, image, password, radio, reset, submit, and text.
...it is used for creating most types of form widgets including single line text fields, time and date controls, controls without text input like
checkboxes, radio buttons, and color pickers, and buttons.
... checkable items:
checkboxes and radio buttons checkable items are controls whose state you can change by clicking on them or their associated labels.
...And 6 more matches
Beginning our React todo list - Learn web development
<span classname="visually-hidden"> tasks</span> </button> </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="
checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delet...
...e <span classname="visually-hidden">eat</span> </button> </div> </li> <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-1" type="
checkbox" /> <label classname="todo-label" htmlfor="todo-1"> sleep </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">sleep</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">sleep</span> </button> </div> </li> <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-2...
..." type="
checkbox" /> <label classname="todo-label" htmlfor="todo-2"> repeat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">repeat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">repeat</span> </button> </div> </li> </ul> </div> ); } now open public/index.html and change the <title> element’s text to todomatic.
...And 6 more matches
Componentizing our Svelte app - Learn web development
creating our todo component now we will create a todo component to encapsulate each individual todo — including the
checkbox and some editing logic so you can change an existing todo.
... put the following contents inside this file: <script> export let todo </script> <div class="stack-small"> <div class="c-cb"> <input type="
checkbox" id="todo-{todo.id}" on:click={() => todo.completed = !todo.completed} checked={todo.completed} /> <label for="todo-{todo.id}" class="todo-label">{todo.name}</label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger" on:click={() =>...
... update the {#each} block inside todos.svelte like so: <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each filtertodos(filter, todos) as todo (todo.id)} <li class="todo"> <todo {todo} /> </li> {:else} <li>nothing to do here!</li> {/each} </ul> the list of todos is displayed on the page, and the
checkboxes should work (try checking/unchecking a couple, and then observing that the filters still work as expected), but our "x out of y items completed" status heading will no longer update accordingly.
...And 6 more matches
Border-image generator - CSS: Cascading Style Sheets
v class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-
checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-input-slider" data-topic="preview-area-height" data-min="400" data-max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> ...
...id="preview"> </div> </div> <!-- controls --> <div id="controls" class="group section"> <!-- border-image-slice --> <div id="border-slice-control" class="category"> <div class="title"> border-image-slice </div> <div class="property"> <div class="name">fill</div> <div class="ui-
checkbox" data-topic='slice-fill'></div> </div> </div> <!-- border-image-width --> <div id="border-width-control" class="category"> <div class="title"> border-image-width </div> </div> <!-- border-image-outset --> <div id="border-outset-control" class="category"> <div class="title"> bo...
...moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui button */ /*
checkbox */ .ui-
checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-
checkbox > input { display: none; } .ui-
checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em;...
...And 6 more matches
Box-shadow generator - CSS: Cascading Style Sheets
data-type="subject" data-title=":before"> :before <span class="delete" data-type="disable"></span> </div> <div class="button" id="after" data-type="subject" data-title=":after"> :after <span class="delete" data-type="disable"></span> </div> <div class="ui-
checkbox" data-topic='before' data-label=":before"></div> <div class="ui-
checkbox" data-topic='after' data-label=":after"></div> </div> <div id="preview"> <div id="obj-element"> <div class="content"> </div> <div id="obj-before"> </div> <div id="obj-after"> </div> </div> ...
... </div> </div> </div> <div class="wrap-right"> <div id="shadow_properties" class="category"> <div class="title"> shadow properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> inset </div> <div class="ui-
checkbox" data-topic='inset'></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position x </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="sub"></div> <div class="ui-slider" data-topic="posx" data-min="-500" data-max="500" data-ste...
..."px"></div> </div> </div> </div> <div id="element_properties" class="category"> <div class="title"> class element properties </div> <div class="group"> <div class="group property"> <div class="ui-slider-name"> border </div> <div class="ui-
checkbox" data-topic='border-state' data-state="true"></div> </div> <div id="z-index" class="slidergroup"> <div class="ui-slider-name"> z-index </div> <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> <div class="ui-slider" data-topic="z-index" ...
...And 6 more matches
treecol.type - Archive of obsolete content
checkbox the content of the columns are
checkboxes.
... if you are using type="
checkbox", then the tree and each treecol must be editable.
... you need to apply css to make the
checkbox toggle.
...And 5 more matches
Styling Vue components with CSS - Learn web development
to use the scoped modifier, create a <style> element inside todoitem.vue, at the bottom of the file, and give it a scoped attribute: <style scoped> </style> next, copy the following css into the newly created <style> element: .custom-
checkbox > .
checkbox-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; color: #0b0c0c; display: block; margin-bottom: 5px; } .custom-
checkbox > .
checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing...
...: grayscale; font-weight: 400; font-size: 16px; font-size: 1rem; line-height: 1.25; box-sizing: border-box; width: 100%; height: 40px; height: 2.5rem; margin-top: 0; padding: 5px; border: 2px solid #0b0c0c; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .custom-
checkbox > input:focus { outline: 3px dashed #fd0; outline-offset: 0; box-shadow: inset 0 0 0 2px; } .custom-
checkbox { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 40px; margin-bottom: 10px; padding-left: 40px; clear: left; } .custom-
checkbox > input[type="
checkbox"] { -webkit-font-smoothing: antialiased; cursor: ...
...pointer; position: absolute; z-index: 1; top: -2px; left: -2px; width: 44px; height: 44px; margin: 0; opacity: 0; } .custom-
checkbox > .
checkbox-label { font-size: inherit; font-family: inherit; line-height: inherit; display: inline-block; margin-bottom: 0; padding: 8px 15px 5px; cursor: pointer; touch-action: manipulation; } .custom-
checkbox > label::before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border: 2px solid currentcolor; background: transparent; } .custom-
checkbox > input[type="
checkbox"]:focus + label::before { border-width: 4px; outline: 3px dashed #228bec; } .custom-
checkbox > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; le...
...And 5 more matches
Tree Widget Changes - Archive of obsolete content
checkbox columns tree columns now implement the
checkbox type.
...you can create a
checkbox column by setting the type attribute of a column to
checkbox.
... <treecol type="
checkbox"> you can then set or clear the
checkbox for a particular cell in that column by setting the value attribute to true, or leaving out the attribute.
...And 4 more matches
toolbarbutton - Archive of obsolete content
p, dir, disabled, dlgtype, group, image, label, oncommand, open, orient, tabindex, title, type, validate properties accesskey, accessibletype, autocheck, checkstate, checked, command, crop, dir, disabled, dlgtype, group, image, label, open, orient, tabindex, type examples <toolbar id="test-toolbar"> <toolbarbutton accesskey="p" label="plain"/> <toolbarbutton accesskey="c" label="
checkbox" type="
checkbox"/> <toolbarbutton accesskey="b" label="menu-button" type="menu-button"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutton> <toolbarbutton accesskey="m" label="menu" type="menu"> <menupopup> <menuitem label="menu item 1"/> <menuitem label="menu item 2"/> </menupopup> </toolbarbutt...
...when autocheck is true, the button type should be "
checkbox" or "radio".
...this means that the button acts like a
checkbox except that there is a third state which must be set manually by adjusting the check state.
...And 4 more matches
HTMLInputElement - Web APIs
properties that apply only to elements of type
checkbox or radio checked boolean: returns / sets the current state of the element when type is
checkbox or radio.
... defaultchecked boolean: returns / sets the default state of a radio button or
checkbox as originally specified in html that created this object.
... indeterminate boolean: returns whether the
checkbox or radio button is in indeterminate state.
...And 4 more matches
ARIA Test Cases - Accessibility
- - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - -
checkbox simple
checkbox testcases: set aria-checked="false" for unchecked both remove or set attribute for unchecked case -- also includes an invalid and required
checkbox hierarchical (newly added test not in test results yet) dojo nightly build expected at behavior: screen reader should speak the accessible name followed by both the type being
checkbox and the state (checked, unchecked).
... markup used: role="
checkbox" aria-checked="true" or "false" notes: need testcase where aria-checked attribute is removed instead of set to false results: at firefox ie opera safari jaws 9 - - n/a n/a jaws 10 pass fail (changes not spoken) fail fail voiceover (leopard) n/a n/a - fail window-eyes pass pass fail (unchecked presented as checked, ie exposing incorrect state for no aria-checked attribute) fail fail nvda fail on #2 -- repetitive text spoken, first
checkbox toggle speaks incorrect state n/a fail fail zoom (leopard) pass n/a pass pass ...
...zoomtext pass - fail fail orca pass n/a - - tristate
checkbox testcases: both remove or unset for unchecked case expected at behavior: screen reader should announce accessible name, role and state.
...And 4 more matches
Border-radius generator - CSS: Cascading Style Sheets
<div class="ui-input-slider" data-topic="height" data-info="height" data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> </div> <div id="output"></div> </div> <div class="group section"> <div id="radius-lock"> <div class="info"> rounded corner </div> <div class="ui-
checkbox" data-topic='top-left'></div> <div class="ui-
checkbox" data-topic='top-right'></div> <div class="ui-
checkbox" data-topic='bottom-right'></div> <div class="ui-
checkbox" data-topic='bottom-left'></div> </div> <div id="unit-selection"> <div class="info"> select border units </div> </div> </di...
...-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /*
checkbox */ .ui-
checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-
checkbox > input { display: none; } .ui-
checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em;...
... background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-
checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-
checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-
checkbox > label:hover { cursor: pointer; } .ui-
checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; ...
...And 4 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
syntax /* css basic user interface module level 4 values */ appearance: none; appearance: auto; appearance: menulist-button; appearance: textfield; /* "compat-auto" values, which have the same effect as 'auto' */ appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; appearance: slider-horizontal; appearance:
checkbox; appearance: radio; appearance: square-button; appearance: menulist; appearance: listbox; appearance: meter; appearance: progress-bar; /* partial list of available values in gecko */ -moz-appearance: scrollbarbutton-up; -moz-appearance: button-bevel; /* partial list of available values in webkit/blink (as well as gecko and edge) */ -webkit-appearance: media-mute-button; -webkit-appearance: care...
...
checkbox div { color: black; -moz-appearance:
checkbox; -webkit-appearance:
checkbox; } <div>lorem</div> firefox chrome safari edge the element is drawn like a
checkbox, including only the actual "
checkbox" portion.
...fox chrome safari edge caps-lock-indicator div{ color: black; -moz-appearance: caps-lock-indicator; -webkit-appearance: caps-lock-indicator; } <div>lorem</div> safari edge caret div { color: black; -moz-appearance: caret; -webkit-appearance: caret; } <div>lorem</div> firefox chrome safari edge
checkbox-container div { color: black; -moz-appearance:
checkbox-container; -webkit-appearance:
checkbox-container; } <div>lorem</div> firefox the element is drawn like a container for a
checkbox, which may include a prelighting background effect under certain platforms.
...And 4 more matches
Index - Archive of obsolete content
799
checkbox.src xul attributes, xul reference no summary!
... 1711
checkboxstatechange event, events the
checkboxstatechange event is executed when the state of a <
checkbox> element has changed.
... 1834
checkbox xul elements, xul reference an element that can be turned on and off.
...And 3 more matches
Input Controls - Archive of obsolete content
checkboxes and radio buttons two additional elements are used for creating check boxes and radio buttons.
...the
checkbox element is used for options that can be enabled or disabled.
... you can use most of the same attributes on
checkboxes and radio buttons as with buttons.
...And 3 more matches
XUL accessibility guidelines - Archive of obsolete content
groupboxes are essential for radiogroups or groups of
checkboxes with a similar theme (e.g.
...for example, the first item in the privacy panel in the firefox option dialog (discussed and shown above) is [
checkbox] remember visited pages for the last [textbox] days.
... the difficulty here arises from the fact that the correct label for the
checkbox ("remember visited pages for the last x days.") includes three different pieces, the second of which is the current value entered into the textbox.
...And 3 more matches
button - Archive of obsolete content
when autocheck is true, the button type should be "
checkbox" or "radio".
...this means that the button acts like a
checkbox except that there is a third state which must be set manually by adjusting the check state.
...the type attribute must be set to
checkbox for buttons with a check state.
...And 3 more matches
Ember app structure and componentization - Learn web development
update the application.hbs file again so its content looks like this: <section class="todoapp"> <h1>todos</h1> <input class="new-todo" aria-label="what needs to be done?" placeholder="what needs to be done?" autofocus > <section class="main"> <input id="mark-all-complete" class="toggle-all" type="
checkbox"> <label for="mark-all-complete">mark all as complete</label> <ul class="todo-list"> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="
checkbox" > <label>buy movie tickets</label> <button type="button" class="destroy" ...
... title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> <li> <div class="view"> <input aria-label="toggle the completion of this todo" class="toggle" type="
checkbox" > <label>go to movie</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> </ul> </section> <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> <a hr...
...: the main input / "new-todo" (red in the image) the containing body of the todo list + the mark-all-complete button (purple in the image) the mark-all-complete button, explicitly highlighted for reasons given below (yellow in the image) each todo is an individual component (green in the image) the footer (blue in the image) something odd to note is that the mark-all-complete
checkbox (marked in yellow), while in the "main" section, is rendered next to the "new-todo" input.
...And 3 more matches
React interactivity: Events and state - Learn web development
update your <h2> like so: <h2 id="list-heading">{headingtext}</h2> completing a task you might notice that, when you click on a
checkbox, it checks and unchecks appropriately.
... as a feature of html, the browser knows how to remember which
checkbox inputs are checked or unchecked without our help.
... this feature hides a problem, however: toggling a
checkbox doesn't change the state in our react application.
...And 3 more matches
Starting our Svelte Todo list app - Learn web development
</button> <button class="btn btn__primary todo-edit" type="submit"> save <span class="visually-hidden">new name for create a svelte starter app</span> </button> </div> </form> </div> </li> <!-- todo-2 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="
checkbox" id="todo-2" checked/> <label for="todo-2" class="todo-label"> create your first component </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">create your first component</span> </button> <button type="button" class="btn btn__danger"> ...
... delete <span class="visually-hidden">create your first component</span> </button> </div> </div> </li> <!-- todo-3 --> <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="
checkbox" id="todo-3" /> <label for="todo-3" class="todo-label"> complete the rest of the tutorial </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">complete the rest of the tutorial</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">complete the rest of the tutorial</span> </button> ...
... if the task is not being edited, there's a
checkbox to set the completed status, and two buttons to edit or delete the task.
...And 3 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
replace the existing <ul> element with the following simplified version to get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <input type="
checkbox" checked={todo.completed}/> {index}.
...replace your existing <ul> block with the following: <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> {#each todos as todo (todo.id)} <li class="todo"> <div class="stack-small"> <div class="c-cb"> <input type="
checkbox" id="todo-{todo.id}" checked={todo.completed}/> <label for="todo-{todo.id}" class="todo-label"> {todo.name} </label> </div> <div class="btn-group"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger"> del...
...ete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using curly braces to embed javascript expressions in html attributes, like we did with the checked and id attributes of the
checkbox.
...And 3 more matches
:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<input type="radio">),
checkbox (<input type="
checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
... /* matches any checked/selected radio,
checkbox, or option */ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.
... syntax :checked examples basic example html <div> <input type="radio" name="my-input" id="yes"> <label for="yes">yes</label> <input type="radio" name="my-input" id="no"> <label for="no">no</label> </div> <div> <input type="
checkbox" name="my-
checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="opt3">pears</option> </select> css div, select { margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[typ...
...And 3 more matches
XUL Events - Archive of obsolete content
the event handler should be placed on an observer.
checkboxstatechangethe
checkboxstatechange event is executed when the state of a <
checkbox> element has changed.closethe close event is executed when a request has been made to close the window when the user presses the close button.commandthe command event is executed when an element is activated.commandupdatethe commandupdate event is executed when a command update occurs on a <commandset>.
... event description
checkboxstatechange this event is sent when a
checkbox is checked or unchecked, either by the user or a script.
... normally, you would use the command event to listen to
checkbox changes, however, the command event is only sent when the user modifies the value, while the
checkboxstatechange event is also sent when a script modifies the checked property of a
checkbox.
...And 2 more matches
Index - Archive of obsolete content
52
checkbox.src xul attributes, xul reference no summary!
... 980
checkboxstatechange event, events the
checkboxstatechange event is executed when the state of a <
checkbox> element has changed.
... 1103
checkbox xul elements, xul reference an element that can be turned on and off.
...And 2 more matches
XUL Questions and Answers - Archive of obsolete content
is it possible to have
checkbox support for multi column lists?
... the current issue is a person exploring if it is possible to have
checkbox support for multi column lists.
...="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="
checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="
checkbox" value="2" label="vghjkvk" checked="true"/> </listitem> <listitem> <listcell type="
checkbox" value="3" label="hukfzgjcfj" disabled="true"/> </listitem> </listbox> <listbox rows="4"> <listhead> <listheader label="single-column"/> </listhead> <listitem type="
checkbox" value="1" label="v...
...And 2 more matches
Componentizing our React app - Learn web development
go back to src/app.js, copy the first <li> from inside the unordered list, and paste it into todo.js so that it reads like this: export default function todo() { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="
checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat<...
... putting all that together, your todo() function should read like this: export default function todo(props) { return ( <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="
checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="vis...
...once you’re done, the todo component's <input /> element will read like this: <input id="todo-0" type="
checkbox" defaultchecked={props.completed} /> and your browser should update to show only eat being checked: if you change each <todo /> component’s completed prop, your browser will check or uncheck the equivalent rendered
checkboxes accordingly.
...And 2 more matches
Using Vue computed properties - Learn web development
tracking changes to "done" we can use events to capture the
checkbox update and manage our list accordingly.
... since we're not relying on a button press to trigger the change, we can attach a @change event handler to each
checkbox instead of using v-model.
... <input type="
checkbox" class="
checkbox" :id="id" :checked="isdone" @change="$emit('
checkbox-changed')" /> since all we need to do is emit that the
checkbox was checked, we can include the $emit() inline.
...And 2 more matches
Accessibility API cross-reference
a
checkbox; aria has two kinds: use
checkbox if you need to express 'mixed' state (some of the descendents are true, some are false), otherwise use switch or (preferred in html) <input type=
checkbox>, which are true/false only.
... checkbutton check_box check_box
checkbox or switch <input type=
checkbox> pretty obvious what this is for clock n/a n/a timer <time> column of cells in a table - how would the user specifically point to this, as opposed to the column header or cells?
... menuitem
checkbox a checkable menuitem in a set of elements with the same role, only one of which can be checked at a time.
...And 2 more matches
<menuitem> - HTML: Hypertext Markup Language
commands can also optionally include a
checkbox or be grouped to share radio buttons.
... (menu items for indirect commands gain
checkboxes or radio buttons when defined against elements <input type="
checkbox"> and <input type="radio">.) content categories none.
...may only be used when the type attribute is
checkbox or radio.
...And 2 more matches
Broadcasters and Observers - Archive of obsolete content
example 1 : source view <command id="my_command" label="open"/> <button command="my_command"/> <
checkbox label="open in a new window" command="my_command"/> in this example, the button does not have a label attribute, however it is attached to a command that does.
...the
checkbox already has a label, however, it will be overridden by the command's label.
... the result is that both the button and the
checkbox will have the same label 'open'.
... if you were to modify the command's label attribute, the label on the button and
checkbox will adjust accordingly.
Groupboxes - Archive of obsolete content
although any content can be used, usually you would use a
checkbox or dropdown menu.
... example 2 : source view <groupbox flex="1"> <caption> <
checkbox label="enable backups"/> </caption> <hbox> <label control="dir" value="directory:"/> <textbox id="dir" flex="1"/> </hbox> <
checkbox label="compress archived files"/> </groupbox> in this example, a
checkbox has been used as a caption.
... we might use a script to enable and disable the contents of the groupbox when the
checkbox is checked and unchecked.
...the additional
checkbox appears below the textbox because of the vertical orientation of the groupbox.
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
where the
checkbox has been checked).
...we need to wire up the todo.hbs template to the service, so that checking the relevant
checkbox changes the state of each todo.
...ervice('todo-data') todos; } next, go back again to our todo-data.js service file and add the following action just below the previous ones, which will allow us to toggle a completion state for each todo: @action togglecompletion(todo) { todo.iscompleted = !todo.iscompleted; } updating the template to show completed state finally, we will edit the todo.hbs template such that the
checkbox's value is now bound to the iscompleted property on the todo, and so that on change, the togglecompletion() method on the todo service is invoked.
... in todo.hbs, first find the following line: <li> and replace it with this — you'll notice that here we're using some more conditional content to add the class value if appropriate: <li class="{{ if @todo.iscompleted 'completed' }}"> next, find the following line: <input aria-label="toggle the completion of this todo" class="toggle" type="
checkbox" > and replace it with this: <input class="toggle" type="
checkbox" aria-label="toggle the completion of this todo" checked={{ @todo.iscompleted }} {{ on 'change' (fn this.todos.togglecompletion @todo) }} > note: the above snippet uses a new ember-specific keyword — fn.
nsPIPromptService
e
checkboxmsg the value is 1.
... this is the label text of a
checkbox on the dialog.
...e
checkboxstate the value is 1.
... this is the default
checkbox state and the result of it.
Examine and edit CSS - Firefox Developer Tools
enable/disable: if you hover over a declaration, a
checkbox appears next to it: you can use this to toggle the declaration on or off.
...(note that this setting is independent of the "browser styles"
checkbox in the computed view.) user-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule.
...ceholder :-moz-progress-bar :-moz-range-progress :-moz-range-thumb :-moz-range-track :-moz-selection if the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see
checkboxes that you can use to enable the :hover, :active and :focus, :focus-within and :visited pseudo-classes for the selected element: this feature can also be accessed from the popup menu in the html view.
... you can clear the
checkbox for a particular class name, to see how the element would appear without that class applied to it.
Settings - Firefox Developer Tools
to see the settings, open any of the developer tools, and then: click the "settings" command in the menu: or press f1 to toggle between the active tool and the settings pane the settings pane looks something like this: categories default firefox developer tools this group of
checkboxes determines which tools are enabled in the toolbox.
... available toolbox buttons this group of
checkboxes determines which tools get an icon in the toolbox's toolbar.
... note that in firefox 52 we removed the
checkbox to toggle the "select element" button.
...note that this setting is independent of the "browser styles"
checkbox in the inspector's computed view.
Using XMLHttpRequest - Web APIs
*/ for (nfile = 0; nfile < ofield.files.length; this.segments.push(ffilter(ofield.name) + "=" + ffilter(ofield.files[nfile++].name))); } } else if ((sfieldtype !== "radio" && sfieldtype !== "
checkbox") || ofield.checked) { /* note: this will submit _all_ submit buttons.
...ale">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> post your photos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="
checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="
checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" />...
... ofield.getattribute("type").touppercase() : "text"; if (sfieldtype === "file") { for (nfile = 0; nfile < ofield.files.length; ssearch += "&" + escape(ofield.name) + "=" + escape(ofield.files[nfile++].name)); } else if ((sfieldtype !== "radio" && sfieldtype !== "
checkbox") || ofield.checked) { ssearch += "&" + escape(ofield.name) + "=" + escape(ofield.value); } } oreq.open("get", oformelement.action.replace(/(?:\?.*)?$/, ssearch.replace(/^&/, "?")), true); oreq.send(null); } } </script> </head> <body> <h1>sending forms with formdata</h1> <h2>using the get method</h2> <form action="register.php" method="get" onsubmit="ajaxsubmit(this...
...ale">female</label><br /> password: <input type="password" name="secret" /><br /> what do you prefer: <select name="image_type"> <option>books</option> <option>cinema</option> <option>tv</option> </select> </p> <p> post your photos: <input type="file" multiple name="photos[]"> </p> <p> <input id="vehicle_bike" type="
checkbox" name="vehicle[]" value="bike" /> <label for="vehicle_bike">i have a bike</label><br /> <input id="vehicle_car" type="
checkbox" name="vehicle[]" value="car" /> <label for="vehicle_car">i have a car</label> </p> <p> describe yourself:<br /> <textarea name="description" cols="50" rows="8"></textarea> </p> <p> <input type="submit" value="submit" />...
WAI-ARIA Roles - Accessibility
to be supported, the cell must be nested in an element with the role of row.aria:
checkbox rolethe
checkbox role is used for checkable interactive controls.
... elements containing role="
checkbox" must also include the aria-checked attribute to expose the
checkbox's state to assistive technology.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.
...this should be used on an element that wraps an element with an insertion role, and one with a deletion role.aria: switch rolethe aria switch role is functionally identical to the
checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off."aria: tab rolethe aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.aria: table rolethe table value of the aria role attribute identifies the element containing the...
... alertdialog banner combobox command columnheader (estelle) complementary composite definition directory feed gridcell (eric e) group input landmark link - old page listbox log - old page marquee math menu menubar menuitem menuitem
checkbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (michiel) tabpanel (michiel) term timer toolbar tooltip tree treegrid treeitem widget window ...
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
a set of system messages that confer accessibility-related events such as focus changes, changes to document content and state changes in ui objects like
checkboxes.
...[important] get_accname: get the "name" of the iaccessible, for example the name of a button,
checkbox or menu item.
... is it a link, static text, editable text, a
checkbox, or a table cell, etc.
...nt, depending on project] event_object_reorder [important for mutating docs] event_object_focus [important] event_object_selection [important] event_object_selectionadd [important for multiple selection] event_object_selectionremove [important for multiple selection] event_object_selectionwithin [important for multiple selection] event_object_statechange [important for
checkboxes and radio buttons] event_object_locationchange event_object_namechange event_object_descriptionchange event_object_valuechange [important for sliders and progress meters] event_object_parentchange event_object_helpchange event_object_defactionchange event_object_acceleratorchange msaa states cheat sheet for information on what each state does, see the ms...
simple-prefs - Archive of obsolete content
type description example specification bool displayed as a
checkbox and stores a boolean.
... { "description": "does it have tentacles?", "type": "bool", "name": "hastentacles", "value": true, "title": "tentacles" } boolint displayed as a
checkbox and stores an integer.
... a boolint is presented to the user as a
checkbox, but instead of storing true or false, the "on" or "off"
checkbox states are mapped to integers using "on" or "off" properties in the specification.
Adding windows and dialogs - Archive of obsolete content
the prompt service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and
checkboxes that can be used for "never ask this again"-type dialogs.
... <
checkbox id="xulschoolhello-some-
checkbox" label="&xulschoolhello.sometext.label;" checked="false" persist="checked" /> setting the id attribute of the element is mandatory if you want the persist attribute to work.
... you can also set persistence programatically using the document.persist function: document.persist("xulschoolhello-some-
checkbox", "checked"); persistent data is stored in the user profile, in the file localstore.rdf.
Binding Attachment and Detachment - Archive of obsolete content
in the following example, a binding is referenced that will be attached to all html
checkbox elements.
... input[type="
checkbox"] { -moz-binding: url("http://www.mozilla.org/xbl/htmlbindings.xml#
checkbox"); } bindings attached through css will only remain on the bound element as long as the element continues to match the style rule.
... var
checkbox = document.getelementbyid("my
checkbox");
checkbox.style.mozbinding = "url(http://www.mozilla.org/xbl/htmlbindings.xml#
checkbox)"; this attachment is not necessarily synchronous.
confirm - Archive of obsolete content
acheckmsg a string to display as a
checkbox label.
... acheckstate an object with a boolean value property representing the state of the
checkbox: when the dialog box is shown, its
checkbox will be checked when this object's value is true.
... after the user presses a button (or closes the window), the value property is updated according to the
checkbox.
Modifying a XUL Interface - Archive of obsolete content
manipulating basic elements the main xul elements such as buttons,
checkboxes and radio buttons may be manipulated using a number of script properties.
...you can also retrieve the current label or value using these properties, as in the following example: example 5 : source view <button label="hello" oncommand="alert(this.label);"/> toggling a
checkbox checkboxes have a checked property which may be used to check or uncheck the
checkbox.
... note: if you're creating the
checkbox dynamically and it's not yet added to the dom, you must use setattribute("checked", "false") instead, because the xbl isn't initiated yet.) example 6 : source view <button label="change" oncommand="this.nextsibling.checked = !this.nextsibling.checked;"/> <
checkbox label="check for messages"/> radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked.
More Menu Features - Archive of obsolete content
the checks are created in a similar way to the
checkbox and radio elements.
...example 2 : source view <toolbox> <menubar id="options-menubar"> <menu id="options_menu" label="options"> <menupopup> <menuitem id="backups" label="make backups" type="
checkbox"/> <menuitem id="email" label="email administrator" type="
checkbox" checked="true"/> </menupopup> </menu> </menubar> </toolbox> the type attribute has been added which is used to make the menu item checkable.
... by setting its value to
checkbox, the menu item can be checked on and off by selecting the menu item.
XUL controls - Archive of obsolete content
button reference related elements: menupopup menuitem <
checkbox> a control that may be turned on and off, typically used to create options which may be enabled or disabled.
... <
checkbox label="show toolbar labels" checked="true"/> more information about the
checkbox element.
...
checkbox reference <colorpicker> a control that may be used to select a color.
menuitem - Archive of obsolete content
when autocheck is true, the button type should be "
checkbox" or "radio".
... for buttons, the type attribute must be set to
checkbox or radio for this attribute to have any effect.
...
checkbox the menuitem is checked.
preference - Archive of obsolete content
you can connect a user interface element such as a
checkbox to a preference element using the user interface element's preference attribute.
...for instance, checking the
checkbox disables the preference instead of enabling it.
...usually a
checkbox would be connected to these preferences.
Theme changes in Firefox 3.5 - Archive of obsolete content
global/
checkbox.css, global/radio.css since bug 394892, radio buttons and
checkboxes no longer have a minimum size on mac os x.
... if your theme uses native
checkboxes or radiobuttons (-moz-appearance: radio /
checkbox), this can result in distorted controls.
... you might have to set the width and height of .
checkbox-check and .radio-check to 16px to avoid that problem.
::-ms-check - Archive of obsolete content
the ::-ms-check css pseudo-element is a microsoft extension that represents
checkboxes and radio button groups created by <input type="
checkbox"> and <input type="radio">.
...ont-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top transform transform-origin visibility width syntax ::-ms-check example html <form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="green
checkbox">green</label> <input type="
checkbox" id="green
checkbox"> </form> css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked.
...*/ } input[type=
checkbox]::-ms-check { border-color: green; /* this will make the box green when the button is checked.
How to structure a web form - Learn web development
this is useful for controls like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and
checkboxes — the hit area of such a control can be very small, so it is useful to make it as easy to activate as possible.
... for example, clicking on the "i like cherry" label text in the example below will toggle the selected state of the taste_cherry
checkbox: <form> <p> <input type="
checkbox" id="taste_1" name="taste_cherry" value="cherry"> <label for="taste_1">i like cherry</label> </p> <p> <input type="
checkbox" id="taste_2" name="taste_banana" value="banana"> <label for="taste_2">i like banana</label> </p> </form> note: you can find this example in
checkbox-label.html (see it live also).
...lists are recommended for structuring multiple
checkboxes or radio buttons.
Styling web forms - Learn web development
multi-line <textarea>s buttons (both <input> and <button>s) <label> <output> the bad some elements are more difficult to style, requiring more complex css or some more specific tricks:
checkboxes and radio buttons <input type="search"> we describe how to handle these more specific features in the article advanced form styling.
...to give the same size to several different widgets, you can use the box-sizing property along with some consistent values for other properties: input, textarea, select, button { width : 150px; padding: 0; margin: 0; box-sizing: border-box; } in the screenshot below, the left column shows the default rendering of an <input type="radio">, <input type="
checkbox">, <input type="range">, <input type="text">, <input type="date"> input, <select>, <textarea>,<input type="submit">, and <button>.
... what may not be apparent via the screenshot is that the radio and
checkbox controls still look the same, but they are centered in the 150px of horizontal space provided by the width property.
Ember resources and troubleshooting - Learn web development
more concretely, using mut allows for template-only settings functions to be declared: <
checkbox @value={{this.somedata}} @ontoggle={{fn (mut this.somedata) (not this.somedata)}} /> whereas, without mut, a component class would be needed: import component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class example extends component { @tracked somedata = false; @action setdata(newvalue) { this.s...
...omedata = newvalue; } } which would then be called in the template like so: <
checkbox @data={{this.somedata}} @onchange={{this.setdata}} /> due to the conciseness of using mut, it may be desireable to reach for it.
... with ember-set-helper: <
checkbox @value={{this.somedata}} @ontoggle={{set this "somedata" (not this.somedata)}} /> with ember-box: {{#let (box this.somedata) as |somedata|}} <
checkbox @value={{unwrap somedata}} @ontoggle={{update somedata (not this.somedata)}} /> {{/let}} note that none of these solutions are particularly common among members of the community, and as a whole, people are still trying to figure ...
Gecko info for Windows accessibility vendors
indicates that the absence of state_checked should be spoken as // "unchecked", and that event_state_change will be fired in the event that the //
checkbox is toggled.
... role_client xul: <browser> html: <frame> or <iframe> role_menupopup dhtml: role="wairole:menu" fires event_menupopupstart, event_menupopupend role_menuitem xul: menuitem dhtml: role="wairole:menuitem" sets state_checked for radio or
checkbox menuitem types accelerator key comes in accname after a \t (tab) character.
... sets state_haspopup for autocomplete textfields role_pushbutton xul: <button> html: <input type= "button"> or<button> dhtml: role="wairole:button" sets state_haspopup for buttons containing menus role_checkbutton xul: <
checkbox> html: <input type="
checkbox"> dhtml: role="wairole:
checkbox" fires event_state_change when
checkbox is toggled role_radiobutton xul: <radio> html: <input type="radio"> dhtml: role="wairole:radio" fires event_state_change when radiobutton is set role_com...
Localizing with Koala
check the "mercurial"
checkbox.
... note that you don't have to edit the location field, it automatically fills in when you check the "mercurial"
checkbox: "c:\mozilla\l10n\application\firefox\3.6".
...user: type your name and your e-mail address in the form: "firstname lastname <me@example.com>" (be sure to type the wrapping quotes: "") note that you no longer have to edit the location now, it automatically fills in when you check the "mercurial"
checkbox (e.g.
nsIAccessibleProvider
xul controls constants constant value description xulalert 0x00001001 xulbutton 0x00001002 xul
checkbox 0x00001003 xulcolorpicker 0x00001004 xulcolorpickertile 0x00001005 xulcombobox 0x00001006 xuldropmarker 0x00001007 xulgroupbox 0x00001008 xulimage 0x00001009 xullink 0x0000100a xullistbox 0x0000100b xullistcell 0x00001026 xullisthead 0x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e x...
... xformsselectfull 0x00002011 used for xforms full select/select1 elements that may be represented by group of
checkboxes and radiogroup.
... xformsitemcheckgroup 0x00002012 used for xforms item element that is used inside xforms select elements represented by group of
checkboxes.
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
grid options the grid section of the layout view looks like this: you'll see a number of options contained within: overlay grid: contains a
checkbox for each grid present on the page, along with various options.
... overlay grid each grid present on a page has an entry in the "overlay grid" section: each entry consists of (from left to right): a
checkbox allowing you to toggle the grid overlay for that grid on and off.
...when you select the
checkbox for the subgrid, the lines for the parent grid are displayed also displayed; if the
checkbox for the parent grid is unselected, then its lines are translucent.
Event.preventDefault() - Web APIs
syntax event.preventdefault(); examples blocking default click handling toggling a
checkbox is the default action of clicking on a
checkbox.
... this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-
checkbox").addeventlistener("click", function(event) { document.getelementbyid("output-box").innerhtml += "sorry!
... <code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the
checkbox control.</p> <form> <label for="id-
checkbox">
checkbox:</label> <input type="
checkbox" id="id-
checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
Using the MediaStream Recording API - Web APIs
checkbox hack for showing/hiding this is fairly well documented already, but we thought we'd give a mention to the
checkbox hack, which abuses the fact that you can click on the <label> of a
checkbox to toggle it checked/unchecked.
...first of all, we style the <label> how we want it, making sure that it has enough z-index to always sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual
checkbox, because we don't want it cluttering up our ui: input[type=
checkbox] { position: absolute; top: -100px; } next, we style the information screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, transform it to the position we want it to sit in by default, and give it a transition for smooth showing/h...
...iding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; transform: translatex(100%); transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the
checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=
checkbox]:checked ~ aside { transform: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia().
ResizeObserver - Web APIs
we also provide a
checkbox to turn the observer off and on.
... the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const divelem = document.queryselector('body > div'); const slider = document.queryselector('input[type="range"]'); const
checkbox = document.queryselector('input[type="
checkbox"]'); divelem.style.width = '600px'; slider.addeventlistener('input', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize / 600) ...
...+ 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width / 600) + 'rem'; } } }); resizeobserver.observe(divelem);
checkbox.addeventlistener('change', () => { if (
checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment resize observerthe definition of 'resizeobserver' in that specification.
ARIA: switch role - Accessibility
the aria switch role is functionally identical to the
checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off." this example creates a widget and assigns the aria switch role to it.
... <button type="button" role="switch" aria-checked="true" id="speakerpower" class="switch"> <span>off</span> <span>on</span> </button> <label for="speakerpower" class="switch">speaker power</label> description the aria switch role is identical to the
checkbox role, except instead of being "checked" or "unchecked", it is either "on" and "off." like the
checkbox role, the aria-checked attribute is required.
...unlike a <
checkbox> or role="
checkbox", there is no indeterminate or mixed state.
ARIA: listbox role - Accessibility
it is highly recommended to use the html select element, or a group of radio buttons if only one item can be selected, or a group of
checkboxes if multiple items can be selected, because there is a lot of keyboard interactivity to manage focus for all the descendants, and native html elements provide this functionality for you for free.
...if list items are checkable, space can be used to toggle
checkboxes.
...it is recommended that a
checkbox, link or other method be used to select all items, and ctrl+a could be used as a shortcut key for this.
Accessibility documentation index - Accessibility
57 aria:
checkbox role aria, accessibility, needscontent, role(2), rôle the
checkbox role is used for checkable interactive controls.
... elements containing role="
checkbox" must also include the aria-checked attribute to expose the
checkbox's state to assistive technology.
... 72 aria: switch role aria, aria role, accessibility, on/off, reference, switch, a11y, toggle the aria switch role is functionally identical to the
checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off." 73 aria: tab role aria, aria role, aria tab, aria widget, reference the aria tab role indicates an interactive element inside a tablist that, when activated, displays its associated tabpanel.
:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as
checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
... /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="
checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples
checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields.
... html <div> <input type="
checkbox" id="
checkbox"> <label for="
checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
any-pointer - CSS: Cascading Style Sheets
examples this example creates a small
checkbox for users with at least one fine pointer and a large
checkbox for users with at least one coarse pointer.
... the big
checkbox takes precedence because it is declared after the small one.
... html <input id="test" type="
checkbox" /> <label for="test">look at me!</label> css input[type="
checkbox"]:checked { background: gray; } @media (any-pointer: fine) { input[type="
checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @media (any-pointer: coarse) { input[type="
checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 2px solid red; } } result specifications specification status comment media queries level 4the definition of 'any-pointer' in that specification.
transform-style - CSS: Cascading Style Sheets
we also provide a
checkbox allowing you to toggle between this, and transform-style: flat.
... html <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="
checkbox"> <label for="preserve"><code>preserve-3d</code></label> <input type="
checkbox" id="preserve" checked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backfac...
...; transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const
checkbox = document.getelementbyid('preserve');
checkbox.addeventlistener('change', () => { if(
checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status comment css transforms level 2the definition of 'transform-style' in that specification.
HTML attribute: readonly - HTML: Hypertext Markup Language
the attribute is not supported or relevant to <select> or input types that are already not mutable, such as
checkbox and radio or cannot, by definition, start with a value, such as the file input type.
... note: only text controls can be made read-only, since for other controls (such as
checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.
...e</label> </div> <div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </div> <div class="group"> <input type="password" value="some value" readonly="readonly"/> <label>password</label> </div> <div class="group"> <textarea readonly="readonly">some value</textarea> <label>message</label> </div> result examples <fieldset> <legend>
checkboxes buttons</legend> <p><label> <input type="
checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="
checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="
checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input...
<input type="radio"> - HTML: Hypertext Markup Language
note:
checkboxes are similar to radio buttons, but with an important distinction: radio buttons are designed for selecting one value out of a set, whereas
checkboxes let you turn individual values on and off.
... where multiple controls exist, radio buttons allow one to be selected out of them all, whereas
checkboxes allow multiple values to be selected.
...by default, radio buttons (and
checkboxes) are styled with the operating system's native styles for those controls.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
furthermore, by matching the preference element’s id to the preference attribute of a
checkbox or radiogroup, you can specify the interface widget that will be used to set your preferences.
...tekeeper/there.is.only.xul" title="session store preferences"> <prefpane> <preferences> <preference id="extensions.sessionstore.warnonclear" name="extensions.sessionstore.warnonclear" type="bool" /> <preference id="extensions.sessionstore.replacetabs" name="extensions.sessionstore.replacetabs" type="int" /> </preferences> <
checkbox label="confirm before clearing sessions" preference="extensions.sessionstore.warnonclear" /> <groupbox> <caption label="when restoring session:" /> <radiogroup preference="extensions.sessionstore.replacetabs"> <radio value="0" label="keep current tabs" /> <radio value="1" label="replace current tabs"/> <radio value="2" label="ask me every time" /> ...
Drag and Drop Example - Archive of obsolete content
<vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="
checkbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="text box" elem="textbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> </vbox> the nsdraganddrop object will be called to do most of the work.
...style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraganddrop.drop(event, boardobserver)"> </stack> <vbox> <button label="button" elem="button" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="check box" elem="
checkbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> <button label="text box" elem="textbox" ondraggesture="nsdraganddrop.startdrag(event, listobserver)"/> </vbox> </window> var listobserver = { ondragstart: function (event, transferdata, action) { var txt = event.target.getattribute("elem"); transferdata.data = new transferdata(); ...
Repackaging Firefox - Archive of obsolete content
when repacking firefox 2.0.0.3 or lower, be sure to download the latest version of the repackager, which has an additional
checkbox in this section to disable the migration wizard at startup.
...the names of the source installer packages for each platform that are included in your source directory will appear next to each
checkbox.
Using Breakpoints in Venkman - Archive of obsolete content
the pass exceptions to caller
checkbox allows you to pass exceptions thrown by the breakpoint script directly to the caller.
... the log result
checkbox tells venkman you want the result of the script to show up in the interactive session view.
checkState - Archive of obsolete content
this means that the button acts like a
checkbox except that there is a third state which must be set manually by adjusting the check state.
...the type attribute must be set to
checkbox for buttons with a check state.
toolbarbutton.type - Archive of obsolete content
checkbox: use this type to create a toggle button which will switch the checked state each time the button is pressed.
... examples: type value <toolbarbutton > menu menu-button
checkbox radio see also type ...
Building Trees - Archive of obsolete content
the value attribute may also be used for
checkbox columns by setting it to either true or false.
... whether a cell is a normal labeled value, a progress meter or a
checkbox is determined by the type attribute on the column the cell is in.
Adding Event Handlers - Archive of obsolete content
the command event is fired when a user activates an element, for example by pressing a button, changing a
checkbox or selecting an item from a menu.
... example 2 : source view <vbox oncommand="alert(event.target.tagname);"> <button label="ok"/> <
checkbox label="show images"/> </vbox> in this example, the command event will bubble up from the button or
checkbox to the vbox, where it is handled.
Adding HTML Elements - Archive of obsolete content
<html:img src="banner.jpg"/> <html:input type="
checkbox" value="true"/> <html:table> <html:tr> <html:td> a simple table </html:td> </html:tr> </html:table> these examples will create an image from the file banner.jpg, a
checkbox and a single-cell table.
... <html:p> <html:input id="rtd" type="
checkbox"/> <html:label for="rtd">remember this decision</html:label> </html:p> </html:p> in this case, one p tag was used to place the text in and another was used to break apart the text into multiple lines.
Creating a Skin - Archive of obsolete content
#find-button { list-style-image: url("chrome://global/skin/
checkbox/images/cbox-check.jpg"); font-weight: bold; } #cancel-button { list-style-image: url("chrome://global/skin/icons/images/close-button.jpg"); } button:hover { color: #000066; } we add some images to the buttons and make the find button have bold text to indicate that it is the default button.
...we could continue by changing the menus, the grippies on the toolbar and the input and
checkbox elements.
Modifying the Default Skin - Archive of obsolete content
you can assign images to a button,
checkbox and other elements by using the list-style-image property as in the following:
checkbox { list-style-image: url("chrome://findfile/skin/images/check-off.jpg"); }
checkbox[checked="true"] { list-style-image: url("chrome://findfile/skin/images/check-on.jpg"); } this code changes the image associated with a
checkbox.
... the first style sets the image for a normal
checkbox and the second style sets the image for a checked
checkbox.
More Event Handlers - Archive of obsolete content
in the example below, currenttarget is always the vbox, whereas target would be the specific element, either the button or
checkbox, that was activated.
... example 1 : source view <vbox oncommand="alert(event.currenttarget.tagname);"> <button label="ok"/> <
checkbox label="show images"/> </vbox> stop event propagation once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing.
Styling a Tree - Archive of obsolete content
::-moz-tree-
checkbox: the image to use for
checkbox columns.
...the following properties are automatically set as needed: checked this property is set cells whose column is type="
checkbox" focus this property is set if the tree currently has the focus.
Tabboxes - Archive of obsolete content
tabbox example example 1 : source view <tabbox> <tabs> <tab label="mail"/> <tab label="news"/> </tabs> <tabpanels> <tabpanel id="mailtab"> <
checkbox label="automatically check for mail"/> </tabpanel> <tabpanel id="newstab"> <button label="clear news buffer"/> </tabpanel> </tabpanels> </tabbox> here, two tabs have been added, the first labeled 'mail' and the other 'news'.
...enulist> <spacer style="width: 10px;"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer style="height: 10px"/> <textbox id="find-text" flex="1" style="min-width: 15em;"/> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <
checkbox id="casecheck" label="case sensitive search"/> <
checkbox id="wordscheck" label="match entire filename"/> </tabpanel> </tabpanels> </tabbox> the tab elements have been placed around the main content of the window.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button browser
checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script ...
... iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separator spacer button
checkbox colorpicker datepicker menulist progressmeter radio radiogroup scale splitter textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker description label image listbox listitem listcell listcol listcols listhead listheader richlistbox richlistitem tree treecell treechildren treecol treecols treeitem treerow treeseparator box hbox vbox bbo...
caption - Archive of obsolete content
attributes accesskey, crop, image, label, tabindex properties accesskey, crop, image, label, tabindex examples <groupbox> <caption label="my groupbox"/> </groupbox> <groupbox flex="1"> <caption> <
checkbox label="a checked groupbox"/> </caption> </groupbox> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements groupbox,
checkbox ...
listitem - Archive of obsolete content
for buttons, the type attribute must be set to
checkbox or radio for this attribute to have any effect.
... type type: string you can make an item in a listbox a
checkbox by setting this attribute to the value
checkbox.
prefpane - Archive of obsolete content
</preferences> <
checkbox label="number one?" preference="pref_one"/> ...
... (1) an example of a widget that has state changes tracked for it includes the
checkbox element, whose state is tracked automatically when the "command" event fires.
Theme changes in Firefox 2 - Archive of obsolete content
menu.css the following style is no longer used in firefox 2 and has been removed: menulist > menupopup > menuitem[_moz-menuactive="true"] the firefox 2 theme also adds the following new styles: .menu-iconic-icon menubar > menu menubar > menu[_moz-menuactive="true"][open="true"] menuitem[type="
checkbox"] > .menu-iconic-left menuitem[type="radio"] > .menu-iconic-left you may wish to change the definitions of other styles as well.
...o longer used in firefox 2 and should be removed from your theme: #foundlist #statusbar-updates .updatecategorybox .updatecategorycontent .updatecategoryicon .updatecategorylabel[selected="true"] .updateicon .updateicon[severity="0"] .updateicon[severity="1"] .updateicon[severity="2"] .updateindicator > label .updateindicator[updatecount="0"] .updateitemchecked .updateitemchecked .
checkbox-label-box .updateitemfromlabel .updateitemicon .updateitemicon .updateitemname .updateitemnamerow .updateitemurl .warning radio[type="update-type"] radiogroup[type="update-types"] toolbarbutton[type="updates"] toolbarbutton[type="updates"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="0"] > .toolbarbutton-icon toolbarbutton[type="updates"][severity="1"] > .toolbarbutt...
Mozilla XForms User Interface - Archive of obsolete content
checkbox - used for boolean instance data datepicker - default representation for date data types.
...it can have the following representations: listbox - default representation
checkbox group - used when appearance = 'full' select1 combobox control.
WAI-ARIA basics - Learn web development
for example, in our form-validation-
checkbox-disabled.html demo there is a
checkbox that when checked, enables another form input to allow further information be entered.
...when this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this
checkbox is, as well as updating the aria-disabled state, and some visual indicators too: function togglemusician(bool) { let instruitem = formitems[formitems.length-1]; if(bool) { instruitem.input.disabled = false; instruitem.label.style.color = '#000'; instruitem.input.setattribute('aria-disabled', 'false'); hiddenalert.textcontent = 'instruments played field now enabled; use it to tell us what you play.'; } else { instruitem.input.disabled = true; instruitem.label.style.color = '#999';...
Debugging CSS - Learn web development
you can toggle values in the rules view on and off, when that panel is active — if you hold your mouse over it
checkboxes will appear.
... uncheck a rule's
checkbox, for example border-radius, and the css will stop applying.
What are browser developer tools? - Learn web development
if you can't see the develop menu, go to safari ➤ preferences ➤ advanced, and check the show develop menu in menu bar
checkbox.
... click the
checkboxes next to each declaration to see what would happen if you removed the declaration.
Handling common accessibility problems - Learn web development
safari doesn't allow you to tab through links by default; to enable this, you need to open safari's preferences, go to advanced, and check the press tab to highlight each item on a webpage
checkbox.
...in the case of nvda, the modifier can either be insert (the default), or capslock (can be chosen by checking the first
checkbox in the nvda welcome dialog before pressing ok).
Mozilla accessibility architecture
examples of accessible role constants are role_button, role_
checkbox and role_list, although they can have slightly different names and values in each api.
... dommenuitemactive, dommenubaractive mozilla dom event_focus domnodeinserted w3c dom mutation event event_create (atk) event_reorder (msaa) domsubtreemodified w3c dom mutation event event_reorder domnoderemoved w3c dom mutation event event_destroy (atk) event_reorder (msaa)
checkboxstatechange, radiostatechange mozilla dom event_state_change popupshowing mozilla dom event_menustart popuphiding mozilla dom event_menuend nsdocaccessible::scrollpositiondidchange(), then nsdocaccessible::scrolltimercallback() nsiscrollpositonlistener and nsitimer callbacks event_scrollingend (quick ti...
Eclipse CDT Manual Setup
select the "behavior" tab, delete the word "all" from the "build (incremental build)" field, and disable the clean
checkbox.
...if inside, use the "add folder" button; if outside, use the "link folder" button and tick the "link to folder in the file system"
checkbox.
Profiling with the Firefox Profiler
it's only collected if the "stack walk"
checkbox in the gecko profiler add-on's settings is checked.
...this is controlled by the "javascript"
checkbox in the gecko profiler add-on's settings panel.
about:memory
if you do not wish to share this information, you can select the "anonymize"
checkbox before clicking on "measure and save..." or "measure...".
...if you select the "verbose"
checkbox before measuring, all trees will be shown fully expanded and no artificial nodes will be inserted.
Gecko object attributes
common widget attributes checkable true when the widget is known to behave like a
checkbox.
... note some widgets which appear to be
checkboxes might in fact be cyclers (see "cycles" below).
XForms Accessibility
checkbox - see the docs datepicker - see the docs.
...it can have the following representations: listbox
checkboxes group select1 allows the user to choose a single value from a list of pre-defined values (see the spec, the docs).
Using tab-modal prompts
then apply it, like in the example below, here we apply the prompt with a
checkbox: var window = gbrowser.contentwindow; var promptfact = components.classes['@mozilla.org/prompter;1'].getservice(components.interfaces.nsipromptfactory); var prompt = promptfact.getprompt(window, components.interfaces.nsiprompt); var promptbag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); promptbag.setpropertyasbool('allowtabmodal', true); var check = {value: false}; /...
.../initial state of
checkbox, however if no text is supplied the
checkbox is not shown var input = {value: 'pre filled value'}; var ok = prompt.prompt.apply(null, ['title - but not shown in tab modal', 'text goes here', input, 'check text, if no text,
checkbox is not shown', check]); //this here is just an alert, showing the values of the prompt prompt.alert.apply(null, ['title not shown in modal', 'user clicked ok: ' + ok + '\n' + 'checked: ' + check.value + '\ninput value: ' + input.value]); note: because the prompts are shown in a tab, if the tab is closed while the prompt is open it will throw an exception.
Browser Console - Firefox Developer Tools
the messages from scripts in all the opened pages) by setting or clearing the
checkbox labeled show content messages.
... the following image shows the browser console focused on the same page as above after clicking on the show content messages
checkbox.
Network request list - Firefox Developer Tools
other actions you can take with request blocking: to turn all request blocking off or on: toggle the
checkbox next to enable request blocking.
... to turn a specific block off or on: toggle the
checkbox next to that item.
Pixel manipulation with canvas - Web APIs
you can toggle the
checkbox to see the effect of the imagesmoothingenabled property (which needs prefixes for different browsers).
... zoom example <canvas id="canvas" width="300" height="227"></canvas> <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> <input type="
checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> enable image smoothing </label> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothing = function(event) { zoomctx.imagesmoothingenabled = this.checked; zoomctx.mozimagesm...
MouseEvent - Web APIs
example this example demonstrates simulating a click (that is programmatically generating a click event) on a
checkbox using dom methods.
... html <p><label><input type="
checkbox" id="
checkbox"> checked</label> <p><button id="button">click me</button> javascript function simulateclick() { var evt = new mouseevent("click", { bubbles: true, cancelable: true, view: window }); var cb = document.getelementbyid("
checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault alert("canceled"); } else { // none of the handlers called preventdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
NodeList - Web APIs
for...of loops will loop over nodelist objects correctly: const list = document.queryselectorall('input[type=
checkbox]'); for (let
checkbox of list) {
checkbox.checked = true; } recent browsers also support iterator methods (foreach()) as well as entries(), values(), and keys().
... there is also an internet explorer-compatible way to use array.prototype.foreach for iteration: const list = document.queryselectorall('input[type=
checkbox]'); array.prototype.foreach.call(list, function (
checkbox) {
checkbox.checked = true; }); specifications specification status comment domthe definition of 'nodelist' in that specification.
An overview of accessible web applications and widgets - Accessibility
presentational changes dynamic presentational changes include using css to change the appearance of content (such as a red border around invalid data, or changing the background color of a checked
checkbox), as well as showing or hiding content.
...examples include (but are certainly not limited to): aria-checked: indicates the state of a
checkbox or radio button aria-disabled: indicates that an element is visible, but not editable or otherwise operable aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation (for a full list of aria states, consult the aria list of states and properties.) developers should use aria states to indicate the state of ui widget elements and use css attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).
Cognitive accessibility - Accessibility
examples of this are checking a
checkbox, entering data or changing a select option.
...also, be sure to include a confirmation
checkbox in addition to a submit button.
Mobile accessibility checklist - Accessibility
non-standard controls must have an appropriate aria role assigned to them, such as button, link, or
checkbox.
... handling state standard controls such as radio buttons and
checkboxes are handled by the operating system.
:default - CSS: Cascading Style Sheets
what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <input type="
checkbox">, <input type="radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order.
... <input type="
checkbox"> and <input type="radio"> match if they have the checked attribute.
:disabled - CSS: Cascading Style Sheets
html <form action="#"> <fieldset id="shipping"> <legend>shipping address</legend> <input type="text" placeholder="name"> <input type="text" placeholder="address"> <input type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-
checkbox">same as shipping address:</label> <input type="
checkbox" id="billing-
checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for the page to finish loading ...
...document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to
checkbox document.getelementbyid('billing-
checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status comment html living standardthe definition of ':disabled' in that specification.
pointer - CSS: Cascading Style Sheets
examples this example creates a small
checkbox for users with fine primary pointers and a large
checkbox for users with coarse primary pointers.
... html <input id="test" type="
checkbox" /> <label for="test">look at me!</label> css input[type="
checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } input[type="
checkbox"]:checked { background: gray; } @media (pointer: fine) { input[type="
checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @media (pointer: coarse) { input[type="
checkbox"] { width: 30px; height: 30px; border-width: 2px; border-color: red; } } result specifications specification status comment media queries level 4the definition of 'pointer' in that specification.
Mozilla CSS extensions - CSS: Cascading Style Sheets
rsion still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel
checkbox checkbox-container
checkbox-label checkmenuitem dialog groupbox listbox menuarrow menu
checkbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -mo...
...s ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-selectiondeprecated since gecko 62 :-moz-submit-invalid :-moz-suppressed ::-moz-svg-foreign-content t ::-moz-table ::-moz-table-cell ::-moz-table-column ::-moz-table-column-group ::-moz-table-outer ::-moz-table-row ::-moz-table-row-group :-moz-tree-cell :-moz-tree-cell-text :-moz-tree-cell-text(hover) :-moz-tree-
checkbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-separator :-moz-tree-twisty u – x :-moz-ui-invalid :-moz-ui-valid :-moz-user-disabled ::-moz-viewport ::-moz-viewport-scroll :-moz-window-inactive ::-moz-xul-anonymous-block at-rules @-moz-docume...
Event reference
storage events change (see non-standard events) storage update events checking downloading error noupdate obsolete updateready value change events broadcast
checkboxstatechange hashchange input radiostatechange readystatechange valuechange uncategorized events invalid message message open show less common and non-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e.
...
checkboxstatechange xul the state of a
checkbox has been changed either by a user action or by a script (useful for accessibility).
Creating and triggering events - Developer guides
fly // note: optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a click (that is programmatically generating a click event) on a
checkbox using dom methods.
... function simulateclick() { const event = new mouseevent('click', { view: window, bubbles: true, cancelable: true }); const cb = document.getelementbyid('
checkbox'); const cancelled = !cb.dispatchevent(event); if (cancelled) { // a handler called preventdefault.
disabled - HTML: Hypertext Markup Language
here are examples of a disabled
checkbox, radio button, <option> and <optgroup>, as well as some form controls that are disabled via the disabled attribute set on the ancestor <fieldset> element.
... <fieldset> <legend>
checkboxes</legend> <p><label> <input type="
checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="
checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="disabled" disabled> disabled </label></p> </fieldset> <p> <label>select an option: <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgrou...
HTML attribute: required - HTML: Hypertext Markup Language
the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number,
checkbox, radio, file, <input> types along with the <select> and <textarea> form control elements.
... in the case of a same named group of
checkbox input types, only the
checkboxes with the required attribute are required.
<label> - HTML: Hypertext Markup Language
<input type="
checkbox" name="peas"> </label> other usage notes: the form control that the label is labeling is called the labeled control of the label element.
... don't <label for="tac"> <input id="tac" type="
checkbox" name="terms-and-conditions"> i agree to the <a href="terms-and-conditions.html">terms and conditions</a> </label> do <label for="tac"> <input id="tac" type="
checkbox" name="terms-and-conditions"> i agree to the terms and conditions </label> <p> <a href="terms-and-conditions.html">read our terms and conditions</a> </p> headings placing heading elements within a <label> interferes wi...
HTML documentation index - HTML: Hypertext Markup Language
120 <input type="
checkbox"> element, html, html forms, input, input types, reference,
checkbox, form <input> elements of type
checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form.
...a
checkbox allows you to select single values for submission in a form (or not).
MIME types (IANA media types) - HTTP
form-data; name="myfile"; filename="img.jpg" content-type: image/jpeg (data) --aboundarystring content-disposition: form-data; name="myfield" (data) --aboundarystring (more subparts) --aboundarystring-- the following <form>: <form action="http://localhost:8000/" method="post" enctype="multipart/form-data"> <label>name: <input name="mytextfield" value="test"></label> <label><input type="
checkbox" name="my
checkbox"> check</label> <label>upload file: <input type="file" name="myfile" value="test.txt"></label> <button>send the file</button> </form> will send this message: post / http/1.1 host: localhost:8000 user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-languag...
...gzip, deflate connection: keep-alive upgrade-insecure-requests: 1 content-type: multipart/form-data; boundary=---------------------------8721656041911415653955004498 content-length: 465 -----------------------------8721656041911415653955004498 content-disposition: form-data; name="mytextfield" test -----------------------------8721656041911415653955004498 content-disposition: form-data; name="my
checkbox" on -----------------------------8721656041911415653955004498 content-disposition: form-data; name="myfile"; filename="test.txt" content-type: text/plain simple file.
ui - Archive of obsolete content
if it's standalone, it appears in the toolbar at the top right of the browser window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a
checkbox.
Dialogs and Prompts - Archive of obsolete content
eeny width height" windowtype="mydialogwindowtype"> <script type="application/javascript" src="chrome://myext/content/mydialog.js"/> <grid> <columns><column/><column/></columns> <rows> <row align="center"><label value="name:"/><textbox id="name"/></row> <row align="center"><label value="description:"/><textbox id="description"/></row> <row align="center"><spacer/><
checkbox id="enabled" label="check to enable"/></row> </rows> </grid> </dialog> mydialog.js: // called once when the dialog displays function onload() { // use the arguments passed to us by the caller document.getelementbyid("name").value = window.arguments[0].inn.name; document.getelementbyid("description").value = window.arguments[0].inn.description; document.getelementbyid("enabled").c...
Inline options - Archive of obsolete content
setting types there are several types of <setting>s, each with a different type attribute: type attribute displayed as preference stored as bool
checkbox boolean boolint
checkbox integer (use the attributes on and off to specify what values to store) integer textbox integer string textbox string color colorpicker string (in the #123456 format) file browse button and label string directory browse button and label string menulist menulist depe...
Adding sidebars - Archive of obsolete content
<menupopup id="viewsidebarmenu"> <menuitem id="xulschoolhello-sidebar" label="&xulschoolhello.sidebar.title;" accesskey="&xulschoolhello.sidebar.accesskey;" type="
checkbox" autocheck="false" group="sidebar" sidebarurl="chrome://xulschoolhello/content/sidebar.xul" sidebartitle="&xulschoolhello.sidebar.title;" oncommand="togglesidebar('xulschoolhello-sidebar');" /> </menupopup> the example in the mdc page includes a shortcut key combination to toggle the new sidebar.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
['html:input', {type:'text', value:'my field'}], ['html:button', {id:'mybtn'}, 'button text content'] ], ['html:form', {id:'mysecondform'}, ['html:input', {type:'text', value:'my field for second form'}], ['html:div', {}, 'sub div with textcontent and siblings', ['html:br', {}], ['html:input', {type:'
checkbox', id:'mycheck'}], ['html:label', {for:'mycheck'}, 'here is text of label, click this text will check the box' ] ] ] ]; document.body.appendchild(jsontodom(json, document, {})); jquery templating for extensions which already use jquery, it is possible to use its builtin dom building functions for templating, though care must...
Creating a Firefox sidebar extension - Archive of obsolete content
enupopup> <keyset id="mainkeyset"> <key id="key_openemptysidebar" command="viewemptysidebar" key="&openemptysidebar.commandkey;" modifiers="&openemptysidebar.modifierskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <broadcaster id="viewemptysidebar" label="&emptysidebar.title;" autocheck="false" type="
checkbox" group="sidebar" sidebarurl="chrome://emptysidebar/content/emptysidebar.xul" sidebartitle="&emptysidebar.title;" oncommand="togglesidebar('viewemptysidebar');" /> </broadcasterset> </overlay> the overlay file consists of three entries, the menu definition, shortcut keys and the broadcaster.
In-Depth - Archive of obsolete content
button,
checkbox-container,
checkbox, dialog, dualbutton, dualbutton-dropdown, listbox, menu, menulist-textfield, menulist-button, menulist, menulist-text, progressbar, progresschunk, radio-container, radio, resizer, resizerpanel, separator, scrollbar, statusbar, statusbarpanel, toolbarbutton, toolbox, toolbar, treeheadercell, treeheadersortarrow, treeview, treeitem, treetwisty, treetwistyopen, tooltip, textfield...
jspage - Archive of obsolete content
ltview.getcomputedstyle(this,null);return(l)?l.getpropertyvalue([m.hyphenate()]):null;},toquerystring:function(){var l=[]; this.getelements("input, select, textarea",true).each(function(m){if(!m.name||m.disabled||m.type=="submit"||m.type=="reset"||m.type=="file"){return;}var n=(m.tagname.tolowercase()=="select")?element.getselected(m).map(function(o){return o.value; }):((m.type=="radio"||m.type=="
checkbox")&&!m.checked)?null:m.value;$splat(n).each(function(o){if(typeof o!="undefined"){l.push(m.name+"="+encodeuricomponent(o)); }});});return l.join("&");},clone:function(o,l){o=o!==false;var r=this.clonenode(o);var n=function(v,u){if(!l){v.removeattribute("id");}if(browser.engine.trident){v.clearattributes(); v.mergeattributes(u);v.removeattribute("uid");if(v.options){var w=v.options,s=u.options;for(...
Elements - Archive of obsolete content
the following xul display types may be used: browser, button,
checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol.
accesskey - Archive of obsolete content
« xul reference home attribute of: button,
checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox accesskey type: character this should be set to a character that is used as a shortcut key.
label - Archive of obsolete content
o treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <
checkbox label="my
checkbox" id="my
checkbox"/> <button label="another click" oncommand="document.getelementbyid('my
checkbox').setattribute('label','still not checked');"/> <button label="show label of
checkbox" oncommand="alert( document.getelementbyid('my
checkbox').getattribute('label') )"/> ...
src - Archive of obsolete content
examples <iframe id="content-body" src="http://www.mozilla.org/"/> <browser src="http://www.mozilla.org" flex="1"/> <image src='firefoxlogo.png' width='135' height='130'/> see also prefpane.src treecell.src treecol.src script.src stringbundle.src
checkbox.src ...
Menus - Archive of obsolete content
rched context-viewpartialsource-selection views the selection source selection context-viewpartialsource-mathml views the mathml source mathml context-viewsource views the source context-viewinfo views the page info context-metadata views the properties context-spell-check-enabled spell check enabled
checkbox context-inspect inspects the element ...
Introduction to XUL - Archive of obsolete content
<html:script type="application/javascript"> // dialog initialization code function initwindow() { var
checkbox = document.getelementbyid("remember"); if (
checkbox)
checkbox.checked = true; } </html:script> javascript can be referenced as in html documents: as onclick handlers and the like.
MenuButtons - Archive of obsolete content
<toolbarbutton type="menu" image="cookies.png"> <menupopup> <menuitem label="block cookies" type="
checkbox"/> <menuitem label="clear cookies"/> </menupopup> </toolbarbutton> the 'menu-button' button the 'menu-button' type of button is used when you want to attach a menu to a button but want to have a default action carried out when the button is pressed by itself.
accessibleType - Archive of obsolete content
possible values are: constant value xulalert 1001 xulbutton 1002 xul
checkbox 1003 xulcolorpicker 1004 xulcolorpickertile 1005 xulcombobox 1006 xuldropmarker 1007 xulgroupbox 1008 xulimage 1009 xullink 100a xullistbox 100b xullistcell 1026 xull...
Using Multiple Queries to Generate More Results - Archive of obsolete content
<vbox datasources="people.xml" ref="*" querytype="xml"> <template> <queryset> <query expr="group[@name='male']/*"/> <action> <
checkbox uri="?" label="?name"/> </action> </queryset> <queryset> <query expr="group[@name='female']/*"/> <action> <label uri="?" value="?name"/> </action> </queryset> </template> </vbox> « previousnext » ...
Adding Event Handlers to XBL-defined Elements - Archive of obsolete content
for example, a custom
checkbox might have a checked property which needs to be changed when the user clicks the
checkbox: <handlers> <handler event="mouseup" action="this.checked=!this.checked"/> </handlers> when the user clicks and releases the mouse button over the check box, the mouseup event is sent to it, and the handler defined here is called, causing the state of the checked property to be reversed.
Box Model Details - Archive of obsolete content
xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" align="start"> <
checkbox id="c1" label="ignore case"/> <spacer flex="1" style="max-height: 30px;"/> <button label="find"/> </vbox> </window> here, two vertical boxes are created, one for the textbox and the other for the check box and button.
Document Object Model - Archive of obsolete content
for example, we could get the state of a check box by using the code below: var state = document.getelementbyid('casecheck').checked; the value casecheck corresponds to the id of the case sensitive
checkbox.
Focus and Selection - Archive of obsolete content
aster/gatekeeper/there.is.only.xul"> <script> function init(){ addeventlistener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </script> <hbox> <label control="username" value="user name:"/> <textbox id="username"/> </hbox> <button label="hello"/> <
checkbox label="remember this decision"/> <label id="focused" value="-no focus-"/> </window> in this example, a focus event handler is attached the window.
Introduction - Archive of obsolete content
some elements that can be created are: input controls such as textboxes and
checkboxes toolbars with buttons or other content menus on a menu bar or pop up menus tabbed dialogs trees for hierarchical or tabular information keyboard shortcuts the displayed content can be created from the contents of a xul file or with data from a datasource.
Localization - Archive of obsolete content
editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"> <template> <menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <
checkbox id="casecheck" label="&casesensitive;"/> <
checkbox id="wordscheck" label="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="results" style="display: none;" flex="1"> <treecols> <treecol id="name" label="&results.filename;" flex="1"/> <treecol id="location" label="&results.location;" flex="2"/> <treecol id="size" label="&results.size;" flex="1"/> <...
Trees - Archive of obsolete content
(using advanced features, progress meters or
checkboxes also can be added to the tree) a tree consists of two parts, the set of columns, and the tree body.
XBL Example - Archive of obsolete content
<box class="slideshow" previoustext="previous" nexttext="next" flex="1"> <button label="button 1"/> <
checkbox label="
checkbox 2"/> <textbox/> </box> the style sheet used here is: .slideshow { -moz-binding: url("slideshow.xml#slideshow"); } the first button, button 1 has been used as the first page of the deck.
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button browser c
checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner ...
groupbox - Archive of obsolete content
properties accessibletype examples <groupbox> <caption label="settings"/> <radiogroup> <radio label="black and white"/> <radio label="colour"/> </radiogroup> <
checkbox label="enabled"/> </groupbox> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, p...
label - Archive of obsolete content
the caption is in the "value" attribute remember that the label element has a "value" attribute, unlike value in html whereas buttons,
checkboxes use label="foo" as the attribute <label label="a caption"/> <!-- wrong --> <label value="a caption"/> <label value="click the button"/> <button label="a button"/> <
checkbox label="a decision" value="1"/> wrapping by default, label text does not wrap.
prefwindow - Archive of obsolete content
0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <
checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).
radio - Archive of obsolete content
tbefore(), isdefaultnamespace(), isequalnode, issamenode, issupported(), lookupnamespaceuri, lookupprefix, normalize(), queryselector(), queryselectorall(), removeattribute(), removeattributenode(), removeattributens(), removechild(), removeeventlistener(), replacechild(), setattribute(), setattributenode(), setattributenodens(), setattributens(), setuserdata related elements radiogroup,
checkbox interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement, nsidomxullabeledcontrolelement ...
treecell - Archive of obsolete content
attributes editable, label, mode, properties, ref, src, value attributes editable type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="
checkbox">.
-moz-binding - Archive of obsolete content
syntax /* <url> value */ -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#
checkbox); /* global values */ -moz-binding: inherited; -moz-binding: initial; -moz-binding: unset; values <url> the url for the xbl binding (including the fragment identifier).
CSS - Archive of obsolete content
those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <input type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents
checkboxes and radio button groups created by <input type="
checkbox"> and <input type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <input type="text"> text control that clears the current value.
Mozilla XForms Specials - Archive of obsolete content
labelposition for xforms:input elements bound to a boolean node we support an attribute labelposition in the namespace http://www.mozilla.org/projects/xfor...009/extensions, which allows the form author to define on which side of the
checkbox the label will be shown.
Example - Learn web development
ng: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } input, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } input[type=
checkbox], input[type=radio] { width: auto; border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position: relative; } label em { positi...
Your first form - Learn web development
the controls can be single or multi-line text fields, dropdown boxes, buttons,
checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.
React interactivity: Editing, filtering, conditional rendering - Learn web development
ame="visually-hidden">renaming {props.name}</span> </button> <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input id={props.id} type="
checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> ...
Blocked: All third-party storage access requests
the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the cookies
checkbox if the resource that is being blocked doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.
Blocked: Storage access requests from trackers
the permission can be changed or removed by: going to preferences > content blocking and either adding an exception with the manage exceptions… button choosing the custom content blocking and unchecking the tracker
checkbox if the blocked resource doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.
Gecko Profiler FAQ
however, the profiler add-on currently doesn’t have a
checkbox to enable this feature.
Preferences system
ui elements that refer to the preferences above, e.g.: <
checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
Rhino Debugger
break to stop all running scripts and give control to the debugger you may do any of the following: select the debug->break menu item on the menu bar press the break button on the toolbar press the pause/break key on the keyboard break on exceptions to give control to the debugger whenever a javascript is exception is thrown select the debug->break on exceptions
checkbox from the menu bar.
Building the WebLock UI
within a xul application file, elements like <button/>, <menu/>, and <
checkbox/> can be hooked up to an event model, to scripts, and to the xpcom interfaces that carry out a lot of the browser functionality in mozilla.
nsIAccessibilityService
nsiaccessible createhtmlbraccessible(in nsisupports aframe); nsiaccessible createhtmlbuttonaccessible(in nsisupports aframe); nsiaccessible createhtmlaccessiblebymarkup(in nsiframe aframe, in nsiweakreference aweakshell, in nsidomnode adomnode); nsiaccessible createhtmlliaccessible(in nsisupports aframe, in nsisupports abulletframe, in astring abullettext); nsiaccessible createhtml
checkboxaccessible(in nsisupports aframe); nsiaccessible createhtmlcomboboxaccessible(in nsidomnode anode, in nsiweakreference apresshell); nsiaccessible createhtmlgenericaccessible(in nsisupports aframe); nsiaccessible createhtmlgenericaccessible(in nsisupports aframe); nsiaccessible createhtmlhraccessible(in nsisupports aframe); nsiaccessible createhtmlimageaccessible(in nsisupports afram...
nsIAccessibleRole
it is used for xul:
checkbox, html:input@type="
checkbox", role="
checkbox", boolean xforms:input.
XUL Overlays
the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:input type="
checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the global component file platformdialogoverlay.xul.
Preferences System
ui elements that refer to the preferences above, e.g.: <
checkbox id="check1" preference="pref1" label="&check1.label;" accesskey="&check1.accesskey;"/> </prefpane> <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/> </prefwindow> pane content can be specified inline or an external chrome uri supplied for pane content to be loaded in via a dynamic overlay.
Application - Firefox Developer Tools
if you can’t see it there, you can enable it by going to the "three dot" menu and selecting settings (also accessible by pressing f1), then checking the application
checkbox under default developer tools.
Breaking on exceptions - Firefox Developer Tools
to instruct the debugger to pause on an exception, tick these
checkboxes in the breakpoints list: pause on exceptions pause on caught exceptions when an exception occurs, the line where it occurs is highlighted in the source pane, with a squiggly red line under the problematic code.
UI Tour - Firefox Developer Tools
next to each breakpoint is a
checkbox which you can use to enable/disable it: watch expressions you can add watch expressions in the right pane.
Network monitor toolbar - Firefox Developer Tools
a set of tool icons: pause (or resume) recording network log search the log request blocking an array of buttons to filter the network request list by type: by the content type of the response xhr requests websocket upgrades and messages (labeled ws) other requests a
checkbox that allows you to disable caching.
Element: overflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="
checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = do...
Element.scrollHeight - Web APIs
</textarea> </p> <p> <input type="
checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </form> css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a9f00 solid 2px; border-radius: 5px; } ...
Element: underflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><input type="
checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), toggle = do...
Event.eventPhase - Web APIs
example html <h4>event propagation chain</h4> <ul> <li>click 'd1'</li> <li>analyse event propagation chain</li> <li>click next div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <input type="
checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascript let clear ...
FormData() - Web APIs
those with a name, not disabled and checked (radio buttons and
checkboxes) or selected (one or more options within a select).
HTMLElement: change event - Web APIs
bubbles yes cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <input type="radio"> and <input type="
checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <input type="text...
HTMLElement.click() - Web APIs
syntax element.click() example simulate a mouse-click when moving the mouse pointer over a
checkbox: html <form> <input type="
checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").click(); } specification specification status comment html living standard living standard document object model (dom)...
HTMLElement: input event - Web APIs
for <input> elements with type=
checkbox or type=radio, the input event should fire whenever a user toggles the control, per the html5 specification.
HTMLFormElement - Web APIs
e: <input type="text" name="lastname"></label></p> <p><label><input type="password" name="pwd"></label></p> <fieldset> <legend>pet preference</legend> <p><label><input type="radio" name="pet" value="cat"> cat</label></p> <p><label><input type="radio" name="pet" value="dog"> dog</label></p> </fieldset> <fieldset> <legend>owned vehicles</legend> <p><label><input type="
checkbox" name="vehicle" value="bike">i have a bike</label></p> <p><label><input type="
checkbox" name="vehicle" value="car">i have a car</label></p> </fieldset> <p><button>submit</button></p> </form> </body> </html> submitting forms and uploading files using xmlhttprequest if you want to know how to serialize and submit a form using the xmlhttprequest api, please read this paragraph.
HTMLSelectElement.disabled - Web APIs
<input id="allow-drinks" type="
checkbox"/> </label> <label for="drink-select">drink selection:</label> <select id="drink-select" disabled> <option value="1">water</option> <option value="2">beer</option> <option value="3">pepsi</option> <option value="4">whisky</option> </select> javascript var allowdrinks
checkbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinks
checkbox.addeventlistener("change", functio...
ResizeObserver.unobserve() - Web APIs
h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem);
checkbox.addeventlistener('change', () => { if(
checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status comment resize observerthe definition of 'unobserve()' in that specification.
Screen Wake Lock API - Web APIs
there's a
checkbox which when checked, will automatically reacquire the wake lock if the document's visibility state changes and becomes visible again.
ScrollToOptions.left - Web APIs
the positions to scroll to along the x and y axes), and a
checkbox indicating whether they want smooth scrolling enabled or not.
ScrollToOptions.top - Web APIs
the positions to scroll to along the x and y axes), and a
checkbox indicating whether they want smooth scrolling enabled or not.
ScrollToOptions - Web APIs
the positions to scroll to along the x and y axes), and a
checkbox indicating whether they want smooth scrolling enabled or not.
Using the alert role - Accessibility
the pseudo code snippet below illustrates this approach: <p id="forminstruction">you must select at least 3 options</p> // when the user tries to submit the form with less than 3
checkboxes selected: document.getelementbyid("forminstruction").setattribute("role", "alert"); example 4: making an element with an alert role visible if an element already has role="alert" and is initially hidden using css, making it visible will cause the alert to fire as if it was just added to the page.
Using the aria-describedby attribute - Accessibility
<div id="descriptionclose">closing this window will discard any information entered and return you back to the main page</div> working examples:
checkbox example uses aria-describedby tooltip example uses aria-describedby notes the aria-describedby attributed is not designed to reference descriptions on an external resource—since it is an id, it must reference an element in the same dom document.
Using ARIA: Roles, states, and properties - Accessibility
roles widget roles button
checkbox gridcell link menuitem menuitem
checkbox menuitemradio option progressbar radio scrollbar searchbox separator (when focusable) slider spinbutton switch tab tabpanel textbox treeitem composite roles the techniques below describe each composite role as well as their required and optional child roles.
ARIA: grid role - Accessibility
if the grid includes a column with
checkboxes to select rows, this key combination can be used to check that box even if the focus is not on the
checkbox.
ARIA: button role - Accessibility
a third mixed state is available for toggle buttons that control other elements, such as other toggle buttons or
checkboxes, which do not all share the same value.
ARIA: dialog role - Accessibility
ation with third parties.</p> <form> <p> <label for="firstname">first name</label> <input id="firstname" type="text" /> </p> <p> <label for="lastname">last name</label> <input id="lastname" type="text"/> </p> <p> <label for="interests">interests</label> <textarea id="interests"></textarea> </p> <p> <input type="
checkbox" id="autologin"/> <label for="autologin">auto-login?</label> </p> <p> <input type="submit" value="save information"/> </p> </form> </div> working examples: jquery-ui dialog notes note: while it is possible to prevent keyboard users from moving focus to elements outside of the dialog, screen reader users may still be able to navigate to that content using...
Basic form hints - Accessibility
<form> <ul> <li> <input id="wine-1" type="
checkbox" value="riesling"/> <label for="wine-1">berg rottland riesling</label> </li> <li> <input id="wine-2" type="
checkbox" value="pinot-blanc"/> <label for="wine-2">pinot blanc</label> </li> <li> <input id="wine-3" type="
checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input id="wine-4" type="
checkbox" valu...
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
example: shut down computer after minutes <input aria-labelledby="labelshutdown shutdowntime shutdownunit" type="
checkbox" /> <span id="labelshutdown">shut down computer after</span> <input aria-labelledby="labelshutdown shutdowntime shutdownunit" id="shutdowntime" type="text" value="10" /> <span id="shutdownunit"> minutes</span> a note for jaws 8 users jaws 8.0 has its own logic to find labels, causing it to always override the accessiblename the textbox of an html document gets.
overview - Accessibility
general resources dhtml style guide provides keyboard interaction recommendations wai-aria authoring practices guide
checkbox aria toggle button and tri-state
checkbox examples (from "the paciello group blog") aria example
checkbox widgets from the university of illinois menu using wai-aria roles and states with the yui menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria ...
HTML To MSAA - Accessibility
_system_ default if @type attribute has value "submit" n/a "press" n/a input @type=text, textarea role_system_ text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a input type="
checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state is changed input type="radio" role_system_ radiobutton n/a n/a state_sy...
Text labels and names - Accessibility
<input type="
checkbox" id="terms"> </label> <input type="
checkbox" id="emailoptin"> <label for="emailoptin">yes, please send me news about this product.</label> form elements should have a visible text label in addition to having a <label> for every form element, those labels should be visible, not hidden.
grid-auto-flow - CSS: Cascading Style Sheets
formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direction" onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row</option> </select> <input id="dense" type="
checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-colo...
Rich-Text Editing in Mozilla - Developer guides
itha7prkiphvbups+/fvrvv8/f///////////////////////////////////////////////yh5baeaab8alaaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </div> <div id="textbox" contenteditable="true"><p>lorem ipsum</p></div> <p id="editmode"><input type="
checkbox" name="switchmode" id="switchbox" onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><input type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
Making content editable - Developer guides
itha7prkiphvbups+/fvrvv8/f///////////////////////////////////////////////yh5baeaab8alaaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </div> <div id="textbox" contenteditable="true"><p>lorem ipsum</p></div> <p id="editmode"><input type="
checkbox" name="switchmode" id="switchbox" onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><input type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
Constraint validation - Developer guides
, time a valid date and time max range, number a valid number the value must be less than or equal to the value rangeoverflow constraint violation date, month, week a valid date datetime, datetime-local, time a valid date and time required text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number,
checkbox, radio, file; also on the <select> and <textarea> elements none as it is a boolean attribute: its presence means true, its absence means false there must be a value (if set).
<a>: The Anchor element - HTML: Hypertext Markup Language
implicit aria role link when href attribute is present, otherwise no corresponding role permitted aria roles when href attribute is present: button
checkbox menuitem menuitem
checkbox menuitemradio option radio switch tab treeitem when href attribute is not present: any dom interface htmlanchorelement examples linking to an absolute url html <a href="https://www.mozilla.com"> mozilla </a> result linking to relative urls html <a href="//example.com">sche...