Tutorial by Examples: l

A type of textbox intended for specifying search criteria. <div role="search"> <input role="searchbox" type="text"> <button role="button">Search</button> </div>

A divider that separates and distinguishes sections of content or groups of menuitems. <p>Lorem ipsum...</p> <hr role="separator"> <p>Lorem ipsum...</p>

A user input where the user selects a value from within a given range. <div role="slider" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"> <div class="sliderhandle"></div> </div>

A form of range that expects the user to select from among discrete choices. <input role="spinbutton" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" type="number" value="25">

A container whose content is advisory information for the user but is not important enough to justify an alert, often but not necessarily presented as a status bar. <div role="status">Online</div>

A type of checkbox that represents on/off values, as opposed to checked/unchecked values. <select role="switch" aria-checked="false"> <option>On</option> <option selected>Off</option> </select>

A grouping label providing a mechanism for selecting the tab content that is to be rendered to the user. <ul role="tablist"> <li role="tab">Introduction</li> <li role="tab">Chapter 1</li> <li role="tab">Chapter 2&l...

A section containing data arranged in rows and columns. The table role is intended for tabular containers which are not interactive. <table role="table"> <thead> <!-- etc --> </thead> <tbody> <!-- etc --> </tbody> </table...

A list of tab elements, which are references to tabpanel elements. <ul role="tablist"> <li role="tab">Introduction</li> <li role="tab">Chapter 1</li> <li role="tab">Chapter 2</li> </ul>

A container for the resources associated with a tab, where each tab is contained in a tablist. <ul role="tablist"> <li role="tab">Introduction</li> <li role="tab">Chapter 1</li> <li role="tab">Chapter 2</li> ...

Input that allows free-form text as its value. <textarea role="textbox"></textarea>

A type of live region containing a numerical counter which indicates an amount of elapsed time from a start point, or the time remaining until an end point. <p> <span role="timer">60</span> seconds remaining. </p>

A collection of commonly used function buttons represented in compact visual form. <ul role="toolbar"> <li><img alt="New" src="new.png"></li> <li><img alt="Open" src="open.png"></li> <li><i...

A contextual popup that displays a description for an element. <span aria-describedby="slopedesc">Slope</span> <div role="tooltip" id="slopedesc">y=mx+b</div> Typically, the tooltip would be hidden. Using JavaScript, the tooltip would be dis...

A type of list that may contain sub-level nested groups that can be collapsed and expanded. <ul role="tree"> <li role="treeitem"> Part 1 <ul> <li role="treeitem">Chapter 1</li> <li role="treeitem"&gt...

A grid whose rows can be expanded and collapsed in the same manner as for a tree.

An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of treeitems. <ul role="tree"> <li role="treeitem"> Part 1 <ul> <li role="treeitem">Chapter 1</l...

import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOException; import java.nio.charset.StandardCharsets; import java.nio.file.Files; import java.nio.file.Paths; public class ReadingUTF8TextFile { public static void main(String[] args) throws IOException { ...

import java.io.BufferedWriter; import java.io.IOException; import java.nio.charset.StandardCharsets; import java.nio.file.Files; import java.nio.file.Paths; public class WritingUTF8TextFile { public static void main(String[] args) throws IOException { //StandardCharsets is avail...

If you want to see the schema information of your table, you can use one of the following: SHOW CREATE TABLE child; -- Option 1 CREATE TABLE `child` ( `id` int(11) NOT NULL AUTO_INCREMENT, `fullName` varchar(100) NOT NULL, `myParent` int(11) NOT NULL, PRIMARY KEY (`id`), KEY `momm...