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 likeText 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>
<!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>
<form method="post" action="concretepage.com"> <label for="fname" class="ui-hidden-accessible">First name:</label> <input type="text" name="fname" id="fname"> </form>
<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>