2010-10-14 21:41:38 +00:00
<!DOCTYPE html>
< html >
2010-11-02 01:46:29 +00:00
< head >
< meta charset = "utf-8" / >
2010-10-14 21:41:38 +00:00
< title > jQuery Mobile Docs - Forms< / title >
2010-11-11 19:15:42 +00:00
< link rel = "stylesheet" href = "../../themes/default" / >
< link rel = "stylesheet" href = "../_assets/css/jqm-docs.css" / >
2010-11-09 22:57:26 +00:00
< script type = "text/javascript" src = "../../js/" > < / script >
2010-10-14 21:41:38 +00:00
< script type = "text/javascript" src = "../docs/docs.js" > < / script >
< / head >
< body >
< div data-role = "page" >
< div data-role = "header" >
< h1 > Search inputs< / h1 >
< / div > <!-- /header -->
< div data-role = "content" >
< form action = "#" method = "get" >
< h2 > Search inputs< / h2 >
< p > Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "x" icon to clear the field once you start typing. Start with an < code > input< / code > with a < code > type="search"< / code > attribute in your markup. < / p >
< 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 >
< pre > < code >
< div data-role=" fieldcontain" >
< label for=" search" > Search Input:< /label>
< input type=" search" name=" password" id=" search" value=" " />
< /div>
< / code > < / pre >
< p > The search input is displayed like this:< / p >
< div data-role = "fieldcontain" >
< label for = "search" > Search Input:< / label >
2010-11-11 04:55:43 +00:00
< input type = "search" name = "password" id = "search" value = "" / >
2010-10-14 21:41:38 +00:00
< / div >
2010-11-11 04:55:43 +00:00
< p > Themed variation:< / p >
< div data-role = "fieldcontain" >
< label for = "searchA" > Search Input:< / label >
< input type = "search" name = "searchA" id = "searchA" value = "" data-theme = "a" / >
< / div >
2010-10-14 21:41:38 +00:00
< / form >
< / div > <!-- /content -->
< / div > <!-- /page -->
< / body >
< / html >
