<div class="container py-3">
<div class="row">
<div class="col-md-12">
<h2 class="text-center mb-3">Bootstrap 4 Forms</h2>
<nav class="btn-toolbar justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group btn-group-lg" role="group">
<a class="btn btn-primary active" href="#formLogin">Login</a>
<a class="btn btn-primary" href="#formRegister">Sign-up</a>
<a class="btn btn-primary" href="#formChangePassword">Password</a>
<a class="btn btn-primary" href="#formResetPassword">Reset</a>
<a class="btn btn-primary" href="#formPayment">Payment</a>
<a class="btn btn-primary" href="#formUserEdit">User</a>
<a class="btn btn-primary" href="#formContact">Contact</a>
<a class="btn btn-primary" href="#formComplex">Complex</a>
</div>
</nav>
<hr class="mb-4">
<div class="row justify-content-center">
<div class="col-md-6">
<span class="anchor" id="formLogin"></span>
<!-- form card login -->
<div class="card card-outline-secondary">
<div class="card-header">
<h3 class="mb-0">Login</h3>
</div>
<div class="card-body">
<form autocomplete="off" class="form" id="formLogin" name="formLogin" role="form">
<div class="form-group">
<label for="uname1">Username</label>
<input class="form-control" id="uname1" name="uname1" required="" type="text">
</div>
<div class="form-group">
<label>Password</label>
<input autocomplete="new-password" class="form-control" id="pwd1" required="" type="password">
</div>
<div class="form-check small">
<label class="form-check-label">
<input class="form-check-input" type="checkbox">
<span>Remember me on this computer</span>
</label>
</div>
<button class="btn btn-success btn-lg float-right" type="button">Login</button>
</form>
</div><!--/card-block-->
</div><!-- /form card login -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<span class="anchor" id="formRegister"></span>
<hr class="mb-5">
<!-- form card register -->
<div class="card card-outline-secondary">
<div class="card-header">
<h3 class="mb-0">Sign Up</h3>
</div>
<div class="card-body">
<form autocomplete="off" class="form" role="form">
<div class="form-group">
<label for="inputName">Name</label>
<input class="form-control" id="inputName" placeholder="Full name" type="text">
</div>
<div class="form-group">
<label for="inputEmail3">Email</label>
<input class="form-control" id="inputEmail3" placeholder="Email" required="" type="email">
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<input class="form-control" id="inputPassword3" placeholder="Password" required="" type="password">
<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
</div>
<div class="form-group">
<label for="inputVerify3">Verify</label>
<input class="form-control" id="inputVerify3" placeholder="Password (again)" required="" type="password">
</div>
<div class="form-group">
<button class="btn btn-success btn-lg float-right" type="submit">Register</button>
</div>
</form>
</div>
</div><!-- /form card register -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<span class="anchor" id="formChangePassword"></span>
<hr class="mb-5">
<!-- form card change password -->
<div class="card card-outline-secondary">
<div class="card-header">
<h3 class="mb-0">Change Password</h3>
</div>
<div class="card-body">
<form autocomplete="off" class="form" role="form">
<div class="form-group">
<label for="inputPasswordOld">Current Password</label>
<input class="form-control" id="inputPasswordOld" required="" type="password">
</div>
<div class="form-group">
<label for="inputPasswordNew">New Password</label>
<input class="form-control" id="inputPasswordNew" required="" type="password">
<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
</div>
<div class="form-group">
<label for="inputPasswordNewVerify">Verify</label>
<input class="form-control" id="inputPasswordNewVerify" required="" type="password">
<span class="form-text small text-muted">To confirm, type the new password again.</span>
</div>
<div class="form-group">
<button class="btn btn-success btn-lg float-right" type="submit">Save</button>
</div>
</form>
</div>
</div><!-- /form card change password -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<span class="anchor" id="formResetPassword"></span>
<hr class="mb-5">
<!-- form card reset password -->
<div class="card card-outline-secondary">
<div class="card-header">
<h3 class="mb-0">Password Reset</h3>
</div>
<div class="card-body">
<form autocomplete="off" class="form" role="form">
<div class="form-group">
<label for="inputResetPasswordEmail">Email</label>
<input class="form-control" id="inputResetPasswordEmail" required="" type="email">
<span class="form-text small text-muted" id="helpResetPasswordEmail">Password reset instructions will be sent to this email address.</span>
</div>
<div class="form-group">
<button class="btn btn-success btn-lg float-right" type="submit">Reset</button>
</div>
</form>
</div>
</div><!-- /form card reset password -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<span class="anchor" id="formPayment"></span>
<hr class="my-5">
<!-- form card cc payment -->
<div class="card card-outline-secondary">
<div class="card-body">
<h3 class="text-center">Credit Card Payment</h3>
<hr>
<div class="alert alert-info">
<a class="close" data-dismiss="alert" href="#">×</a>CVC code is required.
</div>
<form autocomplete="off" class="form" role="form">
<div class="form-group">
<label for="cc_name">Card Holder's Name</label>
<input class="form-control" id="cc_name" pattern="\w+ \w+.*" required="required" title="First and last name" type="text">
</div>
<div class="form-group">
<label>Card Number</label>
<input autocomplete="off" class="form-control" maxlength="20" pattern="\d{16}" required="" title="Credit card number" type="text">
</div>
<div class="form-group row">
<label class="col-md-12">Card Exp. Date</label>
<div class="col-md-4">
<select class="form-control" name="cc_exp_mo" size="0">
<option value="01">
01
</option>
<option value="02">
02
</option>
<option value="03">
03
</option>
<option value="04">
04
</option>
<option value="05">
05
</option>
<option value="06">
06
</option>
<option value="07">
07
</option>
<option value="08">
08
</option>
<option value="09">
09
</option>
<option value="10">
10
</option>
<option value="11">
11
</option>
<option value="12">
12
</option>
</select>
</div>
<div class="col-md-4">
<select class="form-control" name="cc_exp_yr" size="0">
<option>
2016
</option>
<option>
2017
</option>
<option>
2018
</option>
<option>
2019
</option>
<option>
2020
</option>
<option>
2021
</option>
<option>
2022
</option>
<option>
2023
</option>
<option>
2024
</option>
<option>
2025
</option>
</select>
</div>
<div class="col-md-4">
<input autocomplete="off" class="form-control" maxlength="3" pattern="\d{3}" placeholder="CVC" required="" title="Three digits on the back of your card" type="text">
</div>
</div>
<div class="row">
<label class="col-md-12">Amount</label>
</div>
<div class="form-inline">
<div class="input-group">
<div class="input-group-addon">
$
</div>
<input class="form-control text-right" id="exampleInputAmount" placeholder="39" type="text">
<div class="input-group-addon">
.00
</div>
</div>
</div>
<hr>
<div class="form-group row">
<div class="col-md-6">
<button class="btn btn-default btn-lg btn-block" type="reset">Cancel</button>
</div>
<div class="col-md-6">
<button class="btn btn-success btn-lg btn-block" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div><!-- /form card cc payment -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<span class="anchor" id="formUserEdit"></span>
<hr class="my-5">
<!-- form user info -->
<div class="card card-outline-secondary">
<div class="card-header">
<h3 class="mb-0">User Information</h3>
</div>
<div class="card-body">
<form autocomplete="off" class="form" role="form">
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">First name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="Jane">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="Bishop">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Email</label>
<div class="col-lg-9">
<input class="form-control" type="email" value="email@gmail.com">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Company</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Website</label>
<div class="col-lg-9">
<input class="form-control" type="url" value="">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Time Zone</label>
<div class="col-lg-9">
<select class="form-control" id="user_time_zone" size="0">
<option value="Hawaii">
(GMT-10:00) Hawaii
</option>
<option value="Alaska">
(GMT-09:00) Alaska
</option>
<option value="Pacific Time (US & Canada)">
(GMT-08:00) Pacific Time (US & Canada)
</option>
<option value="Arizona">
(GMT-07:00) Arizona
</option>
<option value="Mountain Time (US & Canada)">
(GMT-07:00) Mountain Time (US & Canada)
</option>
<option selected="selected" value="Central Time (US & Canada)">
(GMT-06:00) Central Time (US & Canada)
</option>
<option value="Eastern Time (US & Canada)">
(GMT-05:00) Eastern Time (US & Canada)
</option>
<option value="Indiana (East)">
(GMT-05:00) Indiana (East)
</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Username</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="janeuser">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Password</label>
<div class="col-lg-9">
<input class="form-control" type="password" value="11111122333">
<small class="form-text text-muted" id="passwordHelpBlock">Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.</small>
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Confirm</label>
<div class="col-lg-9">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input class="btn btn-secondary" type="reset" value="Cancel">
<input class="btn btn-primary" type="button" value="Save Changes">
</div>
</div>
</form>
</div>
</div><!-- /form user info -->
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<span class="anchor" id="formContact"></span>
<hr class="my-5">
<!-- form contact -->
<div class="card card-outline-secondary">
<div class="card-header">
<h3 class="mb-0">Contact</h3>
</div>
<div class="card-body">
<form autocomplete="off" class="form" role="form">
<fieldset>
<label class="mb-0" for="name2">Name</label>
<div class="row mb-1">
<div class="col-lg-12">
<input class="form-control" id="name2" name="name2" required="" type="text">
</div>
</div>
<label class="mb-0" for="email2">Email</label>
<div class="row mb-1">
<div class="col-lg-12">
<input class="form-control" id="email2" name="email2" required="" type="text">
</div>
</div>
<label class="mb-0" for="message2">Message</label>
<div class="row mb-1">
<div class="col-lg-12">
<textarea class="form-control" id="message2" name="message2" required="" rows="6"></textarea>
</div>
</div>
<button class="btn btn-secondary btn-lg float-right" type="submit">Send Message</button>
</fieldset>
</form>
</div>
</div><!-- /form contact -->
</div><!--/col-->
</div>
<div class="row justify-content-center">
<div class="col-md-10 offset-md-1">
<span class="anchor" id="formComplex"></span>
<hr class="my-5">
<!-- form complex example -->
<div class="card card-outline-secondary">
<div class="card-header">
<h3 class="mb-0">Complex Form Example</h3>
</div>
<div class="card-body">
<div class="row mt-4">
<div class="col-sm-5 pb-3">
<label for="exampleAccount">Account #</label>
<input class="form-control" id="exampleAccount" placeholder="XXXXXXXXXXXXXXXX" type="text">
</div>
<div class="col-sm-3 pb-3">
<label for="exampleCtrl">Control #</label>
<input class="form-control" id="exampleCtrl" placeholder="0000" type="text">
</div>
<div class="col-sm-4 pb-3">
<label for="exampleAmount">Amount</label>
<div class="input-group">
<div class="input-group-addon">
$
</div>
<input class="form-control" id="exampleAmount" placeholder="Amount" type="number">
</div>
</div>
<div class="col-sm-6 pb-3">
<label for="exampleFirst">First Name</label>
<input class="form-control" id="exampleFirst" type="text">
</div>
<div class="col-sm-6 pb-3">
<label for="exampleLast">Last Name</label>
<input class="form-control" id="exampleLast" type="text">
</div>
<div class="col-sm-6 pb-3">
<label for="exampleCity">City</label> <input class="form-control" id="exampleCity" type="text">
</div>
<div class="col-sm-3 pb-3">
<label for="exampleSt">State</label> <select class="form-control custom-select" id="exampleSt">
<option class="text-white bg-warning">
Pick a state
</option>
<option value="AL">
Alabama
</option>
<option value="AK">
Alaska
</option>
<option value="AZ">
Arizona
</option>
<option value="AR">
Arkansas
</option>
<option value="CA">
California
</option>
<option value="CO">
Colorado
</option>
<option value="CT">
Connecticut
</option>
<option value="DE">
Delaware
</option>
<option value="DC">
District Of Columbia
</option>
<option value="FL">
Florida
</option>
<option value="GA">
Georgia
</option>
<option value="HI">
Hawaii
</option>
<option value="ID">
Idaho
</option>
<option value="IL">
Illinois
</option>
<option value="IN">
Indiana
</option>
<option value="IA">
Iowa
</option>
<option value="KS">
Kansas
</option>
<option value="KY">
Kentucky
</option>
<option value="LA">
Louisiana
</option>
<option value="ME">
Maine
</option>
<option value="MD">
Maryland
</option>
<option value="MA">
Massachusetts
</option>
<option value="MI">
Michigan
</option>
<option value="MN">
Minnesota
</option>
<option value="MS">
Mississippi
</option>
<option value="MO">
Missouri
</option>
<option value="MT">
Montana
</option>
<option value="NE">
Nebraska
</option>
<option value="NV">
Nevada
</option>
<option value="NH">
New Hampshire
</option>
<option value="NJ">
New Jersey
</option>
<option value="NM">
New Mexico
</option>
<option value="NY">
New York
</option>
<option value="NC">
North Carolina
</option>
<option value="ND">
North Dakota
</option>
<option value="OH">
Ohio
</option>
<option value="OK">
Oklahoma
</option>
<option value="OR">
Oregon
</option>
<option value="PA">
Pennsylvania
</option>
<option value="RI">
Rhode Island
</option>
<option value="SC">
South Carolina
</option>
<option value="SD">
South Dakota
</option>
<option value="TN">
Tennessee
</option>
<option value="TX">
Texas
</option>
<option value="UT">
Utah
</option>
<option value="VT">
Vermont
</option>
<option value="VA">
Virginia
</option>
<option value="WA">
Washington
</option>
<option value="WV">
West Virginia
</option>
<option value="WI">
Wisconsin
</option>
<option value="WY">
Wyoming
</option>
</select>
</div>
<div class="col-sm-3 pb-3">
<label for="exampleZip">Postal Code</label>
<input class="form-control" id="exampleZip" type="text">
</div>
<div class="col-md-6 pb-3">
<label for="exampleAccount">Preferred Color (radio buttons)</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary">
<input autocomplete="off" checked id="blue" name="options" type="radio">
Blue
</label>
<label class="btn btn-secondary">
<input autocomplete="off" id="red" name="options" type="radio">
Red
</label>
<label class="btn btn-secondary">
<input autocomplete="off" id="green" name="options" type="radio">
Green
</label>
<label class="btn btn-secondary">
<input autocomplete="off" id="yellow" name="options" type="radio">
Yellow
</label>
<label class="btn btn-secondary">
<input autocomplete="off" id="black" name="options" type="radio">
Black
</label>
<label class="btn btn-secondary active">
<input autocomplete="off" id="orange" name="options" type="radio">
Orange
</label>
</div>
</div>
<div class="col-md-6 pb-3">
<label for="exampleMessage">Message</label>
<textarea class="form-control" id="complexExampleMessage" rows="3"></textarea>
<small class="text-muted">Add any notes here.</small>
</div>
</div>
</div>
<div class="card-footer">
<div class="float-right">
<input class="btn btn-secondary" type="reset" value="Cancel">
<input class="btn btn-primary" type="button" value="Send">
</div>
</div>
</div><!--/card-->
</div>
</div><!--/row-->
</div><!--/col-->
</div><!--/row-->
</div><!--/container-->
<!-- Scroll to Top -->
<a id="scroll-to-top" href="#" class="btn btn-primary btn-lg" role="button" title="Return to top of page" data-toggle="tooltip" data-placement="left"><i class="fa fa-arrow-up"></i></a>
/* Scroll to Top */
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#scroll-to-top').fadeIn();
} else {
$('#scroll-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#scroll-to-top').click(function () {
$('#scroll-to-top').tooltip('hide');
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
$('#scroll-to-top').tooltip('show');
});
