Introduction
All the form elements in a form need to be mobile optimized to make the whole form touch friendly and professional. The happy news is that jQuery Mobile automatically styles HTML forms to make them mobile optimized and attractive. You can a few more attributes and classes to the form elements to make them more unique and professional.
Form Structure
Using CSS, jQuery Mobile styles HTML form elements. You can use all the common input elements like text inputs, radio buttons, check boxes, select menus, search inputs, sliders and flip toggle switches in jQuery Mobile.
When using jQuery Mobile to make your forms touch friendly, make sure that all forms are wrapped in a form tag that has action and method attributes to handle the form data processing on the server.
<form action="calculate.php" method="post">
……………..
</form>
Moreover, each form element needs to have an id attribute that is unique not only on a given page, but also across different pages in a site. This is because the single-page model in jQuery Mobile allows to different pages to be present in the DOM at the same time.
Each form element needs to have a label. The for attribute of the label and the id attribute of the form element should have the same value.
<form method="post" action="process.asp">
<label for="fullname">Name:</label>
<input type="text" name="fname" id="fullname">
</form>
You can add a placeholder attribute to the form element to provide hint on what value is expected as the input. So that you can hide the label and save some space. To hide the label add the ui-hidden-accessible class to it.
<label for="fullname" class="ui-hidden-accessible">Name:</label>
<input type="text" name="fname" id="fullname" placeholder="Your full name…">
You can hide labels within a field container by adding the class ui-hide-label to the field container.
<div data-role="fieldcontain" class="ui-hide-label">
<label for="full">Name:</label>
<input type="text" name="fname" id="full" value="" placeholder="Your Name…"/>
</div>
You can create a more compact version of form elements and buttons by adding data-mini attribute and settings its value to true.
<label for="fullname">Name:</label>
<input type="text" name="fname" id="fullname" data-mini="true">
Text Inputs
In addition to the basic text box (type="text"), you can also use input types including password, tel, email, number, search and so on. You can also add a clear button to your text input by adding the data-clear-btn attribute and setting its value to true. You can use <textarea> for multiple line text input and it will automatically grow to fit new lines as you type.
Try this yourself:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Text Inputs</h1>
</div>
<div data-role="content">
<form method="post" action="noaction.php">
<label for="fullname">Full name:</label>
<input type="text" name="fullname" id="fullname">
<label for="age">Age:</label>
<input type="number" name="age" id="age">
<label for="bday">Date of Birth:</label>
<input type="date" name="bday" id="bday">
<label for="phone">Telephone:</label>
<input type="tel" name="phone" id="phone">
<label for="email">Email:</label>
<input type="email" name="email" id="email" data-clear-btn="true">
<label for="pwd">Password:</label>
<input type="password" name="pwd" id="pwd">
<label for="url">Website:</label>
<input type="url" name="url" id="url" data-mini="true">
<label for="address">Address:</label>
<textarea name="address" id="address"></textarea>
<label for="search">Search:</label>
<input type="search" name="search" id="search">
<input type="submit" data-inline="true" value="Submit">
</form>
</div>
</div>
</body>
</html>
Save the file as textinputs.html and open it using your browser. You will get a screen like this:
If you click inside the Age: textbox, you could find up and down arrows at the right of the textbox which you can use to increase or decrease the number. The Date of Birth: textbox contains up and down arrows to increase or decrease the date, month and year values and also another arrow to select the date from a calendar. As soon as you type in the Email: textbox, an X icon appears on the right which will clear the contents in the text field once clicked.
Radio Buttons and Checkboxes
You can add radio buttons in your form if the user is allowed to select one of a number of choices and you can use checkboxes if the user is allowed to select one or more options of a number of choices. You can wrap the radio buttons and checkboxes in a fieldset element and assign the role controlgroup. You can also add a legend element inside the fieldset to define a caption.
Try this yourself:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<form method="post" action="noaction.php">
<fieldset data-role="controlgroup">
<legend>Gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset><br />
<fieldset data-role="controlgroup">
<legend>Your favorite flowers:</legend>
<label for="rose">Rose</label>
<input type="checkbox" name="flower" id="rose" value="rose">
<label for="jasmine">Jasmine</label>
<input type="checkbox" name="flower" id="jasmine" value="jasmine">
<label for="tulips">Tulips</label>
<input type="checkbox" name="flower" id="tulips" value="tulips">
</fieldset>
</form>
</div>
<div>
</body>
</html>
Save the file as choices.html and open it using your browser. You will get a screen like this:
Image-2--------
Slider Control and Flip Toggle
You can add a slider if you want user to select a value from a range of numbers. You need to add an input element with type equals to range. You can also add the attributes max to set the maximum value, min to set the minimum value, step to specify the interval and value to specify the default value. You can display the value on the slider button by adding the class data-show-value and setting its value to true. You can highlight the track up to the slider value by adding the data-highlight class and setting its value to true.
A flip toggle switch is very common in mobile forms. It is used to toggle between true/false, on/off or yes/no. You need to add an input element with type equals to checkbox and specify a data-role flipswitch. By default, the text on the flip switch is "On" and "Off". You can use the data-on-text and data-off-text attributes to change this. You can use the "checked" attribute to set one of the options to be pre-selected
Try this yourself:
<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<form method="post" action="noaction.php">
<label for="percentage">Percentage of Marks:</label>
<input type="range" name="percentage" id="percentage" value="50" min="0" max="100" data-highlight="true">
<label for="switch">Are you a freelancer?</label>
<input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="Yes" data-off-text="No" checked>
</form>
</div>
</div>
</body>
</html>
Save the file as index.html and open it using your browser. You will get a screen like this:
Image--------------
You can change the percentage value by moving the slider. You can also change the value Yes to No by just dragging it.
Summary
In this section, we have seen how to make different form elements more touch friendly and mobile optimized.