DekGenius.com
C
Bootstrap inline your form with Bootstrap
< form class= "form-inline py-3" >
< input type= "text" class= "form-control" / >
< input type= "text" class= "form-control" / >
< button type= "submit" class= "btn btn-primary" > Submit< / button>
< / form>
bootstrap form
< form class= "row g-3" >
< div class= "col-md-6" >
< label for = "inputEmail4" class= "form-label" > Email< / label>
< input type= "email" class= "form-control" id= "inputEmail4" >
< / div>
< div class= "col-md-6" >
< label for = "inputPassword4" class= "form-label" > Password< / label>
< input type= "password" class= "form-control" id= "inputPassword4" >
< / div>
< div class= "col-12" >
< label for = "inputAddress" class= "form-label" > Address< / label>
< input type= "text" class= "form-control" id= "inputAddress" placeholder= "1234 Main St" >
< / div>
< div class= "col-12" >
< label for = "inputAddress2" class= "form-label" > Address 2 < / label>
< input type= "text" class= "form-control" id= "inputAddress2" placeholder= "Apartment, studio, or floor" >
< / div>
< div class= "col-md-6" >
< label for = "inputCity" class= "form-label" > City< / label>
< input type= "text" class= "form-control" id= "inputCity" >
< / div>
< div class= "col-md-4" >
< label for = "inputState" class= "form-label" > State< / label>
< select id= "inputState" class= "form-select" >
< option selected> Choose. . . < / option>
< option> . . . < / option>
< / select>
< / div>
< div class= "col-md-2" >
< label for = "inputZip" class= "form-label" > Zip< / label>
< input type= "text" class= "form-control" id= "inputZip" >
< / div>
< div class= "col-12" >
< div class= "form-check" >
< input class= "form-check-input" type= "checkbox" id= "gridCheck" >
< label class= "form-check-label" for = "gridCheck" >
Check me out
< / label>
< / div>
< / div>
< div class= "col-12" >
< button type= "submit" class= "btn btn-primary" > Sign in< / button>
< / div>
< / form>
bootstrap horizontal form
< form>
< div class= "form-group row" >
< label for = "inputEmail3" class= "col-sm-2 col-form-label" > Email< / label>
< div class= "col-sm-10" >
< input type= "email" class= "form-control" id= "inputEmail3" placeholder= "Email" >
< / div>
< / div>
< div class= "form-group row" >
< label for = "inputPassword3" class= "col-sm-2 col-form-label" > Password< / label>
< div class= "col-sm-10" >
< input type= "password" class= "form-control" id= "inputPassword3" placeholder= "Password" >
< / div>
< / div>
< fieldset class= "form-group" >
< div class= "row" >
< legend class= "col-form-label col-sm-2 pt-0" > Radios< / legend>
< div class= "col-sm-10" >
< div class= "form-check" >
< input class= "form-check-input" type= "radio" name= "gridRadios" id= "gridRadios1" value= "option1" checked>
< label class= "form-check-label" for = "gridRadios1" >
First radio
< / label>
< / div>
< div class= "form-check" >
< input class= "form-check-input" type= "radio" name= "gridRadios" id= "gridRadios2" value= "option2" >
< label class= "form-check-label" for = "gridRadios2" >
Second radio
< / label>
< / div>
< div class= "form-check disabled" >
< input class= "form-check-input" type= "radio" name= "gridRadios" id= "gridRadios3" value= "option3" disabled>
< label class= "form-check-label" for = "gridRadios3" >
Third disabled radio
< / label>
< / div>
< / div>
< / div>
< / fieldset>
< div class= "form-group row" >
< div class= "col-sm-2" > Checkbox< / div>
< div class= "col-sm-10" >
< div class= "form-check" >
< input class= "form-check-input" type= "checkbox" id= "gridCheck1" >
< label class= "form-check-label" for = "gridCheck1" >
Example checkbox
< / label>
< / div>
< / div>
< / div>
< div class= "form-group row" >
< div class= "col-sm-10" >
< button type= "submit" class= "btn btn-primary" > Sign in< / button>
< / div>
< / div>
< / form>
bootstrap form
< form>
< div class= "form-group row" >
< label for = "staticEmail" class= "col-sm-2 col-form-label" > Email< / label>
< div class= "col-sm-10" >
< input type= "text" readonly class= "form-control-plaintext" id= "staticEmail" value= "email@example.com" >
< / div>
< / div>
< div class= "form-group row" >
< label for = "inputPassword" class= "col-sm-2 col-form-label" > Password< / label>
< div class= "col-sm-10" >
< input type= "password" class= "form-control" id= "inputPassword" placeholder= "Password" >
< / div>
< / div>
< / form>
bootstrap form post
< form action= "results.php" method= "POST" role= "form" class= "form-horizontal" >
< div class= "form-group" >
< label for = "searchterm" class= "col-sm-2 control-label" > Choose Search Type< / label>
< select name= "searchtype" class= "form-control" >
< option value= "ip" > IP Adress < / option>
< option value= "ss_name" > Software Services < / option>
< option value= "IS" > ISBN < / option>
< / select>
< / div>
< div class= "form-group" >
< label for = "searchterm" class= "col-sm-2 control-label" > Choose Search Term< / label>
< div class= "col-sm-10" >
< input type= "text" class= "form-control" id= "searchterm" name= "searchterm" >
< / div>
< / div>
< div class= "form-group" >
< div class= "col-sm-offset-2 col-sm-10" >
< button type= "submit" class= "btn btn-default" > Search< / button>
< / div>
< / div>
< / form>
Form row bootstrap
< div class= "row" >
< div class= "col" >
< input type= "text" class= "form-control" placeholder= "First name" aria- label= "First name" >
< / div>
< div class= "col" >
< input type= "text" class= "form-control" placeholder= "Last name" aria- label= "Last name" >
< / div>
< / div>
bootstrap form
< form>
< fieldset>
< legend> Legend< / legend>
< div class= "form-group row" >
< label for = "staticEmail" class= "col-sm-2 col-form-label" > Email< / label>
< div class= "col-sm-10" >
< input type= "text" readonly= "" class= "form-control-plaintext" id= "staticEmail" value= "email@example.com" >
< / div>
< / div>
< div class= "form-group" >
< label for = "exampleInputEmail1" class= "form-label mt-4" > Email address< / label>
< input type= "email" class= "form-control" id= "exampleInputEmail1" aria- describedby= "emailHelp" placeholder= "Enter email" >
< small id= "emailHelp" class= "form-text text-muted" > We'll never share your email with anyone else . < / small>
< / div>
< div class= "form-group" >
< label for = "exampleInputPassword1" class= "form-label mt-4" > Password< / label>
< input type= "password" class= "form-control" id= "exampleInputPassword1" placeholder= "Password" >
< / div>
< div class= "form-group" >
< label for = "exampleSelect1" class= "form-label mt-4" > Example select< / label>
< select class= "form-select" id= "exampleSelect1" >
< option> 1 < / option>
< option> 2 < / option>
< option> 3 < / option>
< option> 4 < / option>
< option> 5 < / option>
< / select>
< / div>
< div class= "form-group" >
< label for = "exampleSelect2" class= "form-label mt-4" > Example multiple select< / label>
< select multiple= "" class= "form-select" id= "exampleSelect2" >
< option> 1 < / option>
< option> 2 < / option>
< option> 3 < / option>
< option> 4 < / option>
< option> 5 < / option>
< / select>
< / div>
< div class= "form-group" >
< label for = "exampleTextarea" class= "form-label mt-4" > Example textarea< / label>
< textarea class= "form-control" id= "exampleTextarea" rows= "3" > < / textarea>
< / div>
< div class= "form-group" >
< label for = "formFile" class= "form-label mt-4" > Default file input example< / label>
< input class= "form-control" type= "file" id= "formFile" >
< / div>
< fieldset class= "form-group" >
< legend class= "mt-4" > Radio buttons< / legend>
< div class= "form-check" >
< label class= "form-check-label" >
< input type= "radio" class= "form-check-input" name= "optionsRadios" id= "optionsRadios1" value= "option1" checked= "" >
Option one is this and that—be sure to include why it's great
< / label>
< / div>
< div class= "form-check" >
< label class= "form-check-label" >
< input type= "radio" class= "form-check-input" name= "optionsRadios" id= "optionsRadios2" value= "option2" >
Option two can be something else and selecting it will deselect option one
< / label>
< / div>
< div class= "form-check disabled" >
< label class= "form-check-label" >
< input type= "radio" class= "form-check-input" name= "optionsRadios" id= "optionsRadios3" value= "option3" disabled= "" >
Option three is disabled
< / label>
< / div>
< / fieldset>
< fieldset class= "form-group" >
< legend class= "mt-4" > Checkboxes< / legend>
< div class= "form-check" >
< input class= "form-check-input" type= "checkbox" value= "" id= "flexCheckDefault" >
< label class= "form-check-label" for = "flexCheckDefault" >
Default checkbox
< / label>
< / div>
< div class= "form-check" >
< input class= "form-check-input" type= "checkbox" value= "" id= "flexCheckChecked" checked= "" >
< label class= "form-check-label" for = "flexCheckChecked" >
Checked checkbox
< / label>
< / div>
< / fieldset>
< fieldset>
< legend class= "mt-4" > Switches< / legend>
< div class= "form-check form-switch" >
< input class= "form-check-input" type= "checkbox" id= "flexSwitchCheckDefault" >
< label class= "form-check-label" for = "flexSwitchCheckDefault" > Default switch checkbox input< / label>
< / div>
< div class= "form-check form-switch" >
< input class= "form-check-input" type= "checkbox" id= "flexSwitchCheckChecked" checked= "" >
< label class= "form-check-label" for = "flexSwitchCheckChecked" > Checked switch checkbox input< / label>
< / div>
< / fieldset>
< fieldset class= "form-group" >
< legend class= "mt-4" > Ranges< / legend>
< label for = "customRange1" class= "form-label" > Example range< / label>
< input type= "range" class= "form-range" id= "customRange1" >
< label for = "disabledRange" class= "form-label" > Disabled range< / label>
< input type= "range" class= "form-range" id= "disabledRange" disabled= "" >
< label for = "customRange3" class= "form-label" > Example range< / label>
< input type= "range" class= "form-range" min= "0" max= "5" step= "0.5" id= "customRange3" >
< / fieldset>
< button type= "submit" class= "btn btn-primary" > Submit< / button>
< / fieldset>
< / form>
bootstrap forms
Example of . form- group
< form>
< div class= ”form- group”>
< label for = ”exampleInputEmail1”> Email
address< / label>
< input type= ”email” class= ”form- control” id= ”exampleInputEmail1” ariadescribedby= ”emailHelp” placeholder= ”Provide email”>
< / div>
< div class= ”form- group”>
< label for = ”exampleInputPassword1”> Your password< / label>
< input type= ”password” class= ”form- control” id= ”exampleInputPassword1”
placeholder= ”Password”>
< / div>
< div class= ”form- group form- check”>
< input type= ”checkbox” class= ”form- check- input” id= ”exampleCheck1”>
< label class= ”form- check- label” for = ”exampleCheck1”> Remember me< / label>
< / div>
< button type= ”submit” class= ”btn btn- primary”> Submit< / button>
< / form>
. form- control
Use this class to style all textual form controls such as user input, titles, etc.
< form>
< div class= ”form- group”>
< label for = ”exampleFormControlInput1”> Email address< / label>
< input type= ”email” class= ”form- control” id= ”exampleFormControlInput1”
placeholder= ”name@example. com”>
< / div>
. form- control- file
Add this class whenever you need to provide the user with an option to upload a file to the form.
< input type= ”file” class= ”form- control- file” id= ”exampleFormControlFile1”>
. form- control- lg and . form- control- sm.
Create a visual hierarchy within your form by adding . form- control- lg to make bigger input areas and . form- control- sm to
make smaller ones.
< input class= ”form- control form- control- lg” type= ”text” placeholder= ”. form- controllg”>
< input class= ”form- control form- control- sm” type= ”text” placeholder= ”. form- controlsm”>
boostrap form
< ! -- Font Awesome -- >
< link
href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel= "stylesheet"
/ >
< ! -- Google Fonts -- >
< link
href= "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel= "stylesheet"
/ >
< ! -- MDB -- >
< link
href= "https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css"
rel= "stylesheet"
/ >
boots form
< input class= "form-control form-control-lg" type= "text" placeholder= ".form-control-lg" aria- label= ".form-control-lg example" >
< input class= "form-control" type= "text" placeholder= "Default input" aria- label= "default input example" >
< input class= "form-control form-control-sm" type= "text" placeholder= ".form-control-sm" aria- label= ".form-control-sm example" >
© 2022 Copyright:
DekGenius.com