2010-10-14 21:41:38 +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 - Text inputs< / title >
2011-01-06 00:19:24 +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 >
2010-10-14 21:41:38 +00:00
< / head >
< body >
2011-06-20 19:57:04 +00:00
< div data-role = "page" class = "type-interior" >
2010-10-14 21:41:38 +00:00
2011-06-20 19:57:04 +00:00
< div data-role = "header" data-theme = "f" >
2010-10-14 21:41:38 +00:00
< h1 > Text inputs< / h1 >
2011-03-10 03:36:14 +00:00
< a href = "../../" data-icon = "home" data-iconpos = "notext" data-direction = "reverse" class = "ui-btn-right jqm-home" > Home< / a >
2010-10-14 21:41:38 +00:00
< / div > <!-- /header -->
2011-03-10 03:36:14 +00:00
< div data-role = "content" >
2011-06-20 20:35:27 +00:00
< div class = "content-primary" >
2010-10-14 21:41:38 +00:00
< form action = "#" method = "get" >
< p > Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile.< / p >
2010-10-15 00:28:22 +00:00
< h2 > Text inputs< / h2 >
2011-03-10 03:36:14 +00:00
< p > To collect standard alphanmeric text, use an < code > input< / code > with a < code > type="text"< / code > attribute. It's important to set the < code > for< / code > attribute of the < code > label< / code > to match the ID of the < code > input< / code > so they are semantically associated and wrap them in a < code > div< / code > with the < code > data-role="fieldcontain"< / code > attribute to group them.< / p >
2010-10-14 21:41:38 +00:00
< pre > < code >
2011-03-10 03:36:14 +00:00
< div data-role=" fieldcontain" >
2010-10-14 21:41:38 +00:00
< label for=" name" > Text Input:< /label>
< input type=" text" name=" name" id=" name" value=" " />
< /div>
< / code > < / pre >
< p > The text input is displayed like this:< / p >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-10-14 21:41:38 +00:00
< label for = "name" > Text Input:< / label >
< input type = "text" name = "name" id = "name" value = "" / >
< / div >
< h2 > Password inputs< / h2 >
2011-03-10 03:36:14 +00:00
< p > For password fields, use an < code > input< / code > with a < code > type="password"< / code > attribute. Set the < code > for< / code > attribute of the < code > label< / code > to match the ID of the < code > input< / code > so they are semantically associated and wrap them in a < code > div< / code > with the < code > data-role="fieldcontain"< / code > attribute to group them.< / p >
2010-10-14 21:41:38 +00:00
< pre > < code >
2011-03-10 03:36:14 +00:00
< div data-role=" fieldcontain" >
2010-10-14 21:41:38 +00:00
< label for=" password" > Password Input:< /label>
< input type=" password" name=" password" id=" password" value=" " />
< /div>
< / code > < / pre >
< p > The password input is displayed like this:< / p >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-10-14 21:41:38 +00:00
< label for = "password" > Password Input:< / label >
< input type = "password" name = "password" id = "password" value = "" / >
< / div >
2010-11-10 16:22:56 +00:00
< h2 > More standard HTML5 input types< / h2 >
< p > In jQuery Mobile, you can use new HTML5 input types such as < code > email< / code > , < code > tel< / code > , < code > number< / code > , and more. We actively degrade certain types to < code > type=text< / code > (currently, < code > range< / code > and < code > search< / code > ) in certain cases when we provide a replacement for that type's native control. You can configure which types are degraded to text through the < code > page< / code > plugin's options.< / p >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-11-10 16:22:56 +00:00
< label for = "number" > Number:< / label >
< input type = "number" name = "number" id = "number" value = "" / >
< / div >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-11-10 16:22:56 +00:00
< label for = "email" > Email:< / label >
< input type = "email" name = "email" id = "email" value = "" / >
< / div >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-11-10 16:22:56 +00:00
< label for = "url" > Url:< / label >
< input type = "url" name = "url" id = "url" value = "" / >
< / div >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-11-10 16:22:56 +00:00
< label for = "tel" > Tel:< / label >
< input type = "tel" name = "tel" id = "tel" value = "" / >
< / div >
2010-10-15 00:28:22 +00:00
2010-10-14 21:41:38 +00:00
< h2 > Textareas< / h2 >
< p > For multi-line text inputs, use a < code > textarea< / code > element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar which is very hard to use on a mobile device. < / p >
2011-03-10 03:36:14 +00:00
< p > Set the < code > for< / code > attribute of the < code > label< / code > to match the ID of the < code > input< / code > so they are semantically associated and wrap them in a < code > div< / code > with the < code > data-role="fieldcontain"< / code > attribute to group them.< / p >
2010-10-14 21:41:38 +00:00
< pre > < code >
2011-03-10 03:36:14 +00:00
< div data-role=" fieldcontain" >
2010-10-14 21:41:38 +00:00
< label for=" textarea" > Textarea:< /label>
< textarea cols=" 40" rows=" 8" name=" textarea" id=" textarea" > < /textarea>
< /div>
< / code > < / pre >
< p > The textarea is displayed like this and will grow as you type:< / p >
2011-03-10 03:36:14 +00:00
< div data-role = "fieldcontain" >
2010-10-14 21:41:38 +00:00
< label for = "textarea" > Textarea:< / label >
< textarea cols = "40" rows = "8" name = "textarea" id = "textarea" > < / textarea >
< / div >
2010-10-15 00:28:22 +00:00
2010-10-14 21:41:38 +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 > < a href = "forms-all.html" > Form element gallery< / a > < / li >
< li data-theme = "a" > < 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 >
2011-07-29 22:37:57 +00:00
< li > < a href = "checkboxes/index.html" > Checkboxes< / a > < / li >
2011-07-28 16:00:36 +00:00
< li > < a href = "selects/index.html" > Select menus< / a > < / li >
2011-06-20 21:17:04 +00:00
< 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 -->
< div data-role = "footer" class = "footer-docs" data-theme = "c" >
2011-06-20 22:50:52 +00:00
< p > © 2011 The jQuery Project< / p >
2011-06-20 20:35:27 +00:00
< / div >
2010-10-14 21:41:38 +00:00
< / div > <!-- /page -->
< / body >
2011-06-20 20:35:27 +00:00
< / html >
