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 >
< link rel = "stylesheet" href =
</ 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 = "geeks@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 >
< link rel = "stylesheet" href =
</ 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 >
< link rel = "stylesheet" href =
</ 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 >
< link rel = "stylesheet" href =
</ 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 >
< link rel = "stylesheet" href =
</ 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 >
< link rel = "stylesheet" href =
</ 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
Last Updated :
06 Jul, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...