- SPLessons

Registration Form With Bootstrap

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Registration Form With Bootstrap

Description :

Hi Friends , Today in this article we are going to  show you  how to create a responsive registration form with bootstrap.

What is Bootstrap ?

Bootstrap is an  open-source framework developed by Twitter  for front end developers to make responsive and beautiful  websites in less time . It is a combination of HTML , CSS and JavaScript and it is support to both HTML5 and CSS3 .

 

 

Step1 :

Add below code in HTML head


<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/datepicker.css">
<link rel="stylesheet" href="css/registration-form-with-bootstarp.css">

Step2 :

Add below code in HTML body


<div class="container">
<div class="row">
<div class="page-header">
<h1>Registration Form With Bootstrap</h1>
</div>
<form class="form-horizontal" role="form" method="post" action="#">

<div class="form-group">
<label for="firstName" class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-6">
<input type="text" name="firstName" class="form-control" id="firstName" placeholder="First Name">
</div>
</div>

<div class="form-group">
<label for="lastName" class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-6">
<input type="text" name="lastName" class="form-control" id="lastName" placeholder="Last Name">
</div>
</div>

<div class="form-group">
<label for="" class="col-sm-2 control-label">Gender:</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="gender" id="gender1" value="male">Male
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2" value="female">Female
</label>

</div>
</div>

<div class="form-group">
<label for="dob" class="col-sm-2 control-label">DOB:</label>
<div class="col-sm-6">
<input type="text" name="dob" class="form-control datepicker" id="dob" placeholder=" Date of Birth">
</div>
</div>

<div class="form-group">
<label for="userName" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-6">
<input type="email" name="userName" class="form-control" id="userName" placeholder="User Name">
</div>
</div>

<div class="form-group">
<label for="passwd" class="col-sm-2 control-label">Password:</label>
<div class="col-sm-6">
<input type="password" name="passwd" class="form-control" id="passwd" placeholder="Password">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="register">Register</button>
</div>
</div>

</form>

</div><!-- end for class "row" -->
</div><!-- end for class "container" -->

Add below code in End of HTML body


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/registration-form-with-bootstarp.js"></script>