Forms

The framework comes with a bunch of input style utility classes out of the box. Details are as follows:-


  • form-control - special class to be applied on input fields
  • form-error - used to indicate input error validation
  • form-success - used to indicate input success validation

Text input

<div class="row">
   <div class="col">
      <label for="test">Test</label>
      <input class="form-control" placeholder="testing" /> 
      <div class="small text-muted">Enter something</div>
   </div>
</div>
Enter something

Text area

<div class="row">
   <div class="col">
      <label for="test">Test</label>
      <textarea class="form-control" placeholder="testing" rows="4"></textarea> 
      <div class="small text-muted">Enter something</div>
   </div>
</div>
Enter something

Selects

<div class="row">
   <div class="col">
      <label for="test">Test</label>
      <select class="form-control" aria-label="Default select example">
         <option selected>Open this select menu</option>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
      </select>
      <div class="small text-muted">Enter something</div>
   </div>
</div>
Enter something

Radio

<label for="radio">Radio</label>
<div>
   <input  type="radio" name="flexRadioDefault" >
   <label  for="flexRadioDefault1">
   a
   </label>
</div>
<div>
   <input  type="radio" name="flexRadioDefault" >
   <label  for="flexRadioDefault1">
   b
   </label>
</div>

Checkbox

<div>
  <input  type="checkbox" value="" id="flexCheckDefault">
  <label  for="flexCheckDefault">
    Default checkbox
  </label>
</div>
<div>
  <input  type="checkbox" value="" id="flexCheckChecked" checked>
  <label  for="flexCheckChecked">
    Checked checkbox
  </label>
</div>

File input

<div class="form-group">
   <label class="input-group-text" for="inputGroupFile01">Upload</label>
  <input type="file" class="form-control" id="inputGroupFile01">
</div>

Form errors

<div class="row">
   <div class="col">
      <label for="test">Test</label>
      <input class="form-control form-error" placeholder="testing" value="error" /> 
      <div class="small text-danger">Contains errors</div>
   </div>
</div>
Contains errors

Form success

<div class="row">
   <div class="col">
      <label for="test">Test</label>
      <input class="form-control form-success" placeholder="testing" value="success" /> 
      <div class="small text-success">Success</div>
   </div>
</div>
Success

Inline form inputs

To handle inline forms simply use our row column grid system as shown below

<div class="row">
   <div class="col-6">
      <label for="test">Test</label>
      <input class="form-control" placeholder="testing" /> 
      <div class="small text-muted">Enter something</div>
   </div>
  <div class="col-6">
      <label for="test">Test</label>
      <input class="form-control" placeholder="testing" /> 
      <div class="small text-muted">Enter something</div>
   </div>
</div>
Enter something
Enter something
laurel laurel

Join thousands of
satisfied customers

Try IgnitedCMS today!