Forms in Bootstrap usually use three types of layouts and they are provided below:
- Vertical: It is also known as basic form. For creating these types of forms the developer needs to add a role form to the parent <form > element.
- Inline form: It is required for the case in which all the elements are inline and aligned left. For creating these types of forms labels should b alongside and the class .form-inline should be to the <form> tag.
- Horizontal form: For creating this form the developer needs to add a class which is of .form-horizontal to the parent <form> element. A class called .control-label should also be added to the labels.
Below is a simple example of Bootstrap form:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>nirajanghimirey's workshop</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Example of Form</h1>
<form role="form">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username" placeholder="User Name"/>
</div>
<div class="form-group">
<label for="pass">Password:</label>
<input type="password" class="form-control" id="pass" placeholder="Password"/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Email Address"/>
</div>
<div class="checkbox">
<label><input type="checkbox"/> Remember me</label>
</div>
<div class="input-group">
<label for="male">Male:</label>
<input type="radio" value="male" id="male" name="gender" checked/>
<label for="female">Female:</label>
<input type="radio" value="male" id="female" name="gender"/>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html
No comments:
Post a Comment