Bootstrap 5 Form Controls
Last Updated :
08 Dec, 2022
Form controls like <input>, <select>, <textarea> are the tags used to add custom styles, sizing, focus states to input field, select item, and text-areas etc. Below are utilities of form control:
- Sizing: This utility is used to set the label of the form input field in different sizes.
- Disabled: This attribute is used to give it a grayed-out appearance and remove pointer events.
- Readonly: This attribute is used to prevent modification of the input’s value.
- Readonly plain text: Form Controls Readonly plain text is used to create a readonly input field as a plaintext. To create a plain text input field, we will use .form-control-plaintext class. This class removes the styling and preserves the correct margin and padding.
- File input: This utility is used to browse the file from your computer.
- Color: Bootstrap 5 Form Control Color is used to set the color in the color type input field. To create a color-type input field, type=”color” attribute is used in <input> element.
- Datalists: Form controls datalists are used to create a group of options (group of <option> elements) that can be accessed by using an input element. It is similar to the <select> element but the difference is that it has more menu styling limitations and differences.
Example 1: Let’s see an example of sizing.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body class="col-4 m-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Bootstrap 5 Form Controls</h3>
<input class="form-control mt-3 form-control-lg"
type="text"
placeholder="large size GFG">
<input class="form-control mt-3"
type="text"
placeholder="Default size GFG">
<input class="form-control mt-3 form-control-sm"
type="text"
placeholder="small size GFG">
</body>
</html>
|
Output:
Example 2: Let’s see an example of form control Datalists.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
crossorigin="anonymous">
</head>
<body class="col-6">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h3>Bootstrap5 Controls</h3>
<label class="form-label">
Datalist
</label>
<input class="form-control"
list="GFGOptions"
placeholder="Select option">
<datalist id="GFGOptions">
<option value="apple">
<option value="orange">
<option value="onion">
<option value="potato">
</datalist>
</body>
</html>
|
Output:
Reference:https://getbootstrap.com/docs/5.0/forms/form-control/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...