Forms and Form Controls CIS 136 Building Mobile Apps

Forms JQM forms are enhanced versions of standard HTML controls Form fields comprised of: Text fields Sliders Switches Radio Buttons Checkboxes Selection menus Search inputs

Form Design jQuery mobile enhances form fields so they work better on a mobile device Buttons are automatically widened and heightened easier to click in the small form factor of a phone labels are presented above the form fields buttons will be bigger To disable automatic enhancement of a form field, globally or per object, add data-role=“none” as an attribute in the tag

Forms Must have one <form> tag, and all the tags for the form fields are contained within it The <form> tag must have a method and an action attribute Method says how the transmission is sent (use POST) Action says which program will process the data in the form Each form tag must have a unique "id" attribute The id must be unique across the page views in the app <form method=“post” action=“aServerProgram.php” id=“loginForm”> </form>

Forms The <form> tag must have a method and an action attribute Each form tag must have a unique "id" attribute The id must be unique across the page views in the app Each form fields tag must have a label Use the for attribute of the label to match the id of the element id = “logonForm” >

HTML 5 Form Field types Phones and tablets do not have the benefit most desktops and laptops do a large input device called the "keyboard“, instead, virtual keyboards physically smaller more tedious to operate HTML5 has standardized a handful of input types which make them easier to use on mobile apps Text Email Tel Search Number Date Month Password Toggle Slider

TextBox Standard Syntax: <input type=“text” value="“ id=“someID” name=“someName”> <input type=“email”… Use when you require a user to enter an email address offers a much smoother keyboard experience, displaying the @ and . characters within the initial keypad for quicker typing <label class="item item-input“ for=“emailaddr”> <span class="input-label">Email</span> <input type="email“ value=“” id=“emailaddr” name=“emailaddr”> </label> <label class="item item-input“ for=“loginName”> <span class="input-label">Username</span> <input type="text" value="" id=“loginName name=“loginName> </label>

TextBox <input type=“tel”… <input type=“search”… displays a full numeric keypad makes a great user experience when all that is required from the user is numbers <label class="item item-input“ for=“tel”> <span class="input-label">Telephone</span> <input type="tel“ id=“tel” name=“tel” value=“”> </label> <input type=“search”… changes the button to read “search” and displays a Textbox with a delete icon at the end of the field <label class="item item-input“ for=“srch”> <i class="icon ion-search placeholder-icon"></i> <input type="search" placeholder="Search“ id=“srch” name=“srch”>

TextBox <input type=“number”… <input type=“date”… offers easy access to special characters and symbols <label class="item item-input“ for=“numfield”> <span class="input-label">Number</span> <input type=“number“ id=“numfield” name=“numfield” value=“”> </label> <input type=“date”… should be utilized for when a user is asked to enter the month, day, and year mobile keyboard will offer a nice interactive panel for easy entering <label class="item item-input“ for=“indate”> <span class="input-label">Date</span> <input type=“date“ id=“indate” name=“indate” value=“”>

TextBox <input type=“month”… <input type=“password”… similar to the date input, but leaves out the “day” option perfect example would be for taking credit card expiration dates <label class="item item-input“ for=“amonth”> <span class="input-label">Month</span> <input type=“month“ value=“” id=“amonth” name=“amonth”> </label> <input type=“password”… hides the characters so nobody else can see what the user is typing common practice to give users the option to show actual characters with the text input instead of hidden password characters <label class="item item-input“ for=“apwd”> <span class="input-label">password</span> <input type=“password“ value=“” id=“apwd” name=“apwd”>

TextArea Use <textarea> for multi-line text inputs The text area will automatically grow to fit new lines as text is typed in

Radio Buttons used when a user can select only one of a limited number of choices. use an input with type="radio" and a corresponding label wrap the radio buttons in a <fieldset> element Add a < legend> element to define a caption for the <fieldset> Use data-role="controlgroup", to group the buttons together id=“myForm”>

Checkboxes used when a user can select one or more options of a limited number of choices To group radio buttons or checkboxes horizontally, use the data-type="horizontal" id=“myForm”>

Select Menus (drop down lists) The <select> element creates a drop-down list with several options The <option> elements inside the <select> element define the available options in the list If you have a long list of options that are related, use the <optgroup> element inside <select>

Select Menus mobile platforms have their own way of showing a select menu To have the select menu display the same on all mobile devices, use jQuery's custom select menu using the data- native-menu="false" attribute To select multiple options in the select menu, use the multiple attribute in the <select> element

Select Menus Can groups as well, for vertical or horizontal group of drop down lists <fieldset data-role="controlgroup"> <select>… <select>…. </fieldset>

Form Sliders A slider allows you to select a value from a range of numbers use <input type="range“> max - specifies the maximum value allowed min - specifies the minimum value allowed step - specifies the legal number intervals value - specifies the default value

Sliders to show the value on the slider button, add data-show- value="true“ after “range” To have the value pop up on your screen like a tooltip (as you slide), add data-popup-enabled="true” to highlight the track, up to the slider value, add data- highlight="true“ … > … > … >

Toggle Switch used for on/off or true/false buttons <input type="checkbox data-role="flipswitch“ by default, the text on the flip switch is "On" and "Off“ To change this, use the data-on-text and data-off-text attributes use the "checked" attribute to set one of the options to be pre-selected id=myForm”>

Flip Switch Also used for on/off or true/false buttons use a select control with a data-role set to the value slider <div data-role="fieldcontain"> <label for=“lightbulb">Lightbulb:</label> <select name=“lightbulb" id="lightbulb" data-role="slider"> <option value="0">Off</option> <option value="1">On</option> </select> </div>

Mini fields Form fields in the header or footer may be too large to fit Shrink using data-mini="true" <div data-role="fieldcontain"> <label for=“lightbulb">Lightbulb:</label> <input type=“text” id="lightbulb" value=“” data-mini="true“ /> </div> All form controls accept a data-mini="true" attribute that renders a smaller version of the standard-sized form elements http://demos.jquerymobile.com/1.1.2/docs/forms/forms-all.html

Fieldcontain class To make labels and form elements look correct on wider screens wrap a < div> or <fieldset> element with the "ui-field-contain" class around the label/form element. Or use the data-rolem fieldcontain <div data-role="fieldcontain"> <label for=“story">Your Story:</label> <textarea name=“story" id=“story"></textarea> </div> It styles labels and form controls based upon the width of the page If the width of the page is greater than 480px, it places the label on the same line as the form control If less than 480px, the label will be placed above the form element

Form Design Use a placeholder to specify a short hint that describes the expected value of an input field To hide the label, use the "ui-hidden-accessible" class. This is often used when you want the element's placeholder attribute to serve as the label

Form Design If you want a "clear button" (an X icon on the right side of the input field that clears the contents of the field), add the data-clear-btn="true" attribute Note: The "clear button" can be added on any <input> element, except for <textarea> Search fields have this attribute set to "true" as a default to change it, specify data-clear-btn="false"

Form Buttons Buttons in forms are coded with standard HTML <input> elements (button, reset, submit)

Form Buttons Buttons are automatically styled, but can be additionally styled using the data-* attributes