Bootstrap 3 - SPLessons

Bootstrap Form

Chapter 10

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Bootstrap Form

Bootstrap Form

shape Description

HTML Forms plays a major role in all web, windows, and mobile applications. Most of the companies are looking for single application for all the devices. With the help of Bootstrap, forsm can be made more responsive and stable without writing a single line of CSS code. In Bootstrap Form chapter, how to use Bootstrap form class in HTML forms is explained.

Bootstrap’s Form Default Settings

All the individual form controls, by default, receives some global styling with Bootstrap. All textual <input>, <textarea>, and <select> elements with .form-control are set to width 100% by default. Wrap labels and controls in .form-group for optimum spacing.

Form Layouts

shape Layouts

Bootstrap provides three types of Layouts.

Basic Steps to Follow

shape Steps

  • Always wrap the content in form tag.
  • To improve form accessibility always set <form> tag attribute role="form" eg: <form role="form">
  • Place all the form controls in .form-group for proper spacing between form elements. eg: <div class="form-group">

shape Example

Bootstrap form example is as follows.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrp From</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
	    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </head>
  <body>
    
	<div class="container">
    
		  <h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Vertical Form </a> </h2>
    
    <form>
		  <div class="form-group">
			<label for="exampleInputEmail1">Email address</label>
			<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
		  </div>
		  
		  <div class="form-group">
			<label for="exampleInputPassword1">Password</label>
			<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		  </div>
		  <button type="submit" class="btn btn-default">Submit</button>
	</form>
    </div> 
	
  </body>
</html>

Output:

Bootstrap Inline Form

shape Description

Add .form-inline to form (which doesn’t have to be a <form>) such that it is left-aligned and inline-block controls.

shape Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrp From</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
  </head>
  <body>
    
  <div class="container">
    
    <h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Inline form </a> </h2>
    
    <form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="John Abraham">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="me@johnab.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
     
  </div> 
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    
  </body>
</html>
    

Output:

Bootstrap Inline Form Another Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrp From</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
	    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </head>
  <body>
    
	<div class="container">
    
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Inline form </a> </h2>
    
		<form class="form-inline">
			<div class="form-group">
				<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
					<div class="input-group">
						<div class="input-group-addon">$</div>
							<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
						<div class="input-group-addon">.00</div>
					</div>
			</div>
			<button type="submit" class="btn btn-primary">Transfer cash</button>
		</form>
    </div>
  
  </body>
</html>

Output:

Bootstrap Horizontal form

shape Description

Use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn’t have to be a <form>).

shape Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
	
    <title>SPLessons - Bootstrp From</title>
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </head>
  <body>
    
	<div class="container">
    
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Horizontal form </a> </h2>
    
		<form class="form-horizontal">
			<div class="form-group">
				<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
				</div>
			</div>
  
		    <div class="form-group">
				<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
				  <div class="checkbox">
					<label>
					  <input type="checkbox"> Remember me
					</label>
				  </div>
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">Sign in</button>
				</div>
			</div>
		</form>
    
	</div>
    
  </body>
</html>

Output:

Bootstrap Validation states

shape Description

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add

  • .has-warning
  • .has-error
  • .has-success

shape Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>SPLessons - Bootstrp From</title>
	
    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet">   
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	
  </head>
  <body>
    
	<div class="container">
    
		<h2> <a href="https://www.splessons.com/lesson/bootstrap-3-tutorial/"> Bootstrap Validation states </a> </h2>
    
		<div class="form-group has-success">
		  <label class="control-label" for="inputSuccess1">Input with success</label>
		  <input type="text" class="form-control" id="inputSuccess1">
		</div>
		<div class="form-group has-warning">
		  <label class="control-label" for="inputWarning1">Input with warning</label>
		  <input type="text" class="form-control" id="inputWarning1">
		</div>
		<div class="form-group has-error">
		  <label class="control-label" for="inputError1">Input with error</label>
		  <input type="text" class="form-control" id="inputError1">
		</div>
		<div class="has-success">
		  <div class="checkbox">
			<label>
			  <input type="checkbox" id="checkboxSuccess" value="option1">
			  Checkbox with success
			</label>
		  </div>
		</div>
		<div class="has-warning">
		  <div class="checkbox">
			<label>
			  <input type="checkbox" id="checkboxWarning" value="option1">
			  Checkbox with warning
			</label>
		  </div>
		</div>
		<div class="has-error">
		  <div class="checkbox">
			<label>
			  <input type="checkbox" id="checkboxError" value="option1">
			  Checkbox with error
			</label>
		  </div>
		</div>
	</div>
    
  </body>
</html>

Output:

Summary

shape Key Points

  • Class form-group wraps the form-control elements.
  • Vertical,Horizontal and Inline are three types of layouts in forms.
  • Grid classes are used to align labels and groups of form controls in a horizontal layout.