What is bio data from?
A bio data contains personal and professional information about a person.
Generally Colleges/Universities and many companies generates this type of form to collect details about personal, educational and work information from individuals.
 |
| HTML CSS bio-data form |
In this post you will learn how to create bio data form using HTML5 and CSS.
Student bio-data form for admission in university
In this form generation student’s personal and educational details are required. Do not forget to put course selection options. Because this is admission form, photo and previous year mark sheet’s soft copy also necessary.
Student bio-data form Source code
HTML
<!DOCTYPE html> <html> <head> <title>student bio data form</title> </head> <body> <header> <h1>Student Bio Data form</h1> </header> <section id="sec1"> <form name="f1" method="post" enctype="multipart/form-data"> <fieldset> <legend>Personal information:</legend> <label for="fn">First name:</label><br> <input type="text" name="fnm" required pattern="^[a-zA-Z ]*$" placeholder="Your name"><br> <label for="mn">Middle name:</label><br> <input type="text" name="mnm" required pattern="^[a-zA-Z ]*$" placeholder="Father's name"><br> <label for="ln">Last name:</label><br> <input type="text" name="lnm" required pattern="^[A-Za-z ]*$" placeholder="Surname"><br> <label for="bdt">Birthdate:</label><br> <input type="date" name="birth" required min=1990-01-01 max=2005-01-31><br> <label for="gen">Gender:</label><br> <input type="radio" name="gn" checked>Male <input type="radio" name="gn">Female<br> <label>Address:</label><br> <textarea rows="7" cols="23" required></textarea><br> <label for="state">State:</label><br> <input type="text" name="stat" required pattern="^[a-zA-Z ]*$"><br> <label for="cont">Country:</label><br> <input type="text" name="cont" required pattern="^[a-zA-Z ]*$"><br> <label for="ph">Phone no.:</label><br> <input type="tel" name="fnm" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{4}" placeholder="0000-00-0000"><br> <label for="em">Email:</label><br> <input type="email" name="eml" required pattern="^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4}$"><br> </fieldset><br> <section id="sec2"> <label for="school">Previous school/college name:</label><br> <input type="text" name="sch" required pattern="^[a-zA-Z .-]*$" placeholder="Enter previous school name"><br> <label for="perc">Percentage of previous year:</label><br> <input type="number" name="per" required min="50" max="99" placeholder="percentage">%<br> <label for="sport">Sports activity:</label><br> <input type="checkbox" name="sport">Cricket<br> <input type="checkbox" name="sport">Hockey<br> <input type="checkbox" name="sport">Football<br> <input type="checkbox" name="sport">Basketball<br> <input type="checkbox" name="sport">Badminton<br> <label for="perc">Select your course:</label><br> <select id="course" required> <option disabled selected value>Select course</option> <option>Bsc. IT</option> <option>Msc. IT</option> <option>Computer Science</option> <option>BCA</option> <option>MCA</option> <option>BBA</option> <option>MBA</option> <option>B.com</option> <option>M.com</option> <option>B.sc</option> <option>M.sc</option> <option>Nursing</option> </select><br> <label for="photo">Upload Photo:</label><br> <input type="file" name="loadphoto" required><br> <label for="result">Upload 10th & 12th Marksheets:</label><br> <input type="file" name="loadres" accept=".doc,.docx,.pdf" multiple required><br> </section> <section id="sec3"> <input type="submit"> <input type="reset"> </section> </form> </body> </html>
CSS:-
header { margin-top:10px; margin-left:50%; transform:translateX(-50%); background-color:#582949; text-align:center; color:#ffdeb0; padding:5px; } #sec1,#sec2,#sec3 { transform:translate(50%); width:50%; font-family:"Times New Roman", Times, serif; color:#333333; } #sec1 { background-color:#61c589; } #sec2 { background-color:#ffcc7b; } #sec3 { background-color:#ff805d; margin-top:20px; } h2 { color:#313742; } label,input[type=text],input[type=number],input[type=file],input[type=date],input[type=tel],input[type=email],textarea,select { margin:5px; padding:5px; width:50%; } input[type="submit"],input[type="reset"] { margin-left:20px; padding:5px; border:2px solid #0099CC; background-color:#CC66CC; } input[type="reset"]:hover { background-color:#0099FF; } input[type="submit"]:hover { background-color:#0099FF; }
Output of student bio-data form:-
Employee bio-data form for employment application
This from is designed for job seekers to get their personal educational and employment details. The employee have to input their personal details, educational history, previous company details, work experience, job role, position, etc..
Employee bio-data form Source code:-
HTML
<!DOCTYPE html> <html> <head> <title>employee bio data form</title> <link rel="stylesheet" href="emp_bio.css"> </head> <body> <section> <header> <h1>Employment Application</h1> </header> <form name="f1" method="post" enctype="multipart/form-data"> <fieldset> <legend>Personal info:</legend> <table class="t1"> <tr> <td> <label for="Name">Name:</label> </td> <td> <input type="text" name="fnm" required pattern="^[a-zA-Z ]*$" placeholder="Your name"><br> </td> <td> <input type="text" name="fnm" required pattern="^[a-zA-Z ]*$" placeholder="Father/husband name"><br> </td> <td> <input type="text" name="fnm" required pattern="^[a-zA-Z ]*$" placeholder="Surname"><br> </td> </tr> <tr> <td> <label for="bdt">Birthdate:</label> </td> <td> <input type="date" name="bdate" required min="1960-01-01" max="2000-12-31"> </td> </tr> <tr> <td> <label for="bdt">Gender:</label> </td> <td> <input type="radio" name="gen" checked>Male <input type="radio" name="gen">Female </td> </tr> <tr> <td> <label for="phdis">Physical disability:</label> </td> <td> <input type="radio" name="phy" checked>No <input type="radio" name="phy">Yes </td> </tr> <tr> <td> <label for="mrd">Maritial status:</label> </td> <td> <input type="radio" name="mrg" checked>Single <input type="radio" name="mrg">Married </td> </tr> <tr> <td> <label for="language">Language known:</label> </td> <td> <input type="checkbox" name="h">Hindi<br> <input type="checkbox" name="e">English<br> <input type="checkbox" name="o">Other </td> </tr> <tr> <td> <label>Address:</label> </td> <td> <input type="text" name="add1" required placeholder="address line 1"> </td> <td> <input type="text" name="add2" required placeholder="address line 2"> </td> </tr> <tr> <td> <label for="city">City:</label> </td> <td> <input type="text" required pattern="^[a-zA-Z ]*$" minlength="2" maxlength="20"> </td> <td> <label for="pin">Pincode:</label> </td> <td> <input type="text" required pattern="^[0-9]{6}$" > </td> </tr> <tr> <td> <label for="stat">State:</label> </td> <td> <input type="text" required pattern="^[a-zA-Z &-]*$" minlength="3" maxlength="20"> </td> </tr> <tr> <td> <label for="nation">Nationality:</label> </td> <td> <input type="text" required pattern="^[a-zA-Z ]*$" minlength="3" maxlength="20"> </td> </tr> <tr> <td> <label for="ph">Contact no.:</label> </td> <td> <input type="tel" required pattern="[0-9]{5}-[0-9]{5}" placeholder="12345-12345"> </td> </tr> <tr> <td> <label for="eml">Email:</label> </td> <td> <input type="email" required pattern="^[a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4}$"> </td> </tr> </table> </fieldset> <fieldset> <legend>Educational History:</legend> <table class="t2"> <tr> <th>Examination </th> <th>Board/University </th> <th>School/College </th> <th>Year </th> <th>Percentage </th> </tr> <tr> <td> <input type="text" name="exam" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="text" name="board" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="text" name="sc" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="month" name="year" required min="1970-01"> </td> <td> <input type="text" name="perc" required pattern="(^[0-9]{2})+([\.][0-9]{0,2})?%"> </td> </tr> <tr> <td> <input type="text" name="exam" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="text" name="board" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="text" name="sc" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="month" name="year" required min="1970-01"> </td> <td> <input type="text" name="perc" required pattern="(^[0-9]{2})+([\.][0-9]{0,2})?%"> </td> </tr> <tr> <td> <input type="text" name="exam" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="text" name="board" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="text" name="sc" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="month" name="year" required min="1970-01"> </td> <td> <input type="text" name="perc" required pattern="(^[0-9]{2})+([\.][0-9]{0,2})?%"> </td> </tr> <tr> <td> <input type="text" name="exam" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="text" name="board" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="text" name="sc" required pattern="^[a-zA-Z., ]*$"> </td> <td> <input type="month" name="year" required min="1970-01"> </td> <td> <input type="text" name="perc" required pattern="(^[0-9]{2})+([\.][0-9]{0,2})?%"> </td> </tr> </table> </fieldset> <table> <tr> <td> <label>Previous company where you last worked for:</label> </td> <td> <input type="text" name="cnm" required pattern="^[a-zA-Z ]*$"> </td> </tr> <tr> <td> <label>Work experience:</label> </td> <td> <textarea required rows="8" cols="30" placeholder="Write your experience in short"></textarea> </td> </tr> <tr> <td> <label>Job title:</label> </td> <td> <select id="job" required> <option disabled selected value>Select</option> <option>Full stack developer</option> <option>Frontend developer</option> <option>Backend developer</option> <option>Graphic designer</option> <option>Software Engineer</option> <option>Data scientist</option> <option>System Analist</option> </select> </td> </tr> <tr> <td> <label for="pos">Poisition you intrested in:</label> </td> <td> <select id="position" required> <option disabled selected value>Select</option> <option>Senior</option> <option>Junior</option> <option>Manager</option> <option>Fresher</option> <option>Assistant manager</option> </select> </td> </tr> <tr> <td> <label for="period">Time period for start job:</label> </td> <td> <select id="timep" required> <option disabled selected value>Select</option> <option>3-month</option> <option>2-month</option> <option>1-month</option> </select> </td> </tr> <tr> <td> <label for="photo">Upload Photo:</label> </td> <td> <input type="file" name="loadphoto" accept=".gif,.png,.jpg" required> </td> </tr> <tr> <td> <label for="result">Upload Documents:</label><br> </td> <td> <input type="file" name="loadres" accept=".doc,.docx,.pdf" multiple required> </td> </tr> <tr> <td> <label for="Addnote">Additional note:</label> </td> <td> <input type="text" name="note" placeholder="Your query"> </td> </tr> <tr> <td> <input type="submit" name="submit"> </td> <td> <input type="reset" name="reset"> </td> </tr> </table> </form> </section> </body> </html>
CSS:-
section { background-color:#ffeac8; width:70%; padding:10px; margin-left:50%; transform:translate(-50%); } header { margin-left:30%; transform:transition(-30%); font-size:24px; color:#3366ff; } legend { background-color:#0099CC; color:#CCCCCC; } input,label { padding:5px; } input,textarea,select { border:none; } input[type="submit"],input[type="reset"] { background-color:#0000CC; color:#FFFFFF; box-shadow:3px 3px 3px #030303; }
Employee bio-data form Output:-
Summary
In this post we have seen 2 types of bio data form generation: student bio data form and employee bio data form.
The HTML5 constraints are validates the input fields in both forms.
When you include input type file in your form, add enctype attribute with ‘multipart/form-data’ value in form element.
The input type file by default accept only one file. If you want to accept multiple files from user add “multiple” attribute.
0 Comments