---
description: https://api.jquerymobile.com/data-attribute/
---

# Data Attributes full (ok)

Link dung js chuan: [https://themeroller.jquerymobile.com/](https://themeroller.jquerymobile.com/)

### Đọc thêm: [https://jquerymobile.com/resources/](https://jquerymobile.com/resources/)

### Data attribute reference

The jQuery Mobile framework uses HTML5 `data-` attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use `data-` attributes, set a custom namespace by modifying the [`ns` global option](https://api.jquerymobile.com/data-attribute/global-config).

## [Button](https://api.jquerymobile.com/button/)&#x20;

[**`https://demos.jquerymobile.com/1.4.5/button-markup/`**](https://demos.jquerymobile.com/1.4.5/button-markup/)

Links with `data-role="button"`. Input-based buttons, links in toolbars and button elements are auto-enhanced, no `data-role` required.

**V1: data-role="button" data-icon="plus"**

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="choose.html" data-role="button" data-icon="plus">button</a>
    </div><!-- /content -->
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FwUtBCME3z7wUVYIpJAuD%2FScreenshot_2.png?alt=media\&token=6e3e37fe-0fef-4a0b-9993-daf01475fbab)

**V2: data-role="button" data-icon="plus" data-iconpos="right" data-inline="true"**

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="choose.html" data-role="button" data-icon="plus" data-iconpos="right" data-inline="true">button</a>
    </div><!-- /content -->
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FtFjuXS4lvhPVlENTE6KI%2FScreenshot_3.png?alt=media\&token=c5c01b7e-1630-4354-9293-d6df4eb6de2a)

**V3: data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="e"**

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="choose.html" data-role="button" data-icon="plus" data-iconpos="right" data-inline="true" data-theme="e">button</a>
    </div><!-- /content -->
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FphSPYQvpcskkvi4qN164%2FScreenshot_4.png?alt=media\&token=6666637a-9bbe-4c93-bd4b-cc046a3dc87d)

## [Checkbox](https://api.jquerymobile.com/checkboxradio/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/checkboxradio-checkbox/`](https://demos.jquerymobile.com/1.4.5/checkboxradio-checkbox/)

Pairs of labels and inputs with `type="checkbox"` are auto-enhanced, no `data-role` required

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div >
        <label class="btn btn-secondary">
          <input data-mini="true" type="checkbox">Checkbox 1
        </label>
        <label class="btn btn-secondary">
          <input type="checkbox">Checkbox 2
        </label>
        <label class="btn btn-secondary">
          <input type="checkbox">Checkbox 3
        </label>
      </div>
    </div><!-- /content -->
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FbdFfFWxXzqtQLPhv5g7W%2FScreenshot_5.png?alt=media\&token=5c810b3a-9fc1-4649-9155-bf74e1717d66)

## [Collapsible](https://api.jquerymobile.com/collapsible/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/collapsible/`](https://demos.jquerymobile.com/1.4.5/collapsible/)

A heading and content wrapped in a container with the `data-role="collapsible"`

**`V1:` data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"**

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
        <h4>collapsible</h4>
        <p>Lorem ipsum dolor sit, amet.</p>
      </div>
    </div><!-- /content -->
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FQQqDtkXgqFbmb33DEp8g%2FScreenshot_6.png?alt=media\&token=27a36d70-5d08-4906-9010-2eba9c9a9c28)

**V2: data-role="collapsible" data-collapsed="true" data-collapsed-icon="carat-d" data-expanded-icon="carat-u"**

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2Fqopx0LpPjO77NyYARYfv%2FScreenshot_7.png?alt=media\&token=b8619933-a563-420b-a425-ba51129889ac)

## [Collapsible set](https://api.jquerymobile.com/collapsibleset/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/collapsibleset/`](https://demos.jquerymobile.com/1.4.5/collapsibleset/)

A number of collapsibles wrapped in a container with the `data-role="collapsibleset"`

**V1: data-role="collapsibleset" data-theme="a" data-content-theme="b"**

C:\xampp\htdocs\oec\index.html

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2F8g1oFYvPJ4Y5j7qZelsf%2FScreenshot_9.png?alt=media\&token=837dd787-73a5-450c-94e3-4f50c5f56527)

## [Controlgroup](https://api.jquerymobile.com/controlgroup/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/controlgroup/`](https://demos.jquerymobile.com/1.4.5/controlgroup/)

DIV or FIELDSET container with `data-role="controlgroup"`. Visually integrate multiple button-styled elements.

**V1: data-role="controlgroup"**

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="controlgroup">
        <a href="#" class="ui-btn ui-corner-all">No icon</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
      </div>
    </div><!-- /content -->
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FkfHep4XavjaNYszQu25X%2FScreenshot_10.png?alt=media\&token=a78db107-23fa-4cb0-8fbf-9e702c54002f)

**V2: data-role="controlgroup" data-type="horizontal"**

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="controlgroup" data-type="horizontal">
        <a href="#" class="ui-btn ui-corner-all">No icon</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">Left</a>
        <a href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-right">Right</a>
      </div>
    </div><!-- /content -->
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FONvQS4vy3djOn8zVav4m%2FScreenshot_11.png?alt=media\&token=c8e7b8e1-f949-481d-968f-cfcdb2d6d788)

## [Dialog](https://api.jquerymobile.com/dialog/):&#x20;

[`https://demos.jquerymobile.com/1.2.1/docs/pages/dialog/index.html`](https://demos.jquerymobile.com/1.2.1/docs/pages/dialog/index.html)

**V1: data-role="button" data-inline="true" data-rel="dialog" data-transition="pop"**\
C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>

  <body>
    <div role="main">
      <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>
  </body>

</html>
```

C:\xampp\htdocs\oec\dialog.html

```
<!DOCTYPE html> 
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Dialog Example</title> 
	<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head> 
<body> 
<div data-role="dialog">
		<div data-role="header" data-theme="d">
			<h1>Dialog</h1>
		</div>
		<div data-role="content" data-theme="c">
			<h1>Delete page?</h1>
			<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
			<a href="dialog/index.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
			<a href="dialog/index.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
		</div>
	</div>
</body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FAZJTlyb7wp1mupM8xifa%2FScreenshot_12.png?alt=media\&token=d57bda18-f70f-4b8c-ad74-73d09ffe3cd3)

## [Flip toggle switch](https://api.jquerymobile.com/flipswitch/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/slider-flipswitch/`](https://demos.jquerymobile.com/1.4.5/slider-flipswitch/)

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <label for="flip-1">Flip toggle switch:</label>
        <select id="flip-1" name="flip-1" data-role="slider">
          <option value="off">Off</option>
          <option value="on">On</option>
        </select>
      </form>
  </body>
</html>
```

## [Listview](https://api.jquerymobile.com/listview/)&#x20;

[h`ttps://demos.jquerymobile.com/1.4.5/listview/`](https://demos.jquerymobile.com/1.4.5/listview/)

`OL` or `UL` with `data-role="listview"`

C:\xampp\htdocs\oec\index.html

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FVtzeR6zSYSE2Auw34aQs%2FScreenshot_14.png?alt=media\&token=00cd2321-99fe-49ab-b806-23b5ec882af7)

### [Listview item](https://api.jquerymobile.com/listview/)&#x20;

`LI` within a listview

## [Navbar](https://api.jquerymobile.com/navbar/)&#x20;

## [`https://demos.jquerymobile.com/1.4.5/navbar/`](https://demos.jquerymobile.com/1.4.5/navbar/)

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="navbar">
        <ul>
          <li><a href="#" class="ui-btn-active">One</a></li>
          <li><a href="#">Two</a></li>
        </ul>
      </div><!-- /navbar -->
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FdRMAybwElCy3O4BiA0h9%2FScreenshot_15.png?alt=media\&token=50a5418e-6c48-4bab-abca-50612b64e48e)

## [Page](https://api.jquerymobile.com/page/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/pages/`](https://demos.jquerymobile.com/1.4.5/pages/)

Container with `data-role="page"`

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <!-- Start of first page -->
      <div data-role="page" id="foo">
        <div data-role="header">
          <h1>Foo</h1>
        </div><!-- /header -->
        <div role="main" class="ui-content">
          <p>I'm first in the source order so I'm shown as the page.</p>
          <p>View internal page called <a href="#bar">bar</a></p>
        </div><!-- /content -->
        <div data-role="footer">
          <h4>Page Footer</h4>
        </div><!-- /footer -->
      </div><!-- /page -->
      <!-- Start of second page -->
      <div data-role="page" id="bar">
        <div data-role="header">
          <h1>Bar</h1>
        </div><!-- /header -->
        <div role="main" class="ui-content">
          <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
          <p><a href="#foo">Back to foo</a></p>
        </div><!-- /content -->
        <div data-role="footer">
          <h4>Page Footer</h4>
        </div><!-- /footer -->
      </div><!-- /page -->
  </body>
</html>
```

## [Popup](https://api.jquerymobile.com/popup/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/popup`](https://demos.jquerymobile.com/1.4.5/popup)

**V1: data-rel="popup" > data-role="popup"**

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Basic Popup</a>
      <div data-role="popup" id="popupBasic">
        <p>This is a completely basic popup, no options set.</p>
      </div>
     </div>
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FdmQjFGlgnw7nTha9Nc4N%2FScreenshot_16.png?alt=media\&token=c6ce17fe-231c-4ba9-87a7-186eed2d79e5)

**V2:  data-rel="popup" >  data-rel="back"**

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <a href="#popupParis" data-rel="popup" data-position-to="window" data-transition="fade">
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/paris.jpg" alt="Paris, France" style="width:30%"></a>
      <a href="#popupSydney" data-rel="popup" data-position-to="window" data-transition="fade">
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/sydney.jpg" alt="Sydney, Australia" style="width:30%"></a>
      <a href="#popupNYC" data-rel="popup" data-position-to="window" data-transition="fade">
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/newyork.jpg" alt="New York, USA" style="width:30%"></a>
      <div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/paris.jpg" style="max-height:512px;" alt="Paris, France">
      </div>
      <div data-role="popup" id="popupSydney" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/sydney.jpg" style="max-height:512px;" alt="Sydney, Australia">
      </div>
      <div data-role="popup" id="popupNYC" data-overlay-theme="b" data-theme="b" data-corners="false">
        <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
        <img class="popphoto" src="https://demos.jquerymobile.com/1.4.5/_assets/img/newyork.jpg" style="max-height:512px;" alt="New York, USA">
      </div>
    </div>
  </body>
</html>
```

## [Radio button](https://api.jquerymobile.com/checkboxradio/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/checkboxradio-radio`](https://demos.jquerymobile.com/1.4.5/checkboxradio-radio)

Pairs of labels and inputs with `type="radio"` are auto-enhanced, no `data-role` required

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <label>
          <input type="radio" name="radio-choice-0" id="radio-choice-0a">One </label>
        <label for="radio-choice-0b">Two</label>
        <input type="radio" name="radio-choice-0" id="radio-choice-0b" class="custom">
      </form>
    </div>
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2F2a5XxnG1fmL8Fizpiqik%2FScreenshot_18.png?alt=media\&token=9dd98c65-e32a-4835-b7a5-82dba2a78916)

## [Selectmenu](https://api.jquerymobile.com/selectmenu/)

&#x20;[`https://demos.jquerymobile.com/1.4.5/selectmenu`](https://demos.jquerymobile.com/1.4.5/selectmenu)

All `select` form elements are auto-enhanced, no `data-role` required

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <div class="ui-field-contain">
          <label for="select-native-1">Basic:</label>
          <select name="select-native-1" id="select-native-1">
            <option value="1">The 1st Option</option>
            <option value="2">The 2nd Option</option>
            <option value="3">The 3rd Option</option>
            <option value="4">The 4th Option</option>
          </select>
        </div>
      </form>
    </div>
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FdXPP5mnaAa28Cp4bTQFS%2FScreenshot_19.png?alt=media\&token=15202d43-b2d5-4bbb-889b-db0c16ddfa99)

### [Slider](https://api.jquerymobile.com/slider/)&#x20;

Inputs with `type="range"` are auto-enhanced, no `data-role` required

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <label for="slider-1">Slider:</label>
        <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50">
      </form>
    </div>
  </body>
</html>
```

## [Textinput](https://api.jquerymobile.com/textinput/) &#x20;

[`https://demos.jquerymobile.com/1.4.5/textinput/`](https://demos.jquerymobile.com/1.4.5/textinput/)

Input `type="text|number|search|etc."` or `textarea` elements are auto-enhanced, no `data-role` required

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <form>
        <label for="text-1">Text input:</label>
        <input type="text" name="text-1" id="text-1" value="">
        <label for="text-3">Text input: data-clear-btn="true"</label>
        <input type="text" data-clear-btn="true" name="text-3" id="text-3" value="">
      </form>
    </div>
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2Fa5Mr67AlAMsLaG3uwa1R%2FScreenshot_20.png?alt=media\&token=c6455d8f-c467-4dcc-9b14-940662b99920)

### [Toolbar](https://api.jquerymobile.com/toolbar/)

&#x20;[`https://demos.jquerymobile.com/1.4.5/toolbar/`](https://demos.jquerymobile.com/1.4.5/toolbar/)

The toolbar widget is used to enhance headers and footers.

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="header" data-theme="b">
        <h1>Page Title</h1>
      </div>
      <div data-role="footer">
        <h4>Powered by jQuery Mobile</h4>
      </div>
    </div>
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FdyAWO9RPbiXm2mfLE7QZ%2FScreenshot_21.png?alt=media\&token=f95f1564-5181-4377-93ad-6a31520c6e83)

### [Fixed toolbar](https://api.jquerymobile.com/toolbar/)&#x20;

[`https://demos.jquerymobile.com/1.4.5/toolbar-fixed/`](https://demos.jquerymobile.com/1.4.5/toolbar-fixed/)

Container with `data-role="header"` or `data-role="footer"` plus the attribute `data-position="fixed"`

C:\xampp\htdocs\oec\index.html

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div role="main">
      <div data-role="header" data-theme="b">
        <h1>Page Title</h1>
      </div>
      <div data-role="footer" data-position="fixed">
        <h4>Powered by jQuery Mobile</h4>
      </div>
    </div>
  </body>
</html>
```

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2F6f8N9mFn1IFLSHwDS2GL%2FScreenshot_22.png?alt=media\&token=8acbaa90-60b9-4e43-8c80-e8b3c0b74b7a)
