jQuery Mobile Form and Form Buttons Example

October 19, 2014
In this page, we will learn how to create mobile form and form button. Form button will be inside Mobile form. Using these jQuery mobile elements, we can create an attractive UI easily. Find the example and description to mobile form and form button.

jQuery Mobile Forms

jQuery mobile form is very attractive and stylish. It is very easy to use in development. jQuery Mobile uses CSS to style HTML form elements. CSS library provides multiple class to style form element. CSS class controls all forms element like
Text Inputs , Search Inputs , Radio Buttons , Checkboxes , Select Menus , Sliders
jQuery Mobile automatically styles HTML forms to make them look beautiful and touch-friendly.
<form method="post" action="concretepage.com">
  <label  for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form> 
In mobile form, element must have method and action attribute. In form container , there is one label and one input element . All elements must have unique id for data communication. Label must have for attribute because it is necessary to match name attribute in input element with for attribute in label element.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
    <div data-role="main" class="ui-content">
      <form method="post" action="concretepage.com">
      <label for="fname">First name:</label>
      <input type="text" name="fname" id="fname">
    </form>
    </div>  
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html> 
Find the output.
jQuery Mobile Form and Form Buttons Example
CSS class play very specific roll in form element to show and hide. If you want to hide label in form then use "ui-hidden-accessibl" class in label.
<form method="post" action="concretepage.com">
	<label for="fname" class="ui-hidden-accessible">First name:</label>
	<input type="text" name="fname" id="fname">
</form>
In input element if you want to show short hint to input text field then you can use placeholder in input element.
<form method="post" action="concretepage.com">
        <label for="fname"  class="ui-hidden-accessible">First name:</label>
        <input type="text" name="fname" id="fname" placeholder="First Nmae">
</form> 

jQuery Mobile Form Buttons

All buttons in form is automatically styled by CSS class in jQuery mobile application. CSS class makes it easy and stylish to use in both device, mobile and non-mobile.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Welcome to my Concretepage</h1>
  </div>
    <div data-role="main" class="ui-content">
     <form method="post" action="demoform.asp">
      <label for="fname">Write your name and click on one of the buttons:</label>
      <input type="text" name="fname" id="fname">
      <input type="button" value="User Button">
      <input type="reset" value="Reset Button">
      <input type="submit" value="Submit Button">
    </form>
    </div> 
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>  
</html> 
Find the output.
jQuery Mobile Form and Form Buttons Example







©2024 concretepage.com | Privacy Policy | Contact Us