Bootstrap Input Group

Overview

Many of the features we use in applications to gather site visitor data are offered by the

<input>

tag.

You can effectively spread form controls with adding text message, buttons, or button groups on each part of textual

<input>

-s.

The different varieties of Bootstrap Input Form are determined due to the value of their kind attribute.

Next, we'll show the approved styles for this particular tag.

Text message

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

Quite possibly the absolute most common sort of input, which possesses the attribute

type ="text"

, is put to use when we desire the user to give a elementary textual details, because this kind of element does not let the entry of line breaks.

Anytime sending the form, the information inserted by site visitor is easily accessible on the server side by means of the

"name"

attribute, chosen to detect every data contained in the request specifications.

To get access to the data inputed anytime we handle the form with some type of script, to verify the information as an example, it is essential to gain the information of the value property of the object in the DOM. ( helpful hints)

Security password

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

Bootstrap Input Text that accepts the

type="password"

attribute is very much the same to the text type, apart from that it does not present really the words inserted by the site visitor, on the other hand prefer a group of figures "*" or yet another being dependent on the browser and functional system .

Elementary Bootstrap Input File good example

Place one add-on or button on either side of an input.

<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>

Proportions

Provide the associated form sizing classes to the

.input-group

itself and materials located in will immediately resize-- no necessity for restarting the form command scale classes on every feature.

<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>

Place any kind of checkbox or radio feature inside of an input group’s addon instead of of text.

Checkbox button solution

The input element of the checkbox variation is highly oftentimes applied as we have an option that may possibly be marked as yes or no, such as "I accept the terms of the client contract", or " Possess the active treatment" in applications Login. ( additional hints)

Though frequently utilized together with the value

true

, you are able to determine 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 option

Whenever we like the user to pick a single of a series of opportunities, we have the ability to put into action input elements of the radio option.

In the event that there is over a single feature of this type along with the same value with the name attribute, only one may be picked.

<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

Many different attachments are promoted and might be mixed up with checkbox plus 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 varieties

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

The input element having the

type="button"

attribute renders a switch into the form, though this particular tab has no direct function on it and is usually applied to cause events for script realization.

The button message is detected due to the value of the

"value"

attribute.

Add-ons of the buttons

Buttons in input groups have to be wrapped in a

.input-group-btn

for proper positioning plus scale. This is needed because of the default web browser designs that can definitely not 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 have the ability to be segmented

<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 with the form "submit" attribute is very close to the button, though once generated this particular feature initiates the call that sends out the form details to the place of business indicated in the action attribute of

<form>

Image

You can remove and replace the submit form switch utilizing an image, keeping it feasible to generate a more beautiful design to the form.

Reset

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

The input with

type="reset"

abolishes the values inputed previously in the elements of a form, enabling the user to clean up the form.

<Input> and <button>

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

The

<input>

tag of the button, submit, and reset options may be removed and replaced with

<button>

tag.

In this case, the text of the tab is currently indicated as the information of the tag.

It is still significant to define the value of the type attribute, despite the fact that it is a button.

File

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

It is needed to apply the file type input anytime it is important for the site visitor to send out a information to the application on the server side.

For the precise directing of the data, it is regularly also needed to add in the

enctype="multipart/form-data"

attribute in the

<form>

tag.

Hidden

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

Very often we want to receive and send data that is of no straight utilization to the user and because of this must not be exposed on the form.

For this specific plan, there is the input of the hidden type, that simply carries a value.

Ease of access

In the case that you do not incorporate a label for each and every input, screen readers may have trouble with your forms. For these input groups, make sure that every added label or performance is conveyed to assistive technologies.

The examples in this section provide a few suggested, case-specific approaches.