We can create an attractive form with Bootstrap framework. the following code will elaborate how to create a simple form with Bootstrap
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" id="signup" method='post' action=''>
<fieldset>
<legend>Registration Form</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter Your name." data-original-title="Full Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">
</div>
</div>
<div class="control-group">
<label class="control-label">Date of Birth</label>
<div class="controls">
<input type="date" class="input-xlarge" id="dob" name="dob" rel="popover" data-content="your email" data-original-title="dob">
</div>
</div>
<div class="control-group">
<label class="control-label">Gender</label>
<div class="controls">
Male<input type="radio" class="input-xlarge" id="gen" name="gen" rel="popover" data-content="gender" data-original-title="gen">
FeMale<input type="radio" class="input-xlarge" id="gen" name="gen" rel="popover" data-content="gender" data-original-title="gen">
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" >Sign Up</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
Bootstrap Example
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" id="signup" method='post' action=''>
<fieldset>
<legend>Registration Form</legend>
<div class="control-group">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter Your name." data-original-title="Full Name">
</div>
</div>
<div class="control-group">
<label class="control-label">Email</label>
<div class="controls">
<input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">
</div>
</div>
<div class="control-group">
<label class="control-label">Date of Birth</label>
<div class="controls">
<input type="date" class="input-xlarge" id="dob" name="dob" rel="popover" data-content="your email" data-original-title="dob">
</div>
</div>
<div class="control-group">
<label class="control-label">Gender</label>
<div class="controls">
Male<input type="radio" class="input-xlarge" id="gen" name="gen" rel="popover" data-content="gender" data-original-title="gen">
FeMale<input type="radio" class="input-xlarge" id="gen" name="gen" rel="popover" data-content="gender" data-original-title="gen">
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button type="submit" class="btn btn-success" >Sign Up</button>
</div>
</div>
</fieldset>
</form>
</body>
</html>
Output
Posts
No comments:
Post a Comment