I was trying to make a multi-step form using jQuery steps. I have tried taking some code from the actual documentation but don't know why their web page isn't showing the code snippets. I tried taking the code from one tutorial blog but it is not working as I have expected. The section is not changing I am new to jQuery and never used steps I am not getting where I am going wrong.
Code :
<form id="example-form" action="#" class="tab-wizard wizard-circle wizard clearfix">
<h6>Account</h6>
<section>
<br/>
<div class="row">
<div class="col-sm-4 col-sm-push-4">
<div class="form-group">
<label for="userName-2">User name </label>
<input id="userName-2" name="userName" type="text" value="Les" class="form-control ">
</div>
<div class="form-group">
<label for="password-2">Password</label>
<input id="password-2" name="password" value ="password" type="text" class=" form-control">
</div>
<div class="form-group">
<label for="confirm-2">Confirm Password</label>
<input id="confirm-2" name="confirm" type="text" value="password" class=" form-control">
</div>
</div>
</div>
</section>
<h6>Profile</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="address-2">Address</label>
<input id="address-2" name="address" type="text" class="form-control">
</div>
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
</div>
</div>
</section>
<h6>Warning</h6>
<section>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="form-group">
<label>This is the question that is being asked to the user?</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" >
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >
Option three. This is just a demo.
</label>
</div>
</div></div>
</div>
<hr>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="form-group">
<label for="name-2">First name</label>
<input id="name-2" name="name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="surname-2">Last name</label>
<input id="surname-2" name="surname" type="text" class="form-control">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="age-2">Age</label>
<input id="age-2" name="age" type="text" class="form-control number">
</div>
<div class="form-group">
<label for="email-2">Email</label>
<input id="email-2" name="email" type="text" class="form-control email">
</div>
</div>
</div>
</section>
<h6>Finish</h6>
<section>
<input id="acceptTerms-2" name="acceptTerms" type="checkbox" class=""> <label for="acceptTerms-2">I agree with the Terms and Conditions.</label>
</section>
</form>
Js code:
var form = $("#example-form");
form.steps({
headerTag: "h6",
bodyTag: "section",
transitionEffect: "fade",
titleTemplate: '<span class="step">#index#</span> #title#'
});
Apologies for the long code here, I tried making codesandbox of the example but I can't able to find the CDN for steps.css and also the CDN for steps.js was not working there.
Related
In this code, what happens when I change checkbox value (i.e. If I click on credit card checkbox) then <div class="creditcard"> shows, and if I click on paypal then <div class="paypal"> shows.
Now, when I choose credit card and then click on submit button, then form does not submit. And if I check paypal checkbox and click submit button then nothing happen again. I don't understand why.
How can I submit form whether I choose credit card checkbox or paypal?
$(document).ready(function() {
$('input.payment').on('change', function() {
$('input.payment').not(this).prop('checked', false);
});
$("#credit").click(function() {
if ($(this).is(":checked")) {
$(".creditcard").show();
$(".paypal").hide();
} else {
$(".creditcard").hide();
$(".paypal").show();
}
});
$("#paypal").click(function() {
if ($(this).is(":checked")) {
$(".paypal").show();
$(".creditcard").hide();
} else {
$(".paypal").hide();
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input type="checkbox" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="checkbox" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" required value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" required/>
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
You should be using radio buttons instead of checkboxes. I cleaned up your code also to use one event handler.
I also updated so the appropriate fields are dynamically set as required.
$(document).ready(function() {
$('input.payment').on('change', function() {
$("input[name='cardNumber']").prop("required",false);
$("input[name='paypal_email']").prop("required",false);
$(".creditcard").hide();
$(".paypal").hide();
if($(this).val() == "PayPal"){
$(".paypal").show();
$("input[name='paypal_email']").prop("required",true);
}
else{
$("input[name='cardNumber']").prop("required",true);
$(".creditcard").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="checkout.php" autocomplete="off">
<div class="col-lg-7 mb--20 float-left">
<div class="form-group">
<label for="fname">Full Name</label>
<input type="text" class="form-control" id="fname" placeholder="Enter Your Name" name="fname" required="">
</div>
</div>
<div class="col-lg-5 float-right">
<div class="row">
<div class="col-12">
<div class="checkout-cart-total">
<div class="col-md-6">
<input checked type="radio" id="credit" class="payment" name="mode" value="credit card">
<label for="credit">Credit Card</label>
</div>
<div class="col-md-6">
<input type="radio" id="paypal" class="payment" name="mode" value="PayPal">
<label for="paypal">Paypal</label>
</div>
<div class="creditcard" style="display:block;">
<div class="form-group">
<label for="cardNumber">CARD NUMBER</label>
<input type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" value="" />
</div>
</div>
<div class="paypal" style="display:none;">
<div class="form-group">
<label for="paypal_email">Email ID</label>
<input type="email" class="form-control" name="paypal_email" placeholder="Please enter paypal email" />
</div>
</div>
<button type="submit" name="submit" id="submit" class="place-order w-100">Place order</button>
</div>
</div>
</div>
</div>
</form>
I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?
I know this question has been asked and I've tried a few different methods but can't seem to get this to work. I'm trying to insert a div to extend a form based on a checkbox being ticked. Nothing seems to work at the moment. It's probably something stupid, I'd appreciate the assistance:
https://jsfiddle.net/4ydybrdd/#&togetherjs=qG3ypyIQsa
html:
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-
top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off"
name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off"
name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"
name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown"
style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block"
name="register">Register</button>
</form>
js:
jQuery("#blogger").click(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
Post the js code after document.ready and don't forget to add jquery link
Updated fiddle
/*!
* can yo u solve my issue? :) I don't understand why it won't wor
*/
$(document).ready(function(){
jQuery("#blogger").change(function() {
if($(this).is(":checked")) {
jQuery(".addblog").show(300);
}
else {
jQuery(".addblog").hide(300);;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" autocomplete="off">
<div class="row resetpword">
<div class="container-fluid addblog"style="margin-top:-40px;margin-bottom:20px;"><h2>Registration</h2></div>
<div class="container-fluid" style="margin-left:37px;">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="firstname" />
</div>
<div class="container-fluid" style="margin-left:35px;">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" name="lastname" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid" style="margin-left:10px;">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" name="email" />
</div>
</div>
<div class="row resetpword" style="margin-top:0;">
<div class="container-fluid">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off" name="password"/>
</div>
</div>
<div class="container-fluid resetpword countrydropdown" style="margin-top:0;margin-left:-15px;">
<label>
Country of origin<span class="req">*</span>
</label>
<select>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
</select>
</div>
<div class="container-fluid resetpword" style="margin-top:0;">
<label>
Are you a blogger?<span class="req">*</span>
</label>
<input type="checkbox" name="check1" id="blogger"/>
</div>
<div class="addblog"><p>sausage</p></div>
<button type="submit" class="resetb button button-block" name="register">Register</button>
</form>
looking at your example it seems that your were missing the jquery library as well as some html changes
you have user .addblog class name in two divs.so when you click on check box both divs get show and hide.so remove any one class or use different class name for new div to be inserted..
When using jQuery effect, my div collapses a little as it is sliding and the div coming in is also collapsed a little. It will be a responsive website, so I do not think I should put a width or height. I tried one suggestion I read about using position: absolute, but it did not produce the result I wanted. Is there a way to keep the div from collapsing any? I want each div to look the same when sliding as it does when not sliding.
This fiddle shows the effect and how the divs look when sliding.
CODE:
<div class="well basicInformation">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Basic Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-5">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" placeholder="First name" ng-model="firstname" required autofocus />
</div>
<div class="col-md-2">
<label for="MI">Middle Initial</label>
<input type="text" id="MI" class="form-control" ng-model="middlename" />
</div>
<div class="col-md-5">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" placeholder="Last name" ng-model="lastname" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address">Address</label>
<input type="text" id="address" class="form-control" placeholder="Address Line 1" ng-model="address" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address2">Address 2</label>
<input type="text" id="address2" class="form-control" placeholder="Address Line 2" ng-model="address2" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" placeholder="City" ng-model="city" />
</div>
<div class="col-md-2">
<label for="address2">Locale/State</label>
<input type="text" id="locale" class="form-control" placeholder="Locale/State" ng-model="locale" />
</div>
<div class="col-md-2">
<label for="address2">Region</label>
<input type="text" id="region" class="form-control" placeholder="Region" ng-model="region" />
</div>
<div class="col-md-3">
<label for="address2">Country</label>
<input type="text" id="country" class="form-control" placeholder="Country" ng-model="country" />
</div>
<div class="col-md-2">
<label for="address2">Postal Code</label>
<input type="text" id="postalCode" class="form-control" placeholder="Postal Code" ng-model="postalCode" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="phone">Phone (Default)</label>
<input type="radio" id="radioHome1" /><label> Home</label>
<input type="radio" id="radioMobile1" /><label> Mobile</label>
<input type="tel" id="phone" class="form-control" placeholder="Phone" ng-model="contactData" required />
</div>
<div class="col-md-6">
<label for="phone2">Phone 2 (Alternate)</label>
<input type="radio" id="radioHome2" /><label> Home</label>
<input type="radio" id="radioMobile2" /><label> Mobile</label>
<input type="tel" id="phone2" class="form-control" placeholder="Phone 2" ng-model="contactData2" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="email">Email address</label>
<input type="email" id="email" class="form-control" placeholder="Email address" ng-model="emailAddress" required />
</div>
<div class="col-md-6">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" ng-model="password" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitBasicInformation" class="btn btn-lg btn-primary btn-block">Next</button>
</div>
</div>
</div>
<div class="well faaInformation" style="display: none;">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">FAA Required Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-6">
<label for="federalRegistrationId">Federal Registration ID</label>
<input type="text" id="federalRegistrationId" class="form-control" placeholder="Federal Registration ID" ng-model="federalRegistrationId" required />
</div>
<div class="col-md-6">
<label for="pilotNumber">Pilot Number</label>
<input type="text" id="pilotNumber" class="form-control" ng-model="pilotNumber" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitRegistration" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</div>
var hideoptions = { "direction": "left", "mode": "hide" };
var showoptions = { "direction": "right", "mode": "show" };
$("#submitBasicInformation").on('click', function () {
$.when($(".basicInformation").effect("slide", hideoptions, 1250)).then(function (data, textStatus, jqXHR) {
$(".faaInformation").effect("slide", showoptions, 1250);
});
});
It looks like your animation is adding style attributes during the animation. You can see this if you slow down the animation and inspect the element. It's adding a static height and width during the animation. I was able to fix the height and width by adding this to your .faaInformation css
height: auto !important;
width: auto !important;
In the below layout, the last text field(UserName) alone not in correct size. I tried many ways, but nothing works. pls share any idea. my code is
<div id="wrapper">
<div class="row">
<div class="col-lg-6 vcenter ">
<div class="panel panel-success">
<div class="panel-heading text-center">
<h4>Login Help</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="row col-lg-12 radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username
</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email
</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile
</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="radio row col-lg-12" style="margin-top:5%;">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password
</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email
</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile
</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
</div>
<div class="col-lg-12 row">
<div class="col-lg-6">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
If all you're concerned with is the size of the last input then change this:
You have col-lg-12 row with a col-lg-6 inside of it, remove the col-lg-6 and change the col-lg-12 row to col-lg-6 row.
That being said I've included two alternative layouts that use bootstrap default classes and standard layouts for forms that may help as you're mixing col-*-* with rows in the same div and that isn't how the grid is structured.
See working examples with your original code (*fixed) and two samples.
<div class="col-lg-6 row">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="row">
<div class="col-lg-6 vcenter ">
<div class="panel panel-success">
<div class="panel-heading text-center">
<h4>Login Help (Original)</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="row col-lg-12 radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="radio row col-lg-12" style="margin-top:5%;">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
</div>
<div class="col-lg-6 row">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6 vcenter">
<div class="row">
<div class="panel panel-warning">
<div class="panel-heading text-center">
<h4>Standard Form</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
<label>
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Email Address</label>
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
<label>
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Email Address</label>
<input class="form-control" placeholder="E-mail" name="email" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Username</label>
<input class="form-control" placeholder="Username" name="uname" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6 vcenter">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>INLINE FORM</h4>
</div>
<div class="panel-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked/>Forgot Username</label>
<label class="radio-inline">
<input type="radio" name="userMailMob" id="mail1" value="option1" checked/>Email</label>
<label class="radio-inline">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Email Address</label>
<div class="col-sm-8">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="userPwd" id="userpwd2" value="option2" />Forgot Password</label>
<label class="radio-inline">
<input type="radio" name="pwdMailMob" id="mail2" value="option1" />Email</label>
<label class="radio-inline">
<input type="radio" name="pwdMailMob" id="mob2" value="option1" />Mobile</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Email Address</label>
<div class="col-sm-8">
<input class="form-control" placeholder="E-mail" name="email" type="email" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Username</label>
<div class="col-sm-8">
<input class="form-control" placeholder="Username" name="uname" type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
Set the heights of input elements using classes like .input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-* and .col-sm-*.
bootstrap