In this job application form we are using html and css.
<!DOCTYPE html>
<html>
<head>
<title>ONLINE JOB APPLICATION FORM</title>
<style>
body{
background-image:url(https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
legend{
color: aliceblue;
background-color: rgb(102, 27, 193);
padding: 2px;
border: 2px solid red;
border-radius:0px 50px ;
}
fieldset{
background-color: rgba(52, 222, 238, 0.53);
width: 1000px;
margin-top: 30px;
}
input:hover{
background-color: rgb(229, 52, 223);
color: beige;
border-radius: 10px;
}
</style>
</head>
<body>
<fieldset>
<legend>PERSONAL INFORMATION</legend>
<form>
<table>
<tr>
<td><label>FIRST NAME </label></td>
<td><input type="text"></td>
<td><label>MIDDLE NAME </label></td>
<td><input type="text"></td>
<td><label>LAST NAME </label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>FATHER NAME </label></td>
<td><input type="text"></td>
<td><label>MOTHER NAME </label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label></label>PHONE NUMBER</td>
<td></td>
<td><label>LANDLINE NUMBER </label></td>
<td><input type="teL"></td>
<td><label>MOBILE NUMBER </label></td>
<td><input type="teL"></td>
</tr>
<tr>
<td><label>Date Of Birth</label></td>
<td><input type="date"></td>
<td><label>PLACE OF BIRTH </label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label>GENDER</label></td>
<td><input type="radio" name="aa">MALE</td>
<td><input type="radio" name="aa">FEMALE</td>
</tr>
<tr>
<td><label>HIGHEST QUALIFICATION</label></td>
<td><input type="text"></td>
<td><label>YEAR OF PASSING</label></td>
<td><input type="date"></td>
</tr>
<tr>
<td><label>LANGUAGES KNOWN</label></td>
<td><input type="checkbox">ENGLISH</td>
<td><input type="checkbox">HINDI</td>
<td><input type="checkbox">KANNADA</td>
<td><input type="checkbox">TELUGU</td>
<td><input type="checkbox">TAMIL</td>
</tr>
<tr>
<td><label>HOBBIES</label></td>
<td><input type="checkbox">READING BOOKS</td>
<td><input type="checkbox">CODING</td>
<td><input type="checkbox">BATMINTON</td>
<td><input type="checkbox">CYCLINGU</td>
<td><input type="checkbox">WACTHING MOVIES</td>
</tr>
<tr>
<td><label>ABOUT YOURSELF</label></td>
<td><textarea cols="27" rows="5" placeholder="ENTER YOUR ADDRESS"></textarea></td>
</tr>
<tr>
<td>NATIONALITY</td>
<td><select>
<option>--select--</option>
<option>Afghanistan</option>
<option>Algeria</option>
<option>Australia</option>
<option>Austria</option>
<option>Bangladesh</option>
<option>Belgium</option>
<option>Belize</option>
<option>Bhutan</option>
<option>Brazil</option>
<option>Canada</option>
<option>China</option>
<option>Colombia</option>
<option>Cuba</option>
<option>Czechia (Czech Republic)</option>
<option>Denmark</option>
<option>Egypt</option>
<option>France</option>
<option>Germany</option>
<option>India</option>
<option>Italy</option>
<option>Japan</option>
<option>Pakistan</option>
<option>United Kingdom</option>
<option>United States of America</option>
<option>Zambia</option>
</select></td>
<tr>
</tr>
<td><label>AADHAR CARD NUMBER </label></td>
<td><input type="tel"></td>
<td><label>PANCARD NUMBER </label></td>
<td><input type="text" pattern="[1-9]{12}"></td>
</tr>
</table>
</form>
</fieldset>
<fieldset>
<legend>EDUCATION DETAILS</legend>
<form>
<table>
<tr>
<th><label>S.NO </label></th>
<th><label>QUALIFICATION </label></th><td></td>
<th><label>INSTITUTE/UNIVERSITY </label></th><td></td><td> </td>
<th><label>YEAR OF PASSING </label></th>
</tr>
<tr>
<td><label>1</label></td>
<td><input type="text"></td><td></td>
<td><input type="text"></td><td></td><td> </td>
<td><input type="date"></td>
</tr>
<tr>
<td><label>2</label></td>
<td><input type="text"></td><td></td>
<td><input type="text"></td><td></td><td> </td>
<td><input type="date"></td>
</tr>
<tr>
<td><label>3</label></td>
<td><input type="text"></td><td></td>
<td><input type="text"></td><td></td><td> </td>
<td><input type="date"></td>
</tr>
</table>
</form>
</fieldset>
<fieldset>
<legend>WORK EXPERIENCE</legend>
<form>
<table>
<tr>
<th><label>S.NO </label></th>
<th><label>COMPANY</label></th>
<th><label>WORK/ROLE</label></th><td></td>
<th><label>FROM DATE</label></th><td></td>
<th><label>TO DATE</label></th>
</tr>
<tr>
<td><label>1</label></td>
<td><textarea cols="15" rows="7"></textarea></td>
<td><textarea cols="15" rows="7"></textarea></td><td></td>
<td><input type="date"></td><td></td>
<td><input type="date"></td>
</tr>
</tr>
<tr>
<td><label>2</label></td>
<td><textarea cols="15" rows="7"></textarea></td>
<td><textarea cols="15" rows="7"></textarea></td><td></td>
<td><input type="date"></td><td></td>
<td><input type="date"></td>
</tr>
<tr>
<td><label>3</label></td>
<td><textarea cols="15" rows="7"></textarea></td>
<td><textarea cols="15" rows="7"></textarea></td><td></td>
<td><input type="date"></td><td></td>
<td><input type="date"></td>
</tr>
</table>
</form>
</fieldset>
<fieldset>
<legend>OTHER DETAILS</legend>
<form>
<table>
<tr>
<td><label>JOBTYPE</label></td>
<td><input type="radio" name="aa">PERMANENT</td>
<td><input type="radio" name="aa">CONTRACT</td>
<td><input type="radio" name="aa">OTHER</td>
</tr>
<tr>
<td><label>DATE OF JOINING</label></td>
<td><input type="date"></td>
<td><label>TIME OF JOINING</label></td>
<td><input type="time"></td>
</tr>
<tr>
<td><label>PREFER JOB LOCATION</label></td>
<td><input type="radio" name="bb">BANGLORE</td>
<td><input type="radio" name="bb">MUMBAI</td>
<td><input type="radio" name="bb">PUNE</td>
</tr>
<tr>
<td><label>WILLING TO RELOCATE</label></td>
<td><input type="radio" name="aa">YES</td>
<td><input type="radio" name="aa">NO</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td><label>I AM HERE DECLARING THAT ALL THE ABOVE MENTIONED INFORMATION IS TRUE AS PER MY KNOWLEDGE</label></td>
</tr>
<tr>
<td><input type="submit"></td>
<td><button>Reset</button></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>Output:–
