Bootstrap3 Form

Form

Steps

  1. Use form-group
  2. Add control-label to label tag
  3. Add form-control to input
  4. Add form-control-static to text(p tag etc…)
  5. Wrap radio class in radio button label
  6. Add help-block to explanation
  7. Add btn class to button

Change size of control

  • small input-sm
  • large input-lg

Example

<h1>Quick Form</h1>
   <div class="container">
      <p>Fill in</p>
      <from method="post" action="">
         <div class="form-group">
            <label for="title" class="control-label">Title</label>
            <input type="text" name="title" id="title" placeholder="Input title" class="form-control input-lg">
         </div>
         <div class="form-group">
            <label for="name" class="control-label">Name</label>
            <input type="text" name="name" id="name" placeholder="Input name" class="form-control">
         </div>
         <div class="form-group">
            <label for="date" class="control-label">Date</label>
            <p class="form-control-static">2014/08/17</p>
            <input type="hidden" name="date" value="2014-08-17">
         </div>	
         <div class="form-group">	
            <label for="email" class="control-label">Mail Address</label>
            <input type="text" name="email" id="email" placeholder="Fill mail address" class="form-control"><br>
         </div>			
         <div class="form-group">
            <p class="control-label"><strong>Sex</strong></p>
            <div class="radio">
               <input type="radio" value="1" name="gender" id="man">
               <label for="man">Man</label>
            </div>
            <div class="radio">
               <input type="radio" value="2" name="gender" id="woman">
               <label for="woman">Woman</label>
            </div>
         </div>
         <div class="form-group">
            <p class="control-label"><strong>OS</strong></p>
            <div class="checkbox">
               <input type="checkbox" value="windows" name="os" id="os_windows">
               <label for="os_windows">Windows</label>
            </div>
         <div class="checkbox">
            <input type="checkbox" value="macos" name="os" id="os_macos">
            <label for="os_windows">Mac</label>
          </div>	
         <div class="checkbox">
            <input type="checkbox" value="android" name="os" id="os_android">
            <label for="os_windows">Android</label>
         </div>
         <div class="checkbox">
            <input type="checkbox" value="ios" name="os" id="os_ios">
            <label for="os_windows">iOS</label>
         </div>
      </div>
      <div class="form-group">
         <p class="control-label input-sm"><strong>Age</strong></p>
         <select name="age" id="age" class="form-control">
            <option value="10">10s'</option>
            <option value="20">20s'</option>
            <option value="30">30s'</option>
            <option value="40">40s'</option>
            <option value="50">50s'</option>
            <option value="60">Over 60</option>
         </select>
      </div>
      <div class="form-group">
         <label for="body" class="control-label">Comment</label>
            <textarea name="body" id="body" cols="40" rows="5" placeholder="Write comment" class="form-control"></textarea>
            <p class="help-block">Max 1000 characters</p>
      </div>
      <input type="submit" value="Send" class="btn btn-primary">&nbsp;
      <input type="reset" value="cancel" class="btn btn-default">
   </form>
</div>

form1
form2

Horizontal

Add form-holizontal to form tag class

Example

<h1>Quick Form</h1>
		<div class="container">
		<p>Fill in</p>
		<from method="post" action="" class="form-holizontal">
			<div class="form-group">
				<label for="title" class="control-label col-sm-4">Title</label>
				<div class="col-sm-8">
					<input type="text" name="title" id="title" placeholder="Input title" class="form-control input-lg">
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="control-label col-sm-4">Name</label>
				<div class="col-sm-8">
					<input type="text" name="name" id="name" placeholder="Input name" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<label for="date" class="control-label col-sm-4">Date</label>
				<div class="col-sm-8">
					<p class="form-control-static">2014/08/17</p>
					<input type="hidden" name="date" value="2014-08-17">
				</div>
			</div>	
			<div class="form-group">	
				<label for="email" class="control-label col-sm-4">Mail Address</label>
				<div class="col-sm-8">
					<input type="text" name="email" id="email" placeholder="Fill mail address" class="form-control"><br>
				</div>
			</div>			

			<div class="form-group">
				<p class="control-label col-sm-4"><strong>Sex</strong></p>
				<div class="col-sm-8">
					<div class="radio">
						<input type="radio" value="1" name="gender" id="man">
						<label for="man">Man</label>
					</div>
					<div class="radio">
						<input type="radio" value="2" name="gender" id="woman">
						<label for="woman">Woman</label>
					</div>
				</div>
			</div>
			
			<div class="form-group">
				<p class="control-label col-sm-4"><strong>OS</strong></p>
					<div class="col-sm-8">
					<div class="checkbox">
						<input type="checkbox" value="windows" name="os" id="os_windows">
						<label for="os_windows">Windows</label>
					</div>
					
					<div class="checkbox">
						<input type="checkbox" value="macos" name="os" id="os_macos">
						<label for="os_windows">Mac</label>
					</div>	
					
					<div class="checkbox">
						<input type="checkbox" value="android" name="os" id="os_android">
						<label for="os_windows">Android</label>
					</div>
					
					<div class="checkbox">
						<input type="checkbox" value="ios" name="os" id="os_ios">
						<label for="os_windows">iOS</label>
					</div>
					</div>
			</div>
			
			<div class="form-group">
				<p class="control-label col-sm-4"><strong>Age</strong></p>
				<div class="col-sm-8">
					<select name="age" id="age" class="form-control">
						<option value="10">10s'</option>
						<option value="20">20s'</option>
						<option value="30">30s'</option>
						<option value="40">40s'</option>
						<option value="50">50s'</option>
						<option value="60">Over 60</option>
					</select>
				</div>
			</div>
			
			<div class="form-group">
				<label for="body" class="control-label col-sm-4">Comment</label>
				<div class="col-sm-8">
					<textarea name="body" id="body" cols="40" rows="5" placeholder="Write comment" class="form-control"></textarea>
					<p class="help-block">Max 1000 characters</p>
				</div>
			</div>
			
			<div class="text-center">
				<input type="submit" value="Send" class="btn btn-primary">&nbsp;
				<input type="reset" value="cancel" class="btn btn-default">
			</div>
		</form>
		</div>

Inline form

<div class="container">
   <form action="" class="form-inline text-right">
      <div class="form-group">
         <label class="control-label sr-only">User name</label>
         <input type="text" name="username" placeholder="User name" class="form-control input-sm">
      </div>
      <div class="form-group">
         <label class="control-label sr-only">Password</label>
         <input type="password" name="password" placeholder="password" class="form-control input-sm">
      </div>
      <input type="submit" class="btn btn-default" value="signin">
   </form>
   <h1>Contents title</h1>
   <p>Contents</p>
</div>

inline form

Button

Button and link

Show link as button btn-link
Show button as link btn

<from action="">
   <a href="index.html" class="btn btn-default">Button(Link)</a><br>
   <button class="btn-link">Link(Button)</button>
</form>	

Alert

Crete box for alert

  • alert-success
  • alert-info
  • alert-warning
  • alert-danger
<div class="alert alert-danger">Error : title is blank</div>
<div class="alert alert-warning">Warning : not set sex</div>

With close button

<div class="alert alert-danger alert-dismissable">
	<button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
Error : <a herf="#titleline" class="alert-link">title</a> is blank
</div>

Add error to element

control-label is required

  • has-success
  • has-warning
  • has-error
<div class="form-group has-error">
   <a name="titleline"></a><label for="title" class="control-label col-sm-4">Title</label>
   <div class="col-sm-8">
      <input type="text" name="title" id="title" placeholder="Input title" class="form-control input-lg">
   </div>
</div>

Email Input

Use input-group-addon

<div class="input-group">
    <span class="input-group-addon"><input type="checkbox" name="regist"></span>
	<input type="text" name="username" class="form-control" size="8">
	<span class="input-group-addon">@</span>
	<input type="text" name="domain" class="form-control">
	<span class="input-group-btn">
		<input type="submit" value="Register" class="btn btn-primary">
	</span>
</div>

email input

Group size

  • btn-group-xs
  • btn-group-sm
  • btn-group-lg