Bootstrap Input Group

Overview

The majority of the features we use in forms to gather user details are coming from the

<input>

tag.

You can effectively stretch form dominions via providing text, switches, or else button groups on each side of textual

<input>

-s.

The different kinds of Bootstrap Input File are identified with value of their kind attribute.

Next, we'll detail the allowed kinds regarding this specific tag.

Text message

<Input type ="text" name ="username">

Possibly some of the most frequent style of input, which comes with the attribute

type ="text"

, is utilized whenever we need the user to provide a elementary textual details, given that this kind of feature does not enable the entering of line breaks.

When launching the form, the data inputed by the site visitor is easily accessible on the server side through the

"name"

attribute, taken to detect each and every info incorporated in the request parameters.

In order to access the relevant information typed in anytime we handle the form together with some sort of script, to confirm the information for example, it is required to receive the information of the value property of the object in the DOM. ( check this out)

Password

<Input type="password" name="pswd">

Bootstrap Input Field that receives the

type="password"

attribute is identical to the text type, with the exception that it does not display truly the text inputed at the hand of the site visitor, on the other hand rather a set of symbols "*" otherwise yet another being dependent on the web browser and functional system .

Standard Bootstrap Input Field scenario

Place one attachment or button on either side of an input. You may additionally put a single one on both of parts of an input. Bootstrap 4 does not establishes different form-controls within a special input group.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<br>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <span class="input-group-addon">0.00</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>

Size

Incorporate the relative form proportions classes to the

.input-group

itself and items inside will automatically resize-- no urgency for reproducing the form regulation sizing classes on every single element.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<br>
<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

Put any checkbox or radio option in an input group’s addon as an alternative to of text.

Checkbox button solution

The input aspect of the checkbox variation is highly frequently utilized if we have an option that can possibly be registered as yes or no, such as "I accept the terms of the buyer contract", or possibly " Maintain the active program" in forms Login. ( read more here)

Widely used with the value

true

, you can certify any value for the checkbox.

<div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="Checkbox for following text input">
      </span>
      <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>
</div>

Radio button possibility

We can use input features of the radio option while we need the user to pick only one of a set of selections.

Solely one can be chosen whenever there is higher than just one feature of this particular style by using the identical value in the name attribute.

<div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="Radio button for following text input">
      </span>
      <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
</div>

Several addons

Different add-ons are provided and may be put together with checkbox and radio input versions.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="Checkbox for following text input">
      </span>
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <span class="input-group-addon">0.00</span>
      <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
  </div>
</div>

Input group: additional buttons variations

<Input type ="button" name ="show_dialogue" value ="Click here!">

The input feature utilizing the

type="button"

attribute delivers a tab in the form, yet this specific tab has no straight use on it and is generally used to trigger events when it comes to script realization.

The tab content is detected by the value of the

"value"

attribute.

Add-ons of the buttons

Buttons in input groups need to be covered in a

.input-group-btn

for proper placement and also sizing. This is expected because of the default web browser designs that can not actually be overridden.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
      </span>
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="col-lg-offset-3 col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Hate it</button>
      </span>
      <input type="text" class="form-control" placeholder="Product name">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Love it</button>
      </span>
    </div>
  </div>
</div>

Drop-down buttons

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>
  </div>
</div>

Buttons can be segmented

$Buttons have the ability to be fractional$

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary">Action</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary">Action</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>
  </div>
</div>

Submit

<Input type ="submit" name ="send" value ="Submit">

The input feature having the type "submit" attribute is identical to the button, though when activated this feature initiates the call that sends the form data to the address signified in the action attribute of

<form>

Image

You can surely change the submit form switch with an picture, making things achievable to create a better appealing effect for the form.

Reset

<Input type="reset" name="reset" value="Clear">

The input together with

type="reset"

eradicates the values typed earlier in the features of a form, making it possible for the user to clean up the form.

<Input> and <button>

<Button type="button" name="send"> Click here </button>

The

<input>

tag of the tab, submit, and reset types can possibly be substituted with

<button>

tag.

Within this instance, the content of the button is now indicated as the information of the tag.

It is still required to define the value of the type attribute, even if it is a button.

File

<Input type ="file" name ="attachment">

It is needed to work with the file type input if it is necessary for the site visitor to send a file to the application on the server side.

For the correct providing of the data, it is regularly also required to incorporate the

enctype="multipart/form-data"

attribute in the

<form>

tag.

Hidden

<Input type="hidden" name ="code" value ="abc">

Commonly we really need to receive and send info which is of no direct use to the user and that is why really should not be displayed on the form.

For this specific goal, there is the input of the hidden type, which in turn only brings a value.

Availability

Display readers will certainly have trouble with your forms if you don't feature a label for every input. For these types of input groups, ensure that every added label or performance is sent to assistive technologies.

The exact approach to become taken (

<label>

features hidden using the

. sr-only

class, or else use the

aria-label

aria-labelledby

aria-describedby

title

placeholder

attribute) and exactly what extra information will definitely must be shared will range basing on the specific option of interface widget you're using. The examples within this section grant a few advised, case-specific methods.