jQuery Mobile - SPLessons

jQuery Mobile Form Inputs

Chapter 18

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

jQuery Mobile Form Inputs

jQuery Mobile Form Inputs

shape Description

“jQuery Mobile Form Inputs” chapter explains about form input or input controls. Standard HTML elements are used for coding Input Fields, and styling the elements is taken care by jQuery Mobile to make them look attractive and friendly to use for mobile devices.

Text Input

shape Description

To input the text in a single line using jQuery Mobile Form Inputs, use the tag <input>.

Eg:

<div class="ui-field-contain">
	<label for="fname">FULL NAME:</label>
	<input type="text" name="fname" id="fname">

	<label for="dob">DOB:</label>
	<input type="date" name="dob" id="dob">

	<label for="email">EMAIL:</label>
	<input type="email" name="email" id="email">
</div>

Text area

shape Description

To input multi-lines text, use <textarea> which expands automatically expand to fit newly entered text.

Eg:

<label for="about">ABOUT ME:</label>
<textarea name="about" id="about"></textarea>

Search Input

shape Description

Use input type="search" to search using a text field.

Eg:

<label for="search">Search:</label>
<input type="search" name="search" id="search">

Radio Buttons

shape Description

If the user want only one option to be choosed from a set of options, Radio buttons are used.

To define a group of radio buttons, add <input type="radio"> and a respective label and bind the radio buttons inside a element <fieldset> along with data-role="controlgroup", to bring the buttons together.To display a caption for the <fieldset> add <legend> element inside <fieldset>.

Eg:

<fieldset data-role="controlgroup">
	<legend>GENDER(Choosing only one):</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>

Checkboxes

shape Description

Checkboxes helps the user to choose one or more options from a set.

Eg:

<fieldset data-role="controlgroup" data-type=" ">
	<legend>SKILL(Choose many):</legend>
	<label for="java">JAVA</label>
	<input type="checkbox" name="java" id="java" value="java">
	<label for=".net">.NET</label>
	<input type="checkbox" name=".net" id=".net" value=".net">
	<label for="c++">C++</label>
	<input type="checkbox" checked="" name="c++" id="c++" value="c++">
</fieldset>

shape More Info

To make the checkboxes or radio buttons as a set horizontally, use the data-type="horizontal". The field container can also be wrapped around the <fieldset>.

Eg:

<fieldset data-role="controlgroup" data-type="horizontal">
	<legend>SKILL(Choose many):</legend>
	<label for="java">JAVA</label>
	<input type="checkbox" name="java" id="java" value="java">
	<label for=".net">.NET</label>
	<input type="checkbox" name=".net" id=".net" value=".net">
	<label for="c++">C++</label>
	<input type="checkbox" checked="" name="c++" id="c++" value="c++">
</fieldset>

To make one of the option appear by default,use following code.

Eg:

<input type="radio" checked="">
<input type="checkbox" checked="">

A form can also be placed inside a popup.Below is the code.

Eg:

<a href="#popup1" data-rel="popup" class="ui-btn ui-btn-inline">Show Form</a>
<div data-role="popup" id="popup1" class="ui-content">

	<div>
		<h3>Login information</h3>
		<label for="uname" class="ui-hidden-accessible">Username:</label>
		<input type="text" name="uname" id="uname" placeholder="Username">
		<label for="pwd" class="ui-hidden-accessible">Password:</label>
		<input type="password" name="pwd" id="pwd" placeholder="Password">
	</div>

</div>

shape Example

<!DOCTYPE html> 
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Form</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />

		<!-- jQuery CDN hosted files -->
		<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.1.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

	</head> 
	
	<body> 

		<form method="post" action="form1.asp">

			<div class="ui-field-contain">
				<label for="fname">FULL NAME:</label>
				<input type="text" name="fname" id="fname">

				<label for="dob">DOB:</label>
				<input type="date" name="dob" id="dob">

				<label for="email">EMAIL:</label>
				<input type="email" name="email" id="email">

			-------Text Area-------

				<label for="about">ABOUT ME:</label>
				<textarea name="about" id="about"></textarea>
				 
			-------Search-------

				<label for="search">Search:</label>
				<input type="search" name="search" id="search">
			</div>
		</form>

		<form method="post" action="form2.asp">
			<fieldset data-role="controlgroup">
				<legend>GENDER(Choosing only one):</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>
		</form>

		<form method="post" action="form3.asp">
			<fieldset data-role="controlgroup" data-type="horizontal">
				<legend>SKILL(Choose many):</legend>
				<label for="java">JAVA</label>
				<input type="checkbox" name="java" id="java" value="java">
				<label for=".net">.NET</label>
				<input type="checkbox" name=".net" id=".net" value=".net">
				<label for="c++">C++</label>
				<input type="checkbox"checked name="c++" id="c++" value="c++"> 
			</fieldset>
		</form>


		<a href="#popup1" data-rel="popup" class="ui-btn ui-btn-inline">Show Form</a>
		<div data-role="popup" id="popup1" class="ui-content">
			<form method="post" action="form4.asp">
				<div>
					<h3>Login information</h3>
					<label for="uname" class="ui-hidden-accessible">Username:</label>
					<input type="text" name="uname" id="uname" placeholder="Username">
					<label for="pwd" class="ui-hidden-accessible">Password:</label>
					<input type="password" name="pwd" id="pwd" placeholder="Password">
				</div>
			</form>
		</div>
	</body>
</html>

Output:

Summary

shape Key Points

  • Text Input tag takes the input in a single line and if the input is of multiple lines, use textarea.
  • <input type=”radio”> is used to insert radio buttons and <input type=”checkbox”> to insert checkboxes.