Scribd
Upload
9 views10 pages

Lecture 4

The document discusses three types of Bootstrap form layouts: vertical, inline, and horizontal. It provides code examples and explanations for implementing each type of form layout in Bootstrap. It also covers additional form control topics like disabled inputs, readonly inputs, and validation states.

Uploaded by

Markos Mathewos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views10 pages

Lecture 4

The document discusses three types of Bootstrap form layouts: vertical, inline, and horizontal. It provides code examples and explanations for implementing each type of form layout in Bootstrap. It also covers additional form control topics like disabled inputs, readonly inputs, and validation states.

Uploaded by

Markos Mathewos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Bootstrap Form Layouts

Bootstrap provides three types of form layouts:


- Vertical form (this is default)

- Inline form

- Horizontal form

Bootstrap Vertical Form (default)


- Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)
- Add class form-control to all textual <input>, <textarea>, and <select> elements
Put this line of code after you <body>
tag

<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">

<div class=" panel panel-red ">


<div class="panel-heading">Bootstrap Vertical Form (default)</div>
<div class="panel-body">

<form action = "<?php $_PHP_SELF ?>" method = "POST">

<!-- ID Number Label and Text -->


<div class="form-group">
<label for="ID"> ID Number</label>
<input type="text" class="form-control" name="txtID" placeholder="Enter Your ID Number" required>
</div>

<!--Student Name Label and Text -->


<div class="form-group">
<label for="Name">Student Name</label>
<input type="text" class="form-control" name="txtname" placeholder="Enter your Name" required>
</div>

<!--Department Label and Text -->


<div class="form-group">
<label for="Department">Department</label>
<select class="form-control" name="txtdepartment">
<option>ICT</option>
<option>Automotive</option>
<option>Construction</option>
<option>Manufacturing</option>
<option>Electrical-Electronics</option>
<option>Garments</option>
<option>Railways</option>
</select>
</div>

<!-- Submit and Reset Button -->


<div class="form-group">
<button type="submit" class="btn btn-danger" name="submit">Submit</button>
<button type="reset" class="btn btn-danger" name="reset">Clear</button>
</div>

</form>

</div>
<div class="panel-footer"> Using Bootstrap Vertical Form (default) </div>
</div>

</div>
</div>
</div>

Tip: If you don't include a label for every input, screen readers will have trouble with your forms. You
can hide the labels for all devices, except screen readers, by using the sr-only class:
Bootstrap Inline Form
- In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.
- Note: This only applies to forms within viewports that are at least 768px wide!

Additional rule for an inline form:


- Add class form-inline to the <form> element

<div class="container">
<div class="row">
<div class="col-md-12">

<div class=" panel panel-red ">


<div class="panel-heading"> Bootstrap Inline Form</div>
<div class="panel-body">

<form class="form-inline" action = "<?php $_PHP_SELF ?>" method = "POST">

<!-- ID Number Label and Text -->


<div class="form-group">
<label for="ID"> ID Number</label>
<input type="text" class="form-control" name="txtID" placeholder="Enter Your ID Number" required>
</div>

<!--Student Name Label and Text -->


<div class="form-group">
<label for="Name">Student Name</label>
<input type="text" class="form-control" name="txtname" placeholder="Enter your Name" required>
</div>

<!--Department Label and Text -->


<div class="form-group">
<label for="Department">Department</label>
<select class="form-control" name="txtdepartment">
<option>ICT</option>
<option>Automotive</option>
<option>Construction</option>
<option>Manufacturing</option>
<option>Electrical-Electronics</option>
<option>Garments</option>
<option>Railways</option>
</select>
</div>

<!-- Submit and Reset Button -->


<div class="form-group">
<button type="submit" class="btn btn-danger" name="submit">Submit</button>
<button type="reset" class="btn btn-danger" name="reset">Clear</button>
</div>

</form>

</div>
<div class="panel-footer"> Using Bootstrap Inline Form</div>
</div>

</div>
</div>
</div>
Bootstrap Horizontal Form
- A horizontal form stands apart from the other forms both in the amount of markup, and in
the presentation of the form.
- Add class form-horizontal to the <form> element
- Add class control-label to all <label> elements
- Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.

<div class="container">
<div class="row">
<div class="col-md-8">

<div class=" panel panel-red ">


<div class="panel-heading"> Bootstrap Horizontal Form</div>
<div class="panel-body">

<form class="form-horizontal" action = "<?php $_PHP_SELF ?>" method = "POST">

<!-- ID Number Label and Text -->


<div class="form-group">
<label class="control-label col-sm-2" for="ID"> ID Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtID" placeholder="Enter Your ID Number" required>
</div>
</div>

<!--Student Name Label and Text -->


<div class="form-group">
<label class="control-label col-sm-2" for="Name">Student Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="txtname" placeholder="Enter your Name" required>
</div>
</div>

<!--Department Label and Text -->


<div class="form-group">
<label class="control-label col-sm-2" for="Department">Department</label>
<div class="col-sm-10">
<select class="form-control" name="txtdepartment">
<option>ICT</option>
<option>Automotive</option>
<option>Construction</option>
<option>Manufacturing</option>
<option>Electrical-Electronics</option>
<option>Garments</option>
<option>Railways</option>
</select>
</div>
</div>

<!-- Submit and Reset Button -->


<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button type="submit" class="btn btn-danger" name="submit">Submit</button>
<button type="reset" class="btn btn-danger" name="reset">Clear</button>
</div>
</div>
</form>

</div>
<div class="panel-footer"> Using Bootstrap Horironzal Form</div>
</div>

</div>
</div>
</div>
Bootstrap Form Control States

DISABLED INPUTS
- Add a disabled attribute to disable an input field

Example

<div class="form-group">
<label for="Name"> Disable Text</label>
<input type = "text" class="form-control" name = "txtname" placeholder="Disabled Text" required disabled />
</div>

<div class="form-group">
<label for="Department">Disabled Select</label>
<select class="form-control" name="txtdepartment" disabled>
<option>ICT</option>
<option>Automotive</option>
<option>Construction</option>
<option>Manufacturing</option>
<option>Electrical-Electronics</option>
<option>Garments</option>
<option>Railways</option>
</select>
</div>

<div class="form-group">
<button type="submit" name="submit" class="btn btn-block btn-social btn-primary" disabled><i class="fa fa-bitbucket"></i>
Disabled Button</button>
</div>

READONLY INPUTS
- Add a readonly attribute to an input to prevent user input

Example

<div class="form-group">
<label for="Name"> ReadOnly Text</label>
<input type = "text" class="form-control" name = "txtname" placeholder="Readonly Text" required readonly />
</div>
VALIDATION STATES
- Bootstrap includes validation styles for error, warning, and success messages.
- To use, add has-warning, has-error, or has-success to the parent

element Example:

<div class="form-group has-warning">


<label for="Name"> Has Warning</label>
<input type = "text" class="form-control" name = "txtname" placeholder="Enter Your Name" required/>
</div>

<div class="form-group has-error">


<label for="Name"> Has Warning</label>
<input type = "text" class="form-control" name = "txtname" placeholder="Enter Your Name" required/>
</div>

<div class="form-group has-success">


<label for="Name"> Has Warning</label>
<input type = "text" class="form-control" name = "txtname" placeholder="Enter Your Name" required/>
</div>

ICONS
- You can add feedback icons with the has-feedback class and an icon

<div class="form-group has-warning has-feedback">


<label for="Name"> Has Warning</label>
<input type = "text" class="form-control" name = "txtname" placeholder="Enter Your Name" required/>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>

<div class="form-group has-error has-feedback">


<label for="Name"> Has Error</label>
<input type = "text" class="form-control" name = "txtname" placeholder="Enter Your Name" required/>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group has-success has-feedback">
<label for="Name"> Has Success</label>
<input type = "text" class="form-control" name = "txtname" placeholder="Enter Your Name" required/>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>

INPUT GROUPS
- Include the input-group under your <div class="form-group">
- Use <span class="input-group-addon"> for the icon or text.

<div class="form-group input-group">


<span class="input-group-addon">@</span>
<input type = "text" class="form-control" name = "txtuname" required/>
</div>

<div class="form-group input-group">


<input type = "text" class="form-control" name = "txtamount" required/>
<span class="input-group-addon">.00</span>
</div>

<div class="form-group input-group">


<span class="input-group-addon"><i class="fa fa-eur"></i></span>
<input type = "text" class="form-control" name = "txtamount" required/>
</div>

<div class="form-group input-group">


<span class="input-group-addon">$</span>
<input type = "text" class="form-control" name = "txtamount" required/>
<span class="input-group-addon">.00</span>
</div>

HIDDEN LABELS
- Add a sr-only class on non-visible labels
Try the following:

1. Formlayout.php

2. Formlayout2.php
3. Employee.php

Use the following icons

You might also like