John Doe
PHP Developer- Main Category
- Dashboard
- Appearance
- Page Layouts
- Color Schemes
- Sidebar Layouts
- Components
- UI ComponentsHot
- Bootstrap Components
- Tables
- Charts
- Forms
- Basic Forms
- Form Layouts
- Validations
- Form Components
- Editable Form
- Steps
- Dropzone
- Editors
- Pages
- Login
- Register
- Error 404
- Error 500
- Profile
- Pricing
Form - Validations
One stop solution for perfect admin dashboard!
- Home
- Form - Validations
Two Column Form
<form class="p-20" id="two-column"> <h5 class="underline mt-n">Account Info</h5> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name13">Full Name <sup class="color-danger">*</sup></label> <input type="text" class="form-control" id="name13" placeholder="Enter Your Full Name" data-validation="required"> </div> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <div class="form-group"> <label for="username13">Username <sup class="color-danger">*</sup></label> <input type="text" class="form-control" id="username13" placeholder="Enter Desired Username" data-validation="length" data-validation-length="min5"> </div> </div> <!-- /.col-md-6 --> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="exampleInputEmail13">Email address <sup class="color-danger">*</sup></label> <input type="email" class="form-control" id="exampleInputEmail13" placeholder="Enter Your Email Id" data-validation="email" > </div> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <div class="form-group"> <label for="contact13">Contact Number</label> <input type="text" class="form-control" id="contact13" placeholder="Enter Your Mobile Phone Number"> </div> </div> <!-- /.col-md-6 --> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="exampleInputPassword13">Password <sup class="color-danger">*</sup></label> <input type="password" class="form-control" id="exampleInputPassword13" name="pass" placeholder="Enter Strong Password" data-validation="length" data-validation-length="min8"> </div> </div> <!-- /.col-md-6 --> <div class="col-md-6"> <div class="form-group"> <label for="exampleInputPassword14">Confirm Password <sup class="color-danger">*</sup></label> <input type="password" class="form-control" id="exampleInputPassword14" placeholder="Confirm your password" data-validation="confirmation" data-validation-confirm="exampleInputPassword13"> </div> </div> <!-- /.col-md-6 --> </div> <div class="row"> <div class="col-md-12"> <div class="form-group checkbox"> <label> <input type="checkbox" data-validation="required"> I accept <a href="#" class="color-primary">terms & conditions</a> </label> </div> </div> <!-- /.col-md-12 --> <div class="col-md-12"> <div class="btn-group pull-right mt-10" role="group"> <button type="reset" class="btn btn-gray btn-wide"><i class="fa fa-times"></i>Cancel</button> <button type="submit" class="btn bg-black btn-wide"><i class="fa fa-arrow-right"></i>Submit</button> </div> <!-- /.btn-group --> </div> <!-- /.col-md-12 --> </div></form><!-- ========== JAVASCRIPT ========== --><script src="js/form-validator/jquery.form-validator.min.js"></script><script> $(function($) { $.validate({ form : '#two-column', modules : 'security' }); });</script>
Useful Sidebar
Code for help is added within the main page. Check for code below the example.
You can use this sidebar to help your end-users. You can enter any HTML in this sidebar.
This sidebar can be a 'fixed to top' or you can unpin it to scroll with main page.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.