Stack Forms
<form> <div class="form-group mb-3"> <input type="email" class="form-control" id="sEmail" aria-describedby="emailHelp1" placeholder="Email address"> <small id="emailHelp1" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group mb-4"> <input type="password" class="form-control" id="sPassword" placeholder="Password"> </div> <div class="form-group form-check pl-0"> <div class="custom-control custom-checkbox checkbox-info"> <input type="checkbox" class="custom-control-input" id="sChkbox"> <label class="custom-control-label" for="sChkbox">Subscribe to weekly newsletter</label> </div> </div> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form>
Horizontal form
<form> <div class="form-group row mb-4"> <label for="hEmail" class="col-xl-2 col-sm-3 col-sm-2 col-form-label">Email</label> <div class="col-xl-10 col-lg-9 col-sm-10"> <input type="email" class="form-control" id="hEmail" placeholder=""> </div> </div> <div class="form-group row mb-4"> <label for="hPassword" class="col-xl-2 col-sm-3 col-sm-2 col-form-label">Password</label> <div class="col-xl-10 col-lg-9 col-sm-10"> <input type="password" class="form-control" id="hPassword" placeholder=""> </div> </div> <fieldset class="form-group mb-4"> <div class="row"> <label class="col-form-label col-xl-2 col-sm-3 col-sm-2 pt-0">Choose Segements</label> <div class="col-xl-10 col-lg-9 col-sm-10"> <div class="form-check mb-2"> <div class="custom-control custom-radio classic-radio-info"> <input type="radio" id="hRadio1" name="classicRadio" class="custom-control-input"> <label class="custom-control-label" for="hRadio1">Segements 1</label> </div> </div> <div class="form-check mb-2"> <div class="custom-control custom-radio classic-radio-info"> <input type="radio" id="hRadio2" name="classicRadio" class="custom-control-input"> <label class="custom-control-label" for="hRadio2">Segements 2</label> </div> </div> <div class="form-check disabled"> <div class="custom-control custom-radio classic-radio-default"> <input type="radio" id="hRadio3" name="classicRadio" class="custom-control-input" disabled> <label class="custom-control-label" for="hRadio3">Segements 3 ( disabled )</label> </div> </div> </div> </div> </fieldset> <div class="form-group row"> <div class="col-sm-2">Apply</div> <div class="col-sm-10"> <div class="form-check pl-0"> <div class="custom-control custom-checkbox checkbox-info"> <input type="checkbox" class="custom-control-input" id="hChkbox"> <label class="custom-control-label" for="hChkbox">Terms Conditions</label> </div> </div> </div> </div> <div class="form-group row"> <div class="col-sm-10"> <button type="submit" class="btn btn-primary mt-3">Lets Go</button> </div> </div> </form>
Registration Forms
<form> <div class="form-group mb-4"> <input type="email" class="form-control" id="rEmail" placeholder="Email address *"> </div> <div class="form-group mb-4"> <input type="password" class="form-control" id="rPassword" placeholder="Password *"> </div> <div class="form-group"> <input type="password" class="form-control" id="rConfirmPassword" placeholder="Confirm Password *"> </div> <small id="emailHelp2" class="form-text text-muted">*Required Fields</small> <div class="form-group form-check pl-0 mt-5"> <div class="custom-control custom-checkbox checkbox-info"> <input type="checkbox" class="custom-control-input" id="rChkbox"> <label class="custom-control-label" for="rChkbox">Subscribe to weekly newsletter</label> </div> </div> <button type="submit" class="btn btn-primary mt-3">Submit</button> </form>
Login Form
<form> <div class="form-group mb-4"> <input type="text" class="form-control" id="lFullName" placeholder="Full Name *"> </div> <div class="form-group mb-4"> <input type="email" class="form-control" id="lEmail" placeholder="Email address *"> </div> <div class="form-group"> <input type="password" class="form-control" id="lPassword" placeholder="Password *"> </div> <small id="emailHelp" class="form-text text-muted">*Required Fields</small> <button type="submit" class="btn btn-primary mt-4">Submit</button> </form>
Forms Grid
<form> <div class="form-row mb-4"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> </div> <div class="form-group mb-4"> <label for="inputAddress">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="form-group mb-4"> <label for="inputAddress2">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="form-row mb-4"> <div class="form-group col-md-6"> <label for="inputCity">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="form-group col-md-4"> <label for="inputState">State</label> <select id="inputState" class="form-control"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="form-group col-md-2"> <label for="inputZip">Zip</label> <input type="text" class="form-control" id="inputZip"> </div> </div> <div class="form-group"> <div class="form-check pl-0"> <div class="custom-control custom-checkbox checkbox-info"> <input type="checkbox" class="custom-control-input" id="gridCheck"> <label class="custom-control-label" for="gridCheck">Check me out</label> </div> </div> </div> <button type="submit" class="btn btn-primary mt-3">Sign in</button> </form>
Inline forms
<form class="form-inline justify-content-center"> <label class="sr-only" for="inlineFormInputName2">Name</label> <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"> <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username"> </div> <div class="form-check mb-2 mr-sm-2"> <div class="custom-control custom-checkbox checkbox-info"> <input type="checkbox" class="custom-control-input" id="inlineFormCheck"> <label class="custom-control-label" for="inlineFormCheck">Remember me</label> </div> </div> <button type="submit" class="btn btn-primary mb-2">Submit</button> </form>
Auto-sizing
<form> <div class="form-row align-items-center justify-content-center"> <div class="col-auto"> <label class="sr-only" for="inlineFormInput">Name</label> <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe"> </div> <div class="col-auto"> <label class="sr-only" for="inlineFormInputGroup">Username</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> </div> </div> <div class="col-auto"> <div class="form-check mb-2 pl-0"> <div class="custom-control custom-checkbox checkbox-info"> <input type="checkbox" class="custom-control-input" id="autoSizingCheck"> <label class="custom-control-label" for="autoSizingCheck">Remember me</label> </div> </div> </div> <div class="col-auto"> <button type="submit" class="btn btn-primary mt-3">Submit</button> </div> </div> </form>
Actions Buttons
<form class="form-vertical" action="#"> <div class="form-group mb-4"> <label class="control-label">First Name:</label> <input type="text" name="first_name" class="form-control" > </div> <div class="form-group mb-4"> <label class="control-label">Email:</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" name="email" class="form-control" > </div> </div> <div class="form-group mb-4"> <label class="control-label">Website:</label> <input type="text" name="website" value="https://" class="form-control" > </div> <div class="form-group mb-4"> <label class="control-label">Password:</label> <div class="input-group mb-4"> <input type="password" name="pass" class="form-control" > <span class="input-group-addon"><i class="icon-user"></i></span> </div> </div> <div class="form-group mb-4"> <label class="control-label">Confirm Password:</label> <div class="input-group"> <input type="password" name="cpass" class="form-control"> <span class="input-group-addon"><i class="icon-user"></i></span> </div> </div> <input type="submit" value="Submit" class="btn btn-primary ml-3 mt-3"> </form>
© 2021 DesignReset
Coded with
Alan Green
Lead Developer
Todo
Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark
New Task is added by Ernest Reeves
Dinner with Kelly Young has been moved to Completed Board by Dale Butler
Event Notifications
New Event has been added on 15 Dec 2020
Collect documents from Kelly at the restaurant tommorrow.
Meeting Event on 12 Nov has been updated to 8 PM
New Event Seminar organised by Design Reset will be held on 25 January
Today's Conference is Cancelled.
Meeting with Project Lead on 01 Jan has been updated to 15 Jan