What are input forms in Bootstrap 4?
Salman YousafOverview
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:
InputSelectCheckboxRadioTextarea
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.
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.
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.
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.
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.
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.
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
CONTRIBUTOR
Salman YousafView all Courses
