Find the range of forms; form input fields like HTML select dropdowns, file upload, search boxes, form validation script, checkboxes and much more based on simple, Bootstrap and custom CSS styles.
A number of tutorials/plug-ins use the jQuery functionality.
The registration / Create account form and Bootstrap In other tutorials of Bootstrap series, I showed how you may create Bootstrap based forms by using built-in classes. The demos included simple form along with custom CSS to style with your own color scheme. I also used icon classes in the form control in demos. In … Read more
What is a linked select plug-in? In certain situations, you need to present the selectable information to users in dropdowns which is categorized. For example, consider this scenario: Choose a maker of cars: Ford Honda Toyota GM Choose a model based on first selection: Modal 1 Modal 2 Modal 3 Choose the Year of manufacturing … Read more
The multi-select list view plug-in In professional websites, you generally need to select multiple options from one list to the other that are used for specific types of data. For example, select your skills from the available list of HTML, JavaScript, jQuery, Bootstrap, CSS, etc. This list is generally presented on the left side. You … Read more
The HTML checkbox as switch In this tutorial, a jQuery plug-in is used to convert a simple HTML checkbox into the beautiful switch by using jQuery and CSS. It’s a light-weight plug-in, just 3 Kb JS file and requires a few lines of code in the <script> section. So, let me start by showing online … Read more
What is formAnimation plug-in about? The formAnimation plug-in is a light-weight plug-in based on jQuery that can be used for showing cool animations for web forms upon invalid submission. You may use this plug-in for simple HTML forms or based on other frameworks like Bootstrap forms as well. Underway, this form validation plug-in uses the … Read more
The editable jQuery select dropdown In the Bootstrap series of tutorials, I wrote about multi-select dropdown along with searchable option as using the Bootstrap framework. In this tutorial, I am going to show you another plug-in related to HTML select but with editable options. This nice and simple jQuery-based plugin allows adding new options on … Read more
The Bootstrap markdown editor As you work with Bootstrap framework, chances are you may need your users providing a text editor with certain features like heading options, typical italic, bold options, and that also enables uploading the images. As such, the Bootstrap is relatively a new web framework. In spite of many built-in features, many … Read more
The Bootstrap form builders Although, creating Bootstrap based forms in your web projects is the matter of using a few built-in classes. Whether you want to add textboxes, dropdowns, textarea, checkbox or radio buttons; you may use simple HTML tags with Bootstrap frameworks’ CSS classes and form is ready to use with beautiful styles and … Read more
How to create HTML select dropdown with options The <select> tag in HTML is used to create a dropdown that enables users selecting an option from the pre-defined set of values. The text visible to the user can be different to the text in the value attribute of <select> tag. This is how you can … Read more
The checkbox tag In HTML, you can create a checkbox by using the <input> tag and specify the type = checkbox, as shown in the syntax below: <input type=”checkbox” name=”checkboxName” value=”Value_of_checkbox”> In this tutorial, I will show you how you can create checkboxes in HTML forms. I will also explain how you may style checkboxes … Read more
In this tutorial, I will show you using a Bootstrap or HTML form to submit data via jQuery $post method. The post method is used to load data by using the HTTP request. Along with specifying the source you may send data along with it. Similarly, you may send data taken from a user in … Read more
The input type file Among the other input types like text, password, etc. the file input type allows the creation of a form element that enables users to select a file to upload in the Bootstrap framework, which is basically an HTML tag. This is just a matter of specifying the HTML tag: <input type … Read more
Purpose of jQuery AJAX method The jQuery has handy methods to work with AJAX quite simply and easily. The methods include $.ajax, $.post, $.get, $.load, etc. By using these methods, you may accomplish certain tasks like Submitting forms without reloading a web page, pulling data in an autocomplete field, loading table data, using tabs which … Read more
The buttons in Bootstrap Bootstrap buttons can be created by using the main class btn followed by its style and size optional classes. For example, btn-info specifies a light blue button with normal size. Similarly, btn-primary is dark blue, btn-success is green and so on. A button with Bootstrap classes: <button type=”button” class=”btn btn-info btn-lg”>A … Read more
The textarea by using Bootstrap framework By adding the form-control class in the textarea tag, you may create a multiline textarea with Bootstrap. The following example shows two text boxes with and without using the Bootstrap class. The code: <!DOCTYPE html> <html> <head> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” integrity=”sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==” crossorigin=”anonymous”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> </head> <body> <div … Read more