<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <center><h3>School Admission Form</h3></center> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="First Name">First Name</label> <div class="col-md-4"> <input id="First Name" name="First Name" type="text" placeholder="Enter First Name" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Middle Name">Middle Name</label> <div class="col-md-4"> <input id="Middle Name" name="Middle Name" type="text" placeholder="Enter Middle Name" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Last Name">Last Name</label> <div class="col-md-4"> <input id="Last Name" name="Last Name" type="text" placeholder="Enter Last Name" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="DOB">Date Of Birth</label> <div class="col-md-4"> <input id="DOB" name="DOB" type="date" class="form-control input-md" required=""> <button id="Autoage" name="Autoage" class="btn" onclick="setAge()">Calculate age</button> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="Gender">Gender</label> <div class="col-md-4"> <div class="radio"> <label for="Gender-0"> <input type="radio" name="Gender" id="Gender-0" value="1" checked="checked"> Male </label> </div> <div class="radio"> <label for="Gender-1"> <input type="radio" name="Gender" id="Gender-1" value="2"> Female </label> </div> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="Father Name">Father Name</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">Mr.</span> <input id="Father Name" name="Father Name" class="form-control" placeholder="Enter Father Name" type="text" required=""> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Mother Name">Mother Name</label> <div class="col-md-4"> <input id="Mother Name" name="Mother Name" type="text" placeholder="Enter Mother Name" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="candAge">Student Age</label> <div class="col-md-2"> <output name="AGE" id="candAge"></output> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="Class">Class</label> <div class="col-md-2"> <select id="Class" name="Class" class="form-control"> <option value="1">1st std</option> <option value="2">2nd std</option> <option value="3">3rd std</option> <option value="4">4th std</option> <option value="5">5th std</option> <option value="6">6th std</option> <option value="7">7th std</option> <option value="8">8th std</option> <option value="9">9th std</option> <option value="10">10th std</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Caste">Caste</label> <div class="col-md-4"> <input id="Caste" name="Caste" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Religion">Religion</label> <div class="col-md-4"> <input id="Religion" name="Religion" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="PSN">Previous School Name</label> <div class="col-md-5"> <input id="PSN" name="PSN" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Nationality">Nationality</label> <div class="col-md-4"> <input id="Nationality" name="Nationality" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="button1id"></label> <div class="col-md-8"> <button id="button1id" name="button1id" class="btn btn-success">Submit</button> <button id="button2id" name="button2id" class="btn btn-danger">Cancel</button> </div> </div> </fieldset> </form> </div>

.container { border-radius: 5px; background-color: lightgrey; padding: 20px; } input[type=text], select, textarea{ width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 12px; box-sizing: border-box; resize: vertical; } label { padding: 12px 12px 6px 0; display: inline-block; }

var minAge = 6; var maxAge = 16; function _calcAge() { var date = new Date(document.getElementById("DOB").value); var today = new Date(); var timeDiff = Math.abs(today.getTime() - date.getTime()); var age1 = Math.ceil(timeDiff / (1000 * 3600 * 24)) / 365; document.getElementById('candAge').value = parseInt(age1); return age1; } //Compares calculated age with minimum age and acts according to rules// function setAge() { var age = _calcAge(); //alert("my age is " + age); if (age < minAge) { window.alert("You are not allowed to apply for admission in school, minimum age is 6"); } else if (age > maxAge) { window.alert("You are not allowed to apply for admission in school, maximum age is 16"); } else { var std = parseInt(age) - 5; window.alert("The suitable class to your age is " + std); // window.open(main.htm, _self); } }