Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

input forms
bootstrap 4
communitycreator

What are input forms in Bootstrap 4?

Salman Yousaf

Overview

In Bootstrap, form control gives textual styling like inputs, selects, and textareas. It gives control in terms of text, like sizing, general appearance, and focuses states. Bootstrap supports the following form controls:

  • Input
  • Select
  • Checkbox
  • Radio
  • Textarea

Bootstrap input

In Bootstrap, the following input elements of HTML 5 are supported: password, date, time, number, datetime, text, week, month, datetime-local, email, search, color, URL, and tel.

Declare the input type properly to style the input fully.

  • HTML
Contains input elements that take input values of email and password

Note: To avail all the new input control features that include email verification and number selection, make sure that the proper type attribute is used on all inputs. For example, for email addresses, we use email attributes and use the number attribute for numerical info.

Input sizing

For different input sizes, the height is adjusted using the .form-control and .form-control-sm classes. The .Form-outline class gives the input a border.

  • HTML
Bootstrap classes for input sizes

Input types

Now, let’s discuss different input fields and their types.

Number field

<!-- Number-->
<div class="form-outline">
 <label class="form-label" for="typeNumber">Enter a number input</label> 
 <input type="number" id="typeNumber" class="form-control" /> 
</div>

The code above produces an input field for numbers. Here, we have complete HTML code for the complete demo.

  • HTML
Bootstrap `input type="number"`

Explanation

  • Lines 3–11: These contain Bootstrap dependencies in the head section.

  • Lines 13–16: We use the <input> tag as a number type to make it a number input field.


Phone number field

<!-- Phone Number -->
<div class="form-outline"> 
 <label class="form-label" for="typePhone">Enter Phone number 
   input</label>
 <input type="tel" id="typePhone" class="form-control" /> 
</div>

The code above produces an input field for phone numbers or contact. Here, we have the complete HTML code for the complete demo.

  • HTML
Bootstrap `input type="tel"`

Explanation

  • Lines 3–11: These contain Bootstrap dependencies in the head section or between the <head> tags.

  • Lines 13-17: We use the <input> tag as a tel type to make it a phone or contact number input field.


URL field

<!--URL-->
<div class="form-outline">
 <label class="form-label" for="typeURL">Enter URL input</label> 
 <input type="url" id="typeURL" class="form-control" /> 
</div>

The code above deals with input fields of the URL type. Here, we have a detailed HTML demo program.

  • HTML
Bootstrap `input type="url"`

Explanation

  • Lines 3–11: These contain Bootstrap dependencies in the head section or between the <head> tags.

  • Lines 14–17: We use the <input> tag as the url type to make it a URL input field.


Textarea field

<!-- Textarea -->
<div class="form-outline"> 
 <label class="form-label" for="textAreaExample">Type your text</label>
 <textarea class="form-control" id="textAreaExample" rows="4"></textarea> 
</div>

The code above deals with the textarea input field. Here, we have a detailed HTML demo program.

  • HTML
HTML Textarea tag with bootstrap classes

Explanation

  • Lines 3–11: These contain Bootstrap dependencies in the head section or between the <head> tags.
  • Line 13–16: We use the <textarea> tag with the default four rows space.

RELATED TAGS

input forms
bootstrap 4
communitycreator
RELATED COURSES

View all Courses

Keep Exploring