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 class="form-horizontal" to our form.
<form class="form-horizontal">

Inline Form

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>

FROM CLASS='FORM-ROW'

Horizontal form with width control for different form elements

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);
?>
Auto submission of form to a different page.
$('#f1').attr('action', "dropdown3-ck.php").submit();


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer