Hai everyone using this tutorial you can easily create
responsive form using bootstrap. There are lot of twitter bootstrap responsive registration and contact form examples in internet but not found the exact one. So i decided to give correct example and you can also customize this form according to your requirements. I have studied and done this example according to latest version bootstrap, so please download the bootstrap version 3.1.1 because bootstrap has made lot of changes
in this version.
Screenshot
Source Code
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
<title>Responsive Registration Form</title>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">New Registration Form</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="name"
placeholder="Enter u r name here">
</div>
</div>
<div class="form-group">
<label for="gmail" class="col-sm-2 control-label">Gmail</label>
<div class="col-sm-10">
<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="">
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pass">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm your password
</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="confirmpass">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<div class="radio-inline">
<label>
<input id="radiobutton1" name="sampleradiobutton" value="" type="radio">
Male</label>
</div>
<div class="radio-inline">
<label>
<input id="radiobutton2" name="sampleradiobutton" value="" type="radio">
Female</label>
</div>
</div>
</div>
<div class="form-group">
<label for="State" class="col-sm-2 control-label">State</label>
<div class="col-sm-10">
<select class="form-control">
<option>Andhra Pradesh</option>
<option>Karnataka</option>
<option>Kerala</option>
<option>Tamilnadu</option>
</select>
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<textarea name="" cols="" rows="" class="form-control"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">I accept terms and conditions
</label>
</div>
</div>
</div>
</form>
</div>
<div class="panel-footer" style="overflow:hidden;text-align:right;">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success btn-sm">Submit</button>
<button type="submit" class="btn btn-default btn-sm">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
:-d
ReplyDeleteKeep up the good work , I read few posts on this web site and I conceive that your blog is very interesting
ReplyDeletemua ve may bay gia re tu Nhat Ban ve Viet Nam
vé máy bay giá rẻ tu Dai Loan ve Viet Nam
combo du lịch quy nhơn 3 ngày 2 đêm
combo đi đà lạt giá rẻ
combo hà nội nha trang 4 ngày 3 đêm
combo phú quốc 3n2d