HTML5 Switch Control

Switch control is a basic two-position control as On/Off , 0/1 and odd/even.

Creation

<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>

We recommend encapsulating the code with

<div data-role="fieldcontain">
...
<div>

This allows you to group many related UI components like the html5 fieldset tag.

Full code

<body>
<div data-role="page" data-theme="b">
<div data-role="header" class="ui-bar-a ui-header" role="banner">
<a id="backButton" href="/index.html" data-icon="arrow-l" data-theme="a">Back</a>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Form Elements</h1>
</div>
<div data-role="content">
<h2>Switch Control</h2>
<!-- The options inside the switch control are the labels for the UI element -->
<div data-role="fieldcontain">
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
</div>
</div>
</body>

Technical Library

HTML5 Switch Control

Creation

Full code