Bootstrap 5 Form Controls
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 > <!-- Bootstrap CDN --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" crossorigin = "anonymous" > </ head > < body class = "col-4 m-3" > < h1 class = "text-success" > w3wiki </ 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 > <!-- CSS only --> < link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" crossorigin = "anonymous" > </ head > < body class = "col-6" > < h1 class = "text-success" > w3wiki </ 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/