Bootstrap-5 Forms
Form controls: <input>, <select>, <textarea> are the tags used for general appearance like input field, select item and textareas.
Note: To make the user interface more presentable, use properties like padding, margins as per the need.
Example:
HTML
<!DOCTYPE html> < html > < head > <!-- CSS only --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" > </ head > < body class = "container-sm mt-5" > < form > < h2 class = "text-center" > Display Form Controls </ h2 > < div class = "form-group" > < label >Email address</ label > < input type = "email" class = "form-control" placeholder = "Beginner@example.com" > </ div > < div class = "form-group mt-2" > < label >Example select</ label > < select class = "form-control" > < option >1</ option > < option >2</ option > < option >3</ option > < option >4</ option > < option >5</ option > </ select > </ div > < div class = "form-group mt-2" > < label >Example textarea</ label > < textarea class = "form-control" ></ textarea > </ div > </ form > </ body > </ html > |
Output:
Notes:
- The class used for form control is .form-control.
- The size of form-control can be adjusted by using .form-control-lg and .form-control-sm
Example:
HTML
<!DOCTYPE html> < html > < head > <!-- CSS only --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" > </ head > < body class = "container-sm mt-5" > < input class = "form-control mt-3 form-control-lg" type = "text" placeholder = ".form-control-lg" > < input class = "form-control mt-3" type = "text" placeholder = "Default input" > < input class = "form-control mt-3 form-control-sm" type = "text" placeholder = ".form-control-sm" > </ body > </ html > |
Output:
- The file input type can be defined with class .form-control-file
Example:
HTML
<!DOCTYPE html> < html > < head > <!-- CSS only --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" > </ head > < body class = "container-sm mt-5" > < form > < div class = "form-group" > < label >Example file input</ label >< br > < input type = "file" class = "form-control-file" > </ div > </ form > </ body > </ html > |
Output:
- The range input type can be defined with class .form-control-range
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Input Range</ title > <!-- CSS only --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" > </ head > < body class = "container-sm mt-5" > < form > < div class = "form-group" > < label >Example Range input</ label >< br > < input type = "range" class = "form-control-range" > </ div > </ form > </ body > </ html > |
Output:
2. Radios and checkboxes: The classes used for radios and checkboxes are .form-check.
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Radios and CheckBoxes</ title > <!-- CSS only --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" > </ head > < body class = "container-sm mt-5" > < form > < div class = "form-check" > < input class = "form-check-input" type = "checkbox" > < label class = "form-check-label" > Default checkbox </ label > </ div > < div class = "form-check" > < input class = "form-check-input" type = "radio" > < label class = "form-check-label" > Default Unchecked Radio </ label > </ div > </ form > </ body > </ html > |
Output:
3. Horizontal Form: The class used for horizontal form is .form-row
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Horizontal Form</ title > <!-- CSS only --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" > </ head > < body class = "container-sm mt-5" > < form > < div class = "form-row p-4" > < div class = "col mt-2" > < input type = "text" class = "form-control" placeholder = " User Name" > </ div > < div class = "col mt-2" > < input type = "password" class = "form-control" placeholder = " Password" > </ div > < div class = "col-2 mt-2 " > < button class="btn btn-primary btn-block">Login</ button > </ div > </ div > </ form > </ body > </ html > |
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari