Form Design using Bootstrap

There are two important concepts about forms
1. Design of the form
2. Posting data to backend script.

Bootstrap design of the form

In default design all inputs are stacked one over the other
All form input elements are with style =form-control occupies 100% of width
All form inputs along with the labels are kept within class=form-group
<form>
<div class='form-group'>
    <label for='userid'>User ID</label>
    <input type='text' class='form-control' id='userid' placeholder='userid'>
  </div>
  <div class='form-group'>
    <label for='password'>Password</label>
    <input type='password' class='form-control' id='password' placeholder='password'>
  </div>
</form>

Horizontal form inputs

We can add form class=form-inline to keep all input elements in horizontal line using full available width.
Each form group behaves like a row so no need to keep one extra row tag to align inputs in a row.
<form class='form-inline'>
<div class='form-group'>
    <label for='userid'>User ID</label>
    <input type='text' class='form-control' id='userid' placeholder='userid'>
  </div>
  <div class='form-group'>
    <label for='password'>Password</label>
    <input type='password' class='form-control' id='password' placeholder='password'>
  </div>
<button type='button' class='btn btn-info btn-sm'>Submit</button>
</form>

Read more on all form inputs and its controls

Posting data to a backend script.

You can read more on http POST method and http GET method of posting data to a backed script. We will discuss how to post data using JQuery serialize function and then display the response we get from the backend script.

Here is a form with a button to trigger data submission ( you will get retrun data from backend script )
Once the button is clicked we will trigger form submission process and receive the data from backend script by using JSON.
<div id=display></div>
<form class='form-inline' id='f1'>
<div class='form-group'>
    <label for='userid'>User ID</label>
    <input type='text' class='form-control' id='userid' name='userid' placeholder='userid'>
  </div>
  <div class='form-group'>
    <label for='password'>Password</label>
    <input type='password' class='form-control' id='password' name='password' placeholder='password'>
  </div>
<button type='button' class='btn btn-danger btn-sm' id=b1>Submit</button>
</form>

<script>
$(document).ready(function() {
////////////////////////////////////////////
	$('#b1').click(function(){
$("#display").css("background-color", "yellow"); // Set Background color to yellow
$("#display").html("Please wait ....");     
$("#display").show();
var data = $('#f1').serialize();  
$.post( "bs-formck.php", data,function(return_data,status){
$("#display").html(return_data.msg); 
setTimeout(function() { $("#display").fadeOut('slow'); }, 4000);
},"json");
	})
////////////////////////////////////////////
});
</script>
Using PHP here is the backend script.
<?Php
error_reporting(0);// With this no error reporting will be there
$row=array("t1"=>"","t2"=>"","msg"=>"","status_form"=>"OK");
$msg='testing';
$t1=$_POST['userid'];
$t2=$_POST['password'];
////
// Your data processing scripts here ///
////

$msg="Userid : $t1 , Password : $t2 ";
$row["msg"]=$msg;
echo json_encode($row);
?>
Visitors Rating
Your Rating


Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2017 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer