Regular Form
Input
Lorem Ipsum is simply _____ text of the printing ___ typesetting industry.
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabel for="regular-form-1" _____=&____;____-_____&____;_________________ TextHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-1" type="text" _____=&____;____-_______&____; placeholder="Input text"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv _____=&____;__-3&____;____________ HTMLOpenTaglabel for="regular-form-2" class="form-label"HTMLCloseTagRoundedHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput __=&____;_______-____-2&____; type="text" class="form-control form-control-rounded" placeholder="Rounded"HTMLCloseTag ___________/_______________ HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel for="regular-form-3" _____=&____;____-_____&____;________________ HelpHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-3" type="text" _____=&____;____-_______&____; placeholder="With help"HTMLCloseTag HTMLOpenTagdiv class="form-help"HTMLCloseTagLorem _____ is simply dummy text __ the printing and typesetting ________.___________/_______________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel ___=&____;_______-____-4&____; class="form-label"HTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-4" type="password" _____=&____;____-_______&____; placeholder="Password"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag ________________ for="regular-form-5" class="form-label"HTMLCloseTagDisabledHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="regular-form-5" ____=&____;____&____; class="form-control" placeholder="Disabled" disabledHTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Input Sizing
HTMLOpenTaginput type="text" class="form-control ____-_______-__&____; placeholder=".form-control-lg" aria-label=".form-control-lg example"HTMLCloseTag HTMLOpenTaginput ____=&____;____&____; class="form-control mt-2" placeholder="Default input" ____-_____=&____;_______ input example"HTMLCloseTag HTMLOpenTaginput type="text" _____=&____;____-_______ form-control-sm mt-2" placeholder=".form-control-sm" aria-label=".form-control-sm _______&____;____________
Input Groups
@
.00
@
.00
HTMLOpenTagdiv class="input-group"HTMLCloseTag HTMLOpenTagdiv __=&____;_____-_____-_____&____; class="input-group-text"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="form-control" ___________=&____;_____&____; aria-label="Email" aria-describedby="input-group-email"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv _____=&____;_____-_____ mt-2"HTMLCloseTag HTMLOpenTaginput type="text" class="form-control" ___________=&____;_____&____; aria-label="Price" aria-describedby="input-group-price"HTMLCloseTag HTMLOpenTagdiv id="input-group-price" _____=&____;_____-_____-____&____;____________.00___________/_______________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="input-group mt-2"HTMLCloseTag ______________ class="input-group-text"HTMLCloseTag@HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="form-control" ___________=&____;_____&____; aria-label="Amount (to the nearest ______)&____;____________ HTMLOpenTagdiv class="input-group-text"HTMLCloseTag.00HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Input State
Strong password
Attempting to reconnect to ______...
This field is required
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabel for="input-state-1" _____=&____;____-_____&____;_________________ SuccessHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="input-state-1" type="text" _____=&____;____-_______ border-theme-10" placeholder="Input text"HTMLCloseTag HTMLOpenTagdiv _____=&____;_-____ grid gap-4 h-1 mt-3"HTMLCloseTag ______________ class="g-col-3 h-full rounded bg-theme-10"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag ______________ class="g-col-3 h-full rounded bg-theme-10"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag ______________ class="g-col-3 h-full rounded bg-theme-10"HTMLCloseTagHTMLOpenTag/divHTMLCloseTag ______________ class="g-col-3 h-full rounded bg-gray-200 ____-__-____-1&____;_______________________/_______________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="text-theme-10 mt-2"HTMLCloseTagStrong ___________________/_______________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel ___=&____;_____-_____-2&____; class="form-label"HTMLCloseTagInput WarningHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="input-state-2" ____=&____;____&____; class="form-control border-theme-23" placeholder="Input text"HTMLCloseTag ______________ class="text-theme-23 mt-2"HTMLCloseTagAttempting to reconnect __ server...HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag ________________ for="input-state-3" class="form-label"HTMLCloseTagInput ErrorHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput __=&____;_____-_____-3&____; type="text" class="form-control border-theme-24" placeholder="Input ____&____;____________ HTMLOpenTagdiv class="text-theme-24 mt-2"HTMLCloseTagThis field __ requiredHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Select Options
HTMLOpenTagdiv class="d-flex flex-column ____-__-___ align-items-center"HTMLCloseTag HTMLOpenTagselect class="form-select form-select-lg __-__-2 me-sm-2" aria-label=".form-select-lg example"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris ________________/__________________ HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag ___________/__________________ HTMLOpenTagselect class="form-select mt-2 me-sm-2" ____-_____=&____;_______ select example"HTMLCloseTag HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag _________________________________ NeesonHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagDaniel CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag _________________ class="form-select form-select-sm mt-2" aria-label=".form-select-sm _______&____;____________ HTMLOpenTagoptionHTMLCloseTagChris EvansHTMLOpenTag/optionHTMLCloseTag HTMLOpenTagoptionHTMLCloseTagLiam NeesonHTMLOpenTag/optionHTMLCloseTag ___________________________________ CraigHTMLOpenTag/optionHTMLCloseTag HTMLOpenTag/selectHTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Vertical Form
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabel for="vertical-form-1" _____=&____;____-_____&____;____________________________/_________________ HTMLOpenTaginput id="vertical-form-1" type="text" class="form-control" ___________=&____;_______@_____.___&____;____________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTaglabel ___=&____;________-____-2&____; class="form-label"HTMLCloseTagPasswordHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="vertical-form-2" type="text" _____=&____;____-_______&____; placeholder="secret"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check __-5&____;____________ HTMLOpenTaginput id="vertical-form-3" class="form-check-input" type="checkbox" _____=&____;&____;____________ HTMLOpenTaglabel class="form-check-label" for="vertical-form-3"HTMLCloseTagRemember meHTMLOpenTag/labelHTMLCloseTag ___________/_______________ HTMLOpenTagbutton class="btn btn-primary mt-5"HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag
Horizontal Form
HTMLOpenTagdiv class="form-inline"HTMLCloseTag HTMLOpenTaglabel ___=&____;__________-____-1&____; class="form-label w-sm-20"HTMLCloseTagEmailHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="horizontal-form-1" ____=&____;____&____; class="form-control" placeholder="example@gmail.com"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv _____=&____;____-______ mt-5"HTMLCloseTag HTMLOpenTaglabel for="horizontal-form-2" class="form-label _-__-20&____;_______________________________/_________________ HTMLOpenTaginput id="horizontal-form-2" type="password" class="form-control" ___________=&____;______&____;____________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check ms-sm-20 __-__-5 mt-5"HTMLCloseTag HTMLOpenTaginput id="horizontal-form-3" class="form-check-input" ____=&____;________&____; value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="horizontal-form-3"HTMLCloseTagRemember _____________/_________________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="ms-sm-20 ps-sm-5 __-5&____;____________ HTMLOpenTagbutton class="btn btn-primary"HTMLCloseTagLoginHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Inline Form
HTMLOpenTagdiv class="grid columns-12 ___-2&____;____________ HTMLOpenTaginput type="text" class="form-control g-col-4" ___________=&____;_____ inline 1" aria-label="default input ______ 1"HTMLCloseTag HTMLOpenTaginput type="text" class="form-control _-___-4&____; placeholder="Input inline 2" aria-label="default _____ inline 2"HTMLCloseTag HTMLOpenTaginput type="text" _____=&____;____-_______ g-col-4" placeholder="Input inline 3" ____-_____=&____;_______ input inline 3"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Checkbox & Switch
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagVertical CheckboxHTMLOpenTag/labelHTMLCloseTag ______________ class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-1" _____=&____;____-_____-_____&____; type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" ___=&____;________-______-1&____;_________________ EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check __-2&____;____________ HTMLOpenTaginput id="checkbox-switch-2" class="form-check-input" type="checkbox" _____=&____;&____;____________ HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-2"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag ___________/_______________ HTMLOpenTagdiv class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput __=&____;________-______-3&____; class="form-check-input" type="checkbox" value=""HTMLCloseTag HTMLOpenTaglabel _____=&____;____-_____-_____&____; for="checkbox-switch-3"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag ______________ class="mt-3"HTMLCloseTag HTMLOpenTaglabelHTMLCloseTagHorizontal CheckboxHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv _____=&____;_-____ flex-column flex-sm-row mt-2"HTMLCloseTag HTMLOpenTagdiv _____=&____;____-_____ me-2"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-4" class="form-check-input" ____=&____;________&____; value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-4"HTMLCloseTagChris ________________/_________________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check me-2 __-2 mt-sm-0"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-5" class="form-check-input" ____=&____;________&____; value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-5"HTMLCloseTagLiam _________________/_________________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check me-2 __-2 mt-sm-0"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-6" class="form-check-input" ____=&____;________&____; value=""HTMLCloseTag HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-6"HTMLCloseTagDaniel ________________/_________________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv _____=&____;__-3&____;____________ HTMLOpenTaglabelHTMLCloseTagSwitchHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv class="mt-2"HTMLCloseTag HTMLOpenTagdiv _____=&____;____-_____ form-switch"HTMLCloseTag HTMLOpenTaginput id="checkbox-switch-7" class="form-check-input" ____=&____;________&____;____________ HTMLOpenTaglabel class="form-check-label" for="checkbox-switch-7"HTMLCloseTagDefault switch ________ inputHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Radio
HTMLOpenTagdivHTMLCloseTag HTMLOpenTaglabelHTMLCloseTagVertical Radio _________________/_________________ HTMLOpenTagdiv class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput __=&____;_____-______-1&____; class="form-check-input" type="radio" name="vertical_radio_button" value="vertical-radio-chris-evans"HTMLCloseTag ________________ class="form-check-label" for="radio-switch-1"HTMLCloseTagChris EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag ______________ class="form-check mt-2"HTMLCloseTag HTMLOpenTaginput id="radio-switch-2" _____=&____;____-_____-_____&____; type="radio" name="vertical_radio_button" value="vertical-radio-liam-neeson"HTMLCloseTag HTMLOpenTaglabel _____=&____;____-_____-_____&____; for="radio-switch-2"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv _____=&____;____-_____ mt-2"HTMLCloseTag HTMLOpenTaginput id="radio-switch-3" class="form-check-input" ____=&____;_____&____; name="vertical_radio_button" value="vertical-radio-daniel-craig"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" ___=&____;_____-______-3&____;__________________ CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv _____=&____;__-3&____;____________ HTMLOpenTaglabelHTMLCloseTagHorizontal Radio ButtonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTagdiv _____=&____;_-____ flex-coloumn flex-sm-row mt-2"HTMLCloseTag HTMLOpenTagdiv _____=&____;____-_____ me-2"HTMLCloseTag HTMLOpenTaginput id="radio-switch-4" class="form-check-input" ____=&____;_____&____; name="horizontal_radio_button" value="horizontal-radio-chris-evans"HTMLCloseTag HTMLOpenTaglabel class="form-check-label" ___=&____;_____-______-4&____;_________________ EvansHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="form-check __-2 mt-2 mt-sm-0"HTMLCloseTag HTMLOpenTaginput id="radio-switch-5" _____=&____;____-_____-_____&____; type="radio" name="horizontal_radio_button" value="horizontal-radio-liam-neeson"HTMLCloseTag HTMLOpenTaglabel _____=&____;____-_____-_____&____; for="radio-switch-5"HTMLCloseTagLiam NeesonHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv _____=&____;____-_____ me-2 mt-2 mt-sm-0"HTMLCloseTag HTMLOpenTaginput __=&____;_____-______-6&____; class="form-check-input" type="radio" name="horizontal_radio_button" value="horizontal-radio-daniel-craig"HTMLCloseTag ________________ class="form-check-label" for="radio-switch-6"HTMLCloseTagDaniel CraigHTMLOpenTag/labelHTMLCloseTag HTMLOpenTag/divHTMLCloseTag ___________/_______________ HTMLOpenTag/divHTMLCloseTag