Formsv4.x

Use forms to capture related data from users.

Bootstrap 4.x | Forms


Form Fields

  • EXAMPLES
  • Input | email
  • Input | password
  • Checkbox
  • Select
  • Textarea
  • Radio Buttons
  • Form Buttons

We'll never share your email with anyone else.


<form action="">

  <!-- Email Input -->
  <div class="form-group">
    <label for="exampleInputEmail1">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>

  <!-- Password Input -->
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>

  <!-- Checkbox input -->
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Checkbox</label>
  </div>

  <!SELECT>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <!-- Text area -->
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>

  <!-- Radio buttons -->
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
    <label class="form-check-label" for="exampleRadios1">
      Radio Button 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
    <label class="form-check-label" for="exampleRadios2">
      Radio Button 2
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
    <label class="form-check-label" for="exampleRadios3">
      Radio Button 3
    </label>
  </div>

  <hr>

  <!-- Submit buttons -->
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="submit" class="btn btn-light text-primary">Cancel</button>

</form>

This will reset the page. Are you sure?