<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width,initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
"themes/Bootstrap.css"
>
<
link
rel
=
"stylesheet"
<
link
rel
=
"stylesheet"
href
=
"themes/jquery.mobile.icons.min.css"
/>
<
script
</
script
>
<
script
</
script
>
</
head
>
<
body
>
<
div
data-role
=
"page"
data-theme
=
"a"
>
<
div
data-role
=
"header"
data-position
=
"inline"
>
<
h1
>
jQuery Mobile Bootstrap Theme - user form controls
</
h1
>
</
div
>
<
div
data-role
=
"content"
data-theme
=
"a"
>
<
form
action
=
"#"
method
=
"get"
>
<
div
data-role
=
"fieldcontain"
>
<
label
for
=
"name"
>Text Input:</
label
>
<
input
type
=
"text"
name
=
"name"
id
=
"name"
value
=
""
/>
</
div
>
<
div
data-role
=
"fieldcontain"
>
<
label
for
=
"textarea"
>Textarea:</
label
>
<
textarea
cols
=
"40"
rows
=
"8"
name
=
"textarea"
id
=
"textarea"
>
</
textarea
>
</
div
>
<
div
data-role
=
"fieldcontain"
>
<
label
for
=
"search"
>Search Input:</
label
>
<
input
type
=
"search"
name
=
"password"
id
=
"search"
value
=
""
/>
</
div
>
<
div
data-role
=
"fieldcontain"
>
<
label
for
=
"slider2"
>Toggle switch:</
label
>
<
select
name
=
"slider2"
id
=
"slider2"
data-role
=
"slider"
>
<
option
value
=
"off"
>Off</
option
>
<
option
value
=
"on"
>On</
option
>
</
select
>
</
div
>
<
div
data-role
=
"fieldcontain"
>
<
label
for
=
"slider"
>Slider:</
label
>
<
input
type
=
"range"
name
=
"slider"
id
=
"slider"
value
=
"50"
min
=
"0"
max
=
"100"
data-highlight
=
"true"
/>
</
div
>
<
div
data-role
=
"fieldcontain"
>
<
fieldset
data-role
=
"controlgroup"
>
<
legend
>Choose food of your choice:</
legend
>
<
input
type
=
"checkbox"
name
=
"checkbox-1a"
id
=
"checkbox-1a"
class
=
"custom"
/>
<
label
for
=
"checkbox-1a"
>Pastas</
label
>
<
input
type
=
"checkbox"
name
=
"checkbox-2a"
id
=
"checkbox-2a"
class
=
"custom"
/>
<
label
for
=
"checkbox-2a"
>Pizzas</
label
>
<
input
type
=
"checkbox"
name
=
"checkbox-3a"
id
=
"checkbox-3a"
class
=
"custom"
/>
<
label
for
=
"checkbox-3a"
>Mexican Enchilada</
label
>
<
input
type
=
"checkbox"
name
=
"checkbox-4a"
id
=
"checkbox-4a"
class
=
"custom"
/>
<
label
for
=
"checkbox-4a"
>Indian Biryani</
label
>
</
fieldset
>
</
div
>
<
div
class
=
"ui-body ui-body-b"
>
<
fieldset
class
=
"ui-grid-a"
>
<
div
class
=
"ui-block-a"
>
<
button
type
=
"submit"
data-theme
=
"d"
>
Cancel
</
button
>
</
div
>
<
div
class
=
"ui-block-b"
>
<
button
type
=
"submit"
data-theme
=
"a"
>
Submit
</
button
>
</
div
>
</
fieldset
>
</
div
>
</
form
>
</
div
>
</
div
>
</
body
>
</
html
>