Bootstrap Input Group

Introduction

Many of the components we put into action in data sheets to get site visitor details are offered by the

<input>

tag.

You can with ease extend form limitations by simply adding words, switches, or switch groups on either side of textual

<input>

-s.

The many different varieties of Bootstrap Input Validation are determined with value of their form attribute.

Next, we'll describe the received styles for this tag.

Text message

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

Perhaps easily the most typical form of input, which features the attribute

type ="text"

, is applied whenever we would like the user to deliver a simple textual details, due to the fact that this particular component does not let the access of line breaks.

Whenever you are providing the form, the data inserted by user is easily accessible on the server side throughout the

"name"

attribute, taken to determine each information included in the request specifications.

In order to gain access to the relevant information typed anytime we deal with the form along with some sort of script, to approve the web content for example, it is important to obtain the materials of the value property of the object in the DOM. ( discover more)

Code

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

Bootstrap Input Group that gets the

type="password"

attribute is similar to the text type, with the exception of that it does not reveal truly the words inserted at the hand of the user, though prefer a number of signs "*" or some other depending on the web browser and functional system .

Standard Bootstrap Input Style 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>

Sizes

Bring in the associated form scale classes to the

.input-group

in itself and items inside will immediately resize-- no need for reproducing the form control 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>

Set any type of checkbox or radio solution within an input group’s addon instead of of text.

Checkbox button feature

The input feature of the checkbox selection is really quite often employed while we have an option that can be marked as yes or no, for instance "I accept the terms of the client contract", alternatively " Manage the active program" in forms Login. ( useful source)

Even if commonly utilized along with the value

true

, you can 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 solution

We can easily employ input features of the radio style while we want the user to choose simply one of a variety of options.

Anytime there is more than just one feature of this style by using the same value with the name attribute, only one have the ability to 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>

Various addons

Several add-ons are maintained and could be put together with checkbox as well as 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: some other buttons variations

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

The input element having the

type="button"

attribute delivers a switch inside the form, still, this specific switch has no straight use upon it and is usually used to generate events with regards to script execution.

The tab text message is established due to the value of the

"value"

attribute.

Add-ons of the buttons

Buttons in input groups must be covered in a

.input-group-btn

for proper positioning as well as sizing. This is expected because of the default web browser designs that can 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 can 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 component together with the option "submit" attribute is identical to the button, however as soon as generated this feature begins the call that transfers the form info to the location indicated in the action attribute of

<form>

Image

You can change the submit form switch by having an picture, making things possible to create a better appealing design for the form.

Reset

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

The input by using

type="reset"

eliminates the values recorded once in the features of a form, enabling the site visitor to clean up the form.

<Input> and <button>

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

The

<input>

tag of the switch, submit, and reset types may possibly be changed by the

<button>

tag.

Within this case, the text of the button is now indicated as the content 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 when it is important for the site visitor to send out a file to the application on the server side.

For the precise delivering of the data, it is quite often as well important to provide the

enctype="multipart/form-data"

attribute in the

<form>

tag.

Hidden

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

Very often we require to send and receive information that is of no absolute utilization to the user and because of this really should not be revealed on the form.

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

Convenience

If you fail to include a label for each input, display readers will have difficulty with your forms. For these types of input groups, ensure that every extra label or functionality is conveyed to assistive technologies.

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