Bootstrap Input Text

Intro

Most of the components we utilize in forms to capture user data are offered by the

<input>

tag.

You are able to simply extend form controls with including words, switches, or tab groups on each side of textual

<input>

-s.

The many different types of Bootstrap Input Class are identified with value of their option attribute.

Next, we'll describe the taken options for this kind of tag.

Text

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

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

type ="text"

, is used anytime we desire the user to send out a simple textual info, since this specific element does not let the entering of line breaks.

Whenever you are sending out the form, the information inserted by user is accessible on the server side by means of the

"name"

attribute, applied to detect every single relevant information featured in the request specifications.

In order to have access to the information entered if we deal with the form together with some variety of script, to confirm the content for example, it is essential to have the materials of the value property of the object in the DOM. ( find more)

Code

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

Bootstrap Input Field that obtains the

type="password"

attribute is similar to the text type, apart from that it does not reveal exactly the text message typed from the site visitor, though rather a set of marks "*" or yet another basing on the web browser and working system .

Basic Bootstrap Input Text scenario

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>

Sizings

Include the relative form sizing classes to the

.input-group

itself and materials located in will quickly resize-- no requirement for reproducing the form control size classes on each and 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 sort of checkbox or radio feature inside of an input group’s addon as an alternative to of text.

Checkbox button option

The input element of the checkbox variation is truly oftentimes applied in case we have an feature which can be registered as yes or no, such as "I accept the terms of the customer pact", or else " Manage the active treatment" in applications Login. ( more info)

Widely used with the value

true

, you can certainly 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 opportunity

Whenever we desire the user to select just one of a series of methods, we can put into action input features of the radio type.

As soon as there is more than just a single element of this one type through the similar value within the name attribute, only one can 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

Different attachments are promoted and can possibly be incorporated 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: different buttons selections

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

The input component having the

type="button"

attribute puts a button in the form, and yet this specific button has no straight functionality about it and is regularly used to trigger activities when it comes to script realization.

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

"value"

attribute.

Add-ons of the buttons

Buttons in input groups need to be wrapped in a

.input-group-btn

for appropriate alignment plus sizing. This is requested because of the default web browser styles that can certainly 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>

More than that, buttons can 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 element using the option "submit" attribute is similar to the button, however, once triggered this particular component begins the call that gives the form information to the location indicated in the action attribute of

<form>

Image

You can easily upgrade the submit form switch with an picture, making it achievable to create a much more attractive look for the form.

Reset

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

The input having

type="reset"

eradicates the values entered earlier in the elements of a form, enabling the site visitor to clear up the form.

<Input> and <button>

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

The

<input>

tag of the switch, submit, and reset kinds can possibly be changed by the

<button>

tag.

In this situation, the content of the switch is currently identified as the web content of the tag.

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

File

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

When it is necessary for the user to send out a data to the application on the web server area, it is important to use the file type input.

For the correct delivering of the information, it is frequently in addition necessary to provide the

enctype="multipart/form-data"

attribute in the

<form>

tag.

Hidden

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

Often we desire to receive and send relevant information that is of no absolute usage to the user and because of this really should not be revealed on the form.

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

Availableness

In the event that you fail to provide a label for each and every input, screen readers can have problem with your forms. For such input groups, assure that any sort of extra label or performance is conveyed to assistive technologies.

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