Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to design form controls for mobiles using jQuery Mobile Square-UI Theme plugin?
Making web pages mobile-friendly is a challenging task for the customs form control. jQuery gives us many options to perform the task conveniently. Since smartphones are very popular devices nowadays, it is important to be able to create custom form controls which visually appealing interfaces. jQuery library of JavaScript can help in building both responsive and engaging designs. In this article, we shall learn how to design form control for mobile using jQuery mobile Square-UI Theme plugin.
Example
This code demonstrates how to design mobile forms using the jQuery Query Mobile Square-UI Theme plugin. We first included the necessary libraries and style sheets in our code using the using the standard elements of HTML. We used the script tag to include the JavaScript code. We initialized the Square-UI Theme plugin with default options.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/flatlogic/square-ui/1.0.1/dist/square-ui.css">
<style>#myForm{margin:1em;}label{display:block;margin-bottom:.5em;}input[type="text"],select{width:100%;margin-bottom:.5em;}</style>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content">
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<label for="country">Country:</label>
<button type="submit">Submit</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/flatlogic/square-ui/1.0.1/dist/square-ui.js"></script>
<script>
$(document).on("pagecreate",function(){
$.mobile.square.defaults.activeBtnClass="ui-btn-square ui-btn-active";
$.mobile.square.defaults.activeToggleClass="ui-btn-square ui-btn-active";
$.mobile.square.defaults.checkIcon="fa fa-check";
$.mobile.square.defaults.radioOnIcon="fa fa-dot-circle-o";
$.mobile.square.defaults.radioOffIcon="fa fa-circle-o";
$.mobile.square.defaults.sliderClass="ui-slider-square";
$.mobile.square.defaults.sliderHandleClass="ui-btn-up-square";
$.mobile.square.defaults.sliderHighlightClass="ui-btn-corner-all ui-btn-up-square";
$.mobile.square.defaults.sliderTrackClass="ui-btn-down-square";
$.mobile.square.defaults.textButtonClass="ui-btn-square";
$.mobile.square.defaults.textButtonActiveClass="ui-btn-square ui-btn-active";
$.mobile.square.init();
});
</script>
</body>
</html>
Use Field set To Create Form Control
The field set acts as a container for a group of controls. We can use check boxes, radio buttons, etc., to create custom form controls under this tag. The main advantage of using this field set is to group the related form controls and provide a visual semantic representation.
Example
We used the field set tag in the following code to create a custom form control. We used the type of the input boxes to be check boxes using the type attribute. We used the label attribute to define the labels of the check boxes
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquerymobile@1.4.5/jquery.mobile.min.css" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquerymobile@1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>Example of Fruits Selection</h3>
</div>
<div role="main" class="ui-content">
<fieldset data-role="controlgroup">
<input type="checkbox" name="fruit[]" id="apple" checked="checked"/>
<label for="apple">Apple</label>
<input type="checkbox" name="fruit[]" id="banana" checked="checked"/>
<label for="banana">Banana</label>
<input type="checkbox" name="fruit[]" id="orange" checked="checked"/>
<label for="orange">Orange</label>
</fieldset>
</div>
</div>
</body>
</html>
Create Custom Slider
Sliders are important elements, especially in the application that deals with mobile devices. This has many applications like setting preferences, filtering and sorting, Multimedia control, etc.
Example
In the following code, we created a slider using the jQuery Mobile Square-UI Theme plugin. We created the slider with a default value of 50, ranging from 0 to 100. We set the input type to “range” to create a slider.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"href="css/jquery.mobile.squareui.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<style>
.section-heading {
padding: 10px;
margin: 0 auto;
}
</style>
</head>
<body>
<h2 class="section-heading">Slider example</h2>
<div data-role="fieldcontain">
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
</div>
</body>
</html>
Use Collapsible Inputs
Collapsible inputs are popular input fields in modern websites. It allows us to group related things and hide them by default. This makes the overall user interface more interactive and organized. For example, we may need to select our country in the form. In such case, it will be inconvenient to implement a checkbox or plain text as the inputs due to a large number of options available. In such case, we can use the collapsible inputs.
Example
In the following code, we used the select tag to create collapsible inputs. The option tag acts as a child to the select tag. It contains all the options which are available to the user. We also created a submit button. Typically users have to submit when they are done with filling the form for submission.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/flatlogic/squareui/1.0.1/dist/square-ui.css">
</head>
<body>
<form>
<div data-role="collapsible">
<h3>Country</h3>
<div data-role="fieldcontain">
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">-- Select a country --</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="australia">Australia</option>
</select>
</div>
</div>
<button type="submit">Submit</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/flatlogic/squareui/ui/1.0.1/dist/square-ui.js"></script>
<script>
$(document).on("pagecreate", function() {
$.mobile.square.init();
});
</script>
</body>
</html>
Conclusion
Designing mobile forms using the jQuery Mobile Square-UI Theme plugin is a simple and effective way to improve the user experience of your mobile applications. Plain CSS would have taken more lines of code to achieve the same. We strongly recommend that readers explore more about the Square-UI Theme plugin to understand the topic more.
70 Views
