Basic Form

<form><div class="form-group"><label for="email">Email address:</label><input type="email"class="form-control"id="email1"></div><div class="form-group"><label for="pwd">Password:</label><input type="password"class="form-control"id="pwd"></div><div class="checkbox mb-3"><label><input type="checkbox">Remember me</label></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Form Grid

<form><div class="row"><div class="col"><input type="text"class="form-control"placeholder="First name"></div><div class="col"><input type="text"class="form-control"placeholder="Last name"></div></div></form>

Textarea

<form><div class="form-group"><label for="exampleFormControlTextarea1">textarea</label><textarea class="form-control"id="exampleFormControlTextarea1"rows="3"></textarea></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Input Telephone

<form><div class="form-group"><label for="exampleInputphone">Teliphone Input</label><input type="tel"class="form-control"id="exampleInputphone"value="1-(555)-555-5555"></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Input Search

Input

<form><div class="form-group"><label for="exampleInputText1">Input Text </label><input type="text"class="form-control"id="exampleInputText1"value="Mark Tech"placeholder="Enter Name"></div><div class="form-group"><label for="exampleInputEmail2">Email Input</label><input type="email"class="form-control"id="exampleInputEmail2"value="[email protected]"placeholder="Enter Email"></div><div class="form-group"><label for="exampleInputNumber3">Number Input</label><input type="number"class="form-control"id="exampleInputNumber3"value="123456"></div><div class="form-group"><label for="exampleInputPassword4">Password Input</label><input type="password"class="form-control"id="exampleInputPassword4"value="example123"placeholder="Enter Password"></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Input Size

<form><div class="form-group"><label for="colFormLabelSm">Small</label><input type="email"class="form-control form-control-sm"id="colFormLabelSm"placeholder="form-control-sm"></div><div class="form-group"><label for="colFormLabel">Default</label><input type="email"class="form-control"id="colFormLabel"placeholder="form-control"></div><div class="form-group mb-0"><label for="colFormLabelLg"class="pb-0">Large</label><input type="email"class="form-control form-control-lg"id="colFormLabelLg"placeholder="form-control-lg"></div></form>

Horizontal Form

<form class="form-horizontal"action="/action_page.php"><div class="form-group row"><label class="control-label col-sm-3 align-self-center"for="email">Email:</label><div class="col-sm-9"><input type="email"class="form-control"id="email"placeholder="Enter Your email"></div></div><div class="form-group row"><label class="control-label col-sm-3 align-self-center"for="pwd1">Password:</label><div class="col-sm-9"><input type="password"class="form-control"id="pwd1"placeholder="Enter Your password"></div></div><div class="form-group"><div class="checkbox"><label><input type="checkbox">Remember me</label></div></div><div class="form-group"><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></div></form>

Form row

<form><div class="form-row"><div class="col"><input type="text"class="form-control"placeholder="First name"></div><div class="col"><input type="text"class="form-control"placeholder="Last name"></div></div></form>

Input Url

<form><div class="form-group"><label for="exampleInputurl">Url Input</label><input type="url"class="form-control"id="exampleInputurl"value="https://getbootstrap.com"placeholder="Enter Url"></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Input Range

<form><div class="form-group"><label for="formControlRange">Range input</label><input type="range"class="form-control-range"id="formControlRange"></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Input Custom Range

<form><div class="form-group"><label for="customRange1">Range Input</label><input type="range"class="custom-range"id="customRange1"></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Input Choose file

<form><div class="form-group"><div class="custom-file"><input type="file"class="custom-file-input"id="customFile"><label class="custom-file-label"for="customFile">Choose file</label></div></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Input

<form><div class="form-group"><label for="exampleInputDisabled5">Disabled Input</label><input type="text"class="form-control"id="exampleInputDisabled5"disabled=""value="Mark Tech"></div><div class="form-group"><label for="exampleInputPlaceholder">Placeholder</label><input type="text"class="form-control"id="exampleInputPlaceholder"placeholder="This is Placeholder"></div><div class="form-group"><label for="exampleInputReadonly">Readonly</label><input type="text"class="form-control"id="exampleInputReadonly"readonly=""value="Mark Tech"></div><div class="form-group"><label for="exampleInputcolor">Input Color </label><input type="color"class="form-control"id="exampleInputcolor"value="#4788ff"></div><button type="submit"class="btn btn-primary">Submit</button><button type="submit"class="btn bg-danger">Cancel</button></form>

Select Size

<div class="form-group"><label>Small</label><select class="form-control form-control-sm mb-3"><option selected="">Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div><div class="form-group"><label>Default</label><select class="form-control mb-3"><option selected="">Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div><div class="form-group"><label>Large</label><select class="form-control form-control-lg"><option selected="">Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select></div>