2011-01-28 06:50:40 +00:00
<!DOCTYPE html>
< html >
2010-11-02 01:46:29 +00:00
< head >
2011-02-18 20:00:18 +00:00
< meta charset = "utf-8" >
2011-05-17 21:28:19 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2011-03-31 13:11:26 +00:00
< title > jQuery Mobile Docs - Gallery of Form Controls< / title >
2011-01-28 06:50:40 +00:00
< link rel = "stylesheet" href = "../../themes/default/" / >
2010-11-11 19:15:42 +00:00
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2011-04-14 20:04:47 +00:00
< script src = "../../js/jquery.js" > < / script >
2011-06-20 19:41:40 +00:00
< script src = "../../experiments/themeswitcher/jquery.mobile.themeswitcher.js" > < / script >
< script src = "../_assets/js/jqm-docs.js" > < / script >
2011-04-14 20:04:47 +00:00
< script src = "../../js/" > < / script >
2011-01-28 06:50:40 +00:00
< / head >
< body >
2010-10-12 22:15:52 +00:00
2011-06-20 19:57:04 +00:00
< div data-role = "page" class = "type-interior" >
2010-10-12 22:15:52 +00:00
2011-06-20 19:57:04 +00:00
< div data-role = "header" data-theme = "f" >
2010-10-12 22:15:52 +00:00
< h1 > Forms< / h1 >
2011-02-03 23:34:35 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-10-12 22:15:52 +00:00
< / div > <!-- /header -->
2011-01-22 22:48:36 +00:00
< div data-role = "content" >
2011-06-20 20:35:27 +00:00
< div class = "content-primary" >
2011-01-28 06:50:40 +00:00
2010-10-12 22:15:52 +00:00
< form action = "#" method = "get" >
2011-01-28 06:50:40 +00:00
2010-10-15 00:28:22 +00:00
< h2 > Form elements< / h2 >
2010-10-12 22:15:52 +00:00
2010-10-16 01:13:51 +00:00
< p > This page contains various progressive-enhancement driven form controls. Native elements are sometimes hidden from view, but their values are maintained so the form can be submitted normally. < / p >
2011-01-28 06:50:40 +00:00
2010-10-16 01:13:51 +00:00
< p > Browsers that don't support the custom controls will still deliver a usable experience, because all are based on native form elements.< / p >
2010-10-12 22:15:52 +00:00
2010-10-15 00:28:22 +00:00
< div data-role = "fieldcontain" >
2010-10-12 22:15:52 +00:00
< label for = "name" > Text Input:< / label >
< input type = "text" name = "name" id = "name" value = "" / >
< / div >
2011-01-28 06:50:40 +00:00
2010-10-12 22:15:52 +00:00
< div data-role = "fieldcontain" >
< label for = "textarea" > Textarea:< / label >
< textarea cols = "40" rows = "8" name = "textarea" id = "textarea" > < / textarea >
< / div >
2011-01-28 06:50:40 +00:00
2010-10-12 22:15:52 +00:00
< div data-role = "fieldcontain" >
2010-10-15 00:28:22 +00:00
< label for = "search" > Search Input:< / label >
< input type = "search" name = "password" id = "search" value = "" / >
2010-10-12 22:15:52 +00:00
< / div >
2011-01-28 06:50:40 +00:00
2010-10-12 22:15:52 +00:00
< div data-role = "fieldcontain" >
2010-10-15 00:28:22 +00:00
< label for = "slider2" > Flip switch:< / label >
2010-10-12 22:15:52 +00:00
< select name = "slider2" id = "slider2" data-role = "slider" >
< option value = "off" > Off< / option >
< option value = "on" > On< / option >
2011-01-28 06:50:40 +00:00
< / select >
2010-10-12 22:15:52 +00:00
< / div >
2011-01-28 06:50:40 +00:00
2010-10-15 00:28:22 +00:00
< div data-role = "fieldcontain" >
< label for = "slider" > Slider:< / label >
< input type = "range" name = "slider" id = "slider" value = "0" min = "0" max = "100" / >
< / div >
2011-01-28 06:50:40 +00:00
2010-10-15 00:28:22 +00:00
< div data-role = "fieldcontain" >
< fieldset data-role = "controlgroup" >
< legend > Choose as many snacks as you'd like:< / legend >
< input type = "checkbox" name = "checkbox-1a" id = "checkbox-1a" class = "custom" / >
< label for = "checkbox-1a" > Cheetos< / label >
< input type = "checkbox" name = "checkbox-2a" id = "checkbox-2a" class = "custom" / >
< label for = "checkbox-2a" > Doritos< / label >
2011-01-28 06:50:40 +00:00
2010-10-15 00:28:22 +00:00
< input type = "checkbox" name = "checkbox-3a" id = "checkbox-3a" class = "custom" / >
< label for = "checkbox-3a" > Fritos< / label >
< input type = "checkbox" name = "checkbox-4a" id = "checkbox-4a" class = "custom" / >
< label for = "checkbox-4a" > Sun Chips< / label >
2010-10-12 22:15:52 +00:00
< / fieldset >
2010-10-15 00:28:22 +00:00
< / div >
2011-01-28 06:50:40 +00:00
2010-10-15 00:28:22 +00:00
< div data-role = "fieldcontain" >
< fieldset data-role = "controlgroup" data-type = "horizontal" >
2010-10-12 22:15:52 +00:00
< legend > Font styling:< / legend >
< input type = "checkbox" name = "checkbox-6" id = "checkbox-6" class = "custom" / >
< label for = "checkbox-6" > b< / label >
< input type = "checkbox" name = "checkbox-7" id = "checkbox-7" class = "custom" / >
< label for = "checkbox-7" > < em > i< / em > < / label >
< input type = "checkbox" name = "checkbox-8" id = "checkbox-8" class = "custom" / >
2011-01-28 06:50:40 +00:00
< label for = "checkbox-8" > u< / label >
2010-10-12 22:15:52 +00:00
< / fieldset >
2010-10-15 00:28:22 +00:00
< / div >
2011-01-28 06:50:40 +00:00
2010-10-15 00:28:22 +00:00
< div data-role = "fieldcontain" >
< fieldset data-role = "controlgroup" >
< legend > Choose a pet:< / legend >
< input type = "radio" name = "radio-choice-1" id = "radio-choice-1" value = "choice-1" checked = "checked" / >
< label for = "radio-choice-1" > Cat< / label >
2010-10-12 22:15:52 +00:00
2010-10-15 00:28:22 +00:00
< input type = "radio" name = "radio-choice-1" id = "radio-choice-2" value = "choice-2" / >
< label for = "radio-choice-2" > Dog< / label >
2010-10-12 22:15:52 +00:00
2010-10-15 00:28:22 +00:00
< input type = "radio" name = "radio-choice-1" id = "radio-choice-3" value = "choice-3" / >
2011-02-15 21:08:20 +00:00
< label for = "radio-choice-3" > Hamster< / label >
2010-10-12 22:15:52 +00:00
2010-10-15 00:28:22 +00:00
< input type = "radio" name = "radio-choice-1" id = "radio-choice-4" value = "choice-4" / >
< label for = "radio-choice-4" > Lizard< / label >
< / fieldset >
< / div >
2011-01-28 06:50:40 +00:00
2010-10-15 00:28:22 +00:00
< div data-role = "fieldcontain" >
< fieldset data-role = "controlgroup" data-type = "horizontal" >
< legend > Layout view:< / legend >
< input type = "radio" name = "radio-choice-b" id = "radio-choice-c" value = "on" checked = "checked" / >
< label for = "radio-choice-c" > List< / label >
< input type = "radio" name = "radio-choice-b" id = "radio-choice-d" value = "off" / >
< label for = "radio-choice-d" > Grid< / label >
< input type = "radio" name = "radio-choice-b" id = "radio-choice-e" value = "other" / >
< label for = "radio-choice-e" > Gallery< / label >
< / fieldset >
< / div >
2011-01-28 06:50:40 +00:00
2010-10-12 22:15:52 +00:00
< div data-role = "fieldcontain" >
2010-10-15 00:28:22 +00:00
< label for = "select-choice-1" class = "select" > Choose shipping method:< / label >
2010-10-12 22:15:52 +00:00
< select name = "select-choice-1" id = "select-choice-1" >
2010-10-15 00:28:22 +00:00
< option value = "standard" > Standard: 7 day< / option >
< option value = "rush" > Rush: 3 days< / option >
< option value = "express" > Express: next day< / option >
< option value = "overnight" > Overnight< / option >
2010-10-12 22:15:52 +00:00
< / select >
< / div >
2011-01-28 06:50:40 +00:00
2010-10-12 22:15:52 +00:00
< div data-role = "fieldcontain" >
2010-10-15 00:28:22 +00:00
< label for = "select-choice-3" class = "select" > Your state:< / label >
2010-10-13 17:44:56 +00:00
< select name = "select-choice-3" id = "select-choice-3" >
2010-10-15 00:28:22 +00:00
< option value = "AL" > Alabama< / option >
< option value = "AK" > Alaska< / option >
< option value = "AZ" > Arizona< / option >
< option value = "AR" > Arkansas< / option >
< option value = "CA" > California< / option >
< option value = "CO" > Colorado< / option >
< option value = "CT" > Connecticut< / option >
< option value = "DE" > Delaware< / option >
< option value = "FL" > Florida< / option >
< option value = "GA" > Georgia< / option >
< option value = "HI" > Hawaii< / option >
< option value = "ID" > Idaho< / option >
< option value = "IL" > Illinois< / option >
< option value = "IN" > Indiana< / option >
< option value = "IA" > Iowa< / option >
< option value = "KS" > Kansas< / option >
< option value = "KY" > Kentucky< / option >
< option value = "LA" > Louisiana< / option >
< option value = "ME" > Maine< / option >
< option value = "MD" > Maryland< / option >
< option value = "MA" > Massachusetts< / option >
< option value = "MI" > Michigan< / option >
< option value = "MN" > Minnesota< / option >
< option value = "MS" > Mississippi< / option >
< option value = "MO" > Missouri< / option >
< option value = "MT" > Montana< / option >
< option value = "NE" > Nebraska< / option >
< option value = "NV" > Nevada< / option >
< option value = "NH" > New Hampshire< / option >
< option value = "NJ" > New Jersey< / option >
< option value = "NM" > New Mexico< / option >
< option value = "NY" > New York< / option >
< option value = "NC" > North Carolina< / option >
< option value = "ND" > North Dakota< / option >
< option value = "OH" > Ohio< / option >
< option value = "OK" > Oklahoma< / option >
< option value = "OR" > Oregon< / option >
< option value = "PA" > Pennsylvania< / option >
< option value = "RI" > Rhode Island< / option >
< option value = "SC" > South Carolina< / option >
< option value = "SD" > South Dakota< / option >
< option value = "TN" > Tennessee< / option >
< option value = "TX" > Texas< / option >
< option value = "UT" > Utah< / option >
< option value = "VT" > Vermont< / option >
< option value = "VA" > Virginia< / option >
< option value = "WA" > Washington< / option >
< option value = "WV" > West Virginia< / option >
< option value = "WI" > Wisconsin< / option >
< option value = "WY" > Wyoming< / option >
2010-10-12 22:15:52 +00:00
< / select >
< / div >
2011-01-28 06:50:40 +00:00
2011-03-25 16:44:46 +00:00
< div data-role = "fieldcontain" >
< label for = "select-choice-a" class = "select" > Choose shipping method:< / label >
< select name = "select-choice-a" id = "select-choice-a" data-native-menu = "false" >
< option > Custom menu example< / option >
< option value = "standard" > Standard: 7 day< / option >
< option value = "rush" > Rush: 3 days< / option >
< option value = "express" > Express: next day< / option >
< option value = "overnight" > Overnight< / option >
< / select >
< / div >
2010-10-12 22:15:52 +00:00
2010-10-15 00:28:22 +00:00
< div class = "ui-body ui-body-b" >
2010-10-12 22:15:52 +00:00
< fieldset class = "ui-grid-a" >
2010-10-15 00:28:22 +00:00
< div class = "ui-block-a" > < button type = "submit" data-theme = "d" > Cancel< / button > < / div >
2011-01-28 06:50:40 +00:00
< div class = "ui-block-b" > < button type = "submit" data-theme = "a" > Submit< / button > < / div >
2010-10-12 22:15:52 +00:00
< / fieldset >
2010-10-15 00:28:22 +00:00
< / div >
2010-10-12 22:15:52 +00:00
< / form >
2011-06-20 20:35:27 +00:00
< / div > <!-- /content - primary -->
< div class = "content-secondary" >
< div data-role = "collapsible" data-collapsed = "true" data-theme = "b" >
2011-06-20 22:23:09 +00:00
< h3 > More in this section< / h3 >
2011-06-20 20:35:27 +00:00
< ul data-role = "listview" data-theme = "c" data-dividertheme = "d" >
2011-06-20 21:17:04 +00:00
< li data-role = "list-divider" > Form elements< / li >
< li > < a href = "docs-forms.html" > Form basics< / a > < / li >
< li data-theme = "a" > < a href = "forms-all.html" > Form element gallery< / a > < / li >
< li > < a href = "forms-text.html" > Text inputs< / a > < / li >
< li > < a href = "forms-search.html" > Search inputs< / a > < / li >
< li > < a href = "forms-slider.html" > Slider< / a > < / li >
< li > < a href = "forms-switch.html" > Flip toggle switch< / a > < / li >
< li > < a href = "forms-radiobuttons.html" > Radio buttons< / a > < / li >
< li > < a href = "forms-checkboxes.html" > Checkboxes< / a > < / li >
< li > < a href = "forms-selects.html" > Select menus< / a > < / li >
< li > < a href = "forms-themes.html" > Theming forms< / a > < / li >
< li > < a href = "forms-all-native.html" > Native form elements< / a > < / li >
< li > < a href = "forms-sample.html" > Submitting forms< / a > < / li >
< li > < a href = "plugin-eventsmethods.html" > Plugin methods< / a > < / li >
2011-06-20 20:35:27 +00:00
< / ul >
< / div >
< / div >
< / div > <!-- /content -->
2011-01-28 06:50:40 +00:00
2011-06-20 20:35:27 +00:00
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
< p > © 2011 The jQuery Project< / p >
< / div >
2010-10-12 22:15:52 +00:00
< / div > <!-- /page -->
< / body >
2011-01-28 06:50:40 +00:00
< / html >
