Bootstrap Snippet form using HTML Bootstrap Javascript

"form"
Bootstrap 4.1.1 Snippet by durgesh361

4.1.1

2.7K 0 Fav

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <link href="jquery-ui.min.css" rel="stylesheet" type="text/css"> <style> .full_form{ background: #eee; margin-top: 50px; } .all_info { margin-top: 20px; } .form-control:focus { border-color: none outline: 0; -webkit-box-shadow: none; box-shadow: none; background:transparent; } label{ color: #737272; } .top_head{ top: 48px; background: #eaf5c7; font-weight: bold; } .top_head h3{ font-weight: bold; } span{ color:red; } .sub_btn button{ margin-top: 30px; margin-bottom: 30px; width: 100px; height: 40px; background: green; border:0; color:#fff; } .form-control{ border-radius: 0; box-shadow: none; border: 0; height:27px; background: transparent; border-bottom: 1px solid #000; } </style> </head> <body> <div class="container"> <form action="#"> <div class="top_head text-center col-md-10 col-md-offset-1"> <h3 class="">Employment Form</h3> </div> <div class="full_form col-md-10 col-md-offset-1"> <div class="all_info"> <div class="row"> <div class="form-group col-md-4"> <label for="usr">First Name:</label> <input type="text" class="form-control" id="fname"> <span id="fnameerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Middle Name:</label> <input type="text" class="form-control" id="mname"> <span id="mnameerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Last Name:</label> <input type="text" class="form-control" id="lname"> <span id="lnameerr"></span> </div> </div> <div class="row"> <div class="form-group name col-md-4"> <label for="usr">Date Of Birth:</label> <input type="text" name="" class="form-control" id="datepicker"> <span id="doberr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Contact1</label> <input type="text" class="form-control" id="con"> <span id="con1err"></span> </div> <div class="form-group col-md-4"> <label for="usr">Contact2</label> <input type="text" class="form-control" id="conc"> <span id="con2err"></span> </div> </div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="usr">Email:</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-8"> <label for="usr">How Did You Learn About Our company:</label> <input type="text" class="form-control textarea" id="about"> <span id="abouterr"></span> </div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="sel1">You Are Freshers/Experience</label> <select class="form-control" id="category"> <option>Select</option> <option value="Freshers">For Freshers</option> <option value="experience">For Experience</option> </select> </div> <div class="form-group col-md-4"></div> <div class="form-group col-md-4"></div> </div>  <div class="fresh" style="display: none" id="fresh"> <div class="row"> <div class="form-group col-md-4"> <label for="usr">S.s.c</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Year Of Passing</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">your Percentage</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">H.s.c</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Year Of Passing</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">your Percentage</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="sel1">Choose Your Graduation</label> <select class="form-control" id="sel1"> <option value="BE">BE</option> <option value="Bca.">Bca.</option> <option value="Bsc">Bsc</option> <option value="B.com">B.Com</option> <option value="B-Tech">B.Tech</option> <option value="Bsci.IT/CS">B.Sc(IT/CS)</option> <option value="Diploma">Diploma In Engg.</option> </select> </div> <div class="form-group col-md-4"></div> <div class="form-group col-md-4"></div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="usr">Enter Your Institute Name</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Year Of Passing</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">your Percentage</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="sel1">Choose Your Master Degree</label> <select class="form-control" id="sel1"> <option>Choose a Master Degree <span></span></option> <option value="M.E.">M.E.</option> <option value="M.Ca">MCA</option> <option value="M.Ba">MBA</option> <option value="M.Com">M.Com.</option> <option value="M.Tech.">M.Tech.</option> <option value="M.Sc.IT">M.Sc.(IT)</option> </select> </div> <div class="form-group col-md-4"></div> <div class="form-group col-md-4"></div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="usr">Enter Your Institute Name</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Year Of Passing</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">your Percentage</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="email">Programming Languages Skills<span></span></label><br> <select name="skill[]" id="example" class="form-control" multiple="multiple" style="display: none;"> <option selected value="Html">HTML</option> <option value="Css">CSS</option> <option value="Bootstrap">Bootstrap</option> <option value="Php">Php</option> <option value="JavaScript">JavaScript</option> <option value="Java">Java</option> <option value="Asp.Net">Asp.Net</option> <option value="Android">Android</option> <option value="SQL">SQL</option> <option value="PL/SQL">PL/SQL</option> <option value="MySQL">MySQL</option> </select> </div> </div> </div>  <div class="exp" style="display: none" id="exp"> <div class="row"> <div class="form-group col-md-3"> <label for="sel1">Total Experince</label> <select class="form-control" id="sel1"> <option value="">Select Duration<span>*</span></option> <option value="0-6">0-6 month</option> <option value="6-1">6 m-1 yr</option> <option value="1-1.5">1 yr-1.5 yr</option> <option value="1.5-2">1.5 yr-2 yr</option> <option value="2-3">2 yr-3 yr</option> <option value="3-4">3 yr-4 yr</option> <option value="4-5">4 yr-5 yr</option> <option value="5-6+">5 yr-6 yr+</option> </select> </div> <div class="form-group col-md-3"> <label for="sel1">Notice Period</label> <select class="form-control" id="sel1"> <option value="">Select Duration<span>*</span></option> <option value="0-6">0-6 month</option> <option value="6-1">6 m-1 yr</option> <option value="1-1.5">1 yr-1.5 yr</option> <option value="1.5-2">1.5 yr-2 yr</option> <option value="2-3">2 yr-3 yr</option> <option value="3-4">3 yr-4 yr</option> <option value="4-5">4 yr-5 yr</option> <option value="5-6+">5 yr-6 yr+</option> </select> </div> <div class="form-group col-md-3"> <label for="usr">Current Sallery</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-3"> <label for="usr">Desired Sallery</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> <div class="row"> <div class="form-group col-md-3"> <label for="sel1">Company Name</label> <input type="text" class="form-control" id="email"> </div> <div class="form-group col-md-3"> <label for="sel1">Location</label> <input type="text" class="form-control" id="email"> </div> <div class="form-group col-md-3"> <label for="sel1">Notice Period</label> <select class="form-control" id="sel1"> <option value="">Select Duration<span>*</span></option> <option value="0-6">0-6 month</option> <option value="6-1">6 m-1 yr</option> <option value="1-1.5">1 yr-1.5 yr</option> <option value="1.5-2">1.5 yr-2 yr</option> <option value="2-3">2 yr-3 yr</option> <option value="3-4">3 yr-4 yr</option> <option value="4-5">4 yr-5 yr</option> <option value="5-6+">5 yr-6 yr+</option> </select> </div> <div class="form-group col-md-3"> <label for="usr">Role/Title</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> <div class="row"> <div class="form-group col-md-8"> <label for="usr">Reason For Leaving Company</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="usr">S.s.c</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Year Of Passing</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">your Percentage</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">H.s.c</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Year Of Passing</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">your Percentage</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="sel1">Choose Your Graduation</label> <select class="form-control" id="sel1"> <option value="BE">BE</option> <option value="Bca.">Bca.</option> <option value="Bsc">Bsc</option> <option value="B.com">B.Com</option> <option value="B-Tech">B.Tech</option> <option value="Bsci.IT/CS">B.Sc(IT/CS)</option> <option value="Diploma">Diploma In Engg.</option> </select> </div> <div class="form-group col-md-4"></div> <div class="form-group col-md-4"></div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="usr">Enter Your Institute Name</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Year Of Passing</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">your Percentage</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="sel1">Choose Your Master Degree</label> <select class="form-control" id="sel1"> <option>Choose a Master Degree <span></span></option> <option value="M.E.">M.E.</option> <option value="M.Ca">MCA</option> <option value="M.Ba">MBA</option> <option value="M.Com">M.Com.</option> <option value="M.Tech.">M.Tech.</option> <option value="M.Sc.IT">M.Sc.(IT)</option> </select> </div> <div class="form-group col-md-4"></div> <div class="form-group col-md-4"></div> </div> <div class="row"> <div class="form-group col-md-4"> <label for="usr">Enter Your Institute Name</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">Year Of Passing</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> <div class="form-group col-md-4"> <label for="usr">your Percentage</label> <input type="text" class="form-control" id="email"> <span id="emailerr"></span> </div> </div> </div>  <div class="sub_btn text-center"> <button type="submit" id="sub">Submit</button> <button type="reset" id="res">Reset</button> </div> </div> </form> </div>

https://bootsnipp.com/user/snippets/VvEVV#

Related: See More

Vue Black Dashboard Pro

Vue Black Dashboard Pro

login-form

Login Form

Contact Form

Questions / Comments:

Posting GuidelinesFormatting