Bootstrap Input Group

Introduction

A lot of the components we utilize in documents to get user data are coming from the

<input>

tag.

You may effectively add to form directions by providing text message, tabs, or possibly tab groups on each part of textual

<input>

-s.

The different types of Bootstrap Input Form are established with value of their option attribute.

Next, we'll describe the accepted types regarding this particular tag.

Message

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

Most likely the absolute most common type of input, which comes with the attribute

type ="text"

, is put to use each time we desire the user to give a elementary textual data, considering that this specific element does not enable the entry of line breaks.

Whenever sending the form, the data inputed by the site visitor is accessible on the server side through the

"name"

attribute, utilized to identify every related information incorporated in the request parameters.

To have access to the information entered if we treat the form with some type of script, to confirm the information for example, it is required to receive the components of the value property of the object in the DOM. ( more hints)

Code

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

Bootstrap Input Style that accepts the

type="password"

attribute is quite similar to the text type, except that it does not show truly the text typed by the user, but prefer a chain of signs "*" or some other according to the web browser and functional system .

Elementary Bootstrap Input Box illustration

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>

Sizing

Bring in the related form sizing classes to the

.input-group

in itself and details located in will immediately resize-- no requirement for restarting the form control sizing 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>

Insert any sort of checkbox or radio option inside of an input group’s addon in place of of text.

Checkbox button solution

The input feature of the checkbox selection is quite quite often employed in case we have an option that can possibly be noted as yes or no, for instance "I accept the terms of the user pact", alternatively " Possess the active procedure" in forms Login. ( learn more)

Widely used with the value

true

, you can absolutely establish 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 approach

In the event that we require the site visitor to select a single of a series of opportunities, we have the ability to put to use input components of the radio option.

Solely one have the ability to be picked out while there is higher than a single element of this option along with the equivalent value within 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

Plenty of attachments are promoted and can be merged 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: extra buttons selections

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

The input component along with the

type="button"

attribute delivers a switch inside the form, although this particular switch has no straight functionality about it and is frequently used to cause activities with regards to script realization.

The switch message is identified with value of the

"value"

attribute.

Add-ons of the buttons

Buttons in input groups have to be covered in a

.input-group-btn

for correct alignment as well as proportions. This is needed due to default internet browser looks that can not really 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>

More than that, buttons may be segmented

$Buttons are able 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 component with the option "submit" attribute is very close to the button, but when activated this element begins the call that delivers the form info to the place of business signified in the action attribute of

<form>

Image

You can change the submit form switch using an image, getting feasible to generate a far more attractive design for the form.

Reset

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

The input having

type="reset"

eliminates the values inputed previously in the details of a form, letting the user 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 kinds may possibly be removed and replaced by the

<button>

tag.

In this particular scenario, the text message of the button is currently signified as the material of the tag.

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

File

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

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

For the right directing of the files, it is quite often as well necessary to add in the

enctype="multipart/form-data"

attribute in the

<form>

tag.

Hidden

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

Frequently we desire to send and receive details that is of no absolute use to the user and as a result really should not be shown on the form.

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

Accessibility

Assuming that you don't involve a label for each input, screen readers can have trouble with your forms. For such input groups, assure that every additional label or functionality is conveyed to assistive technologies.

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