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.

Skills required:-

Form and input elements. HTML5 constraints for input validation.

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.

Header Ads Widget

My codding spot

HTML CSS Bio data form

What is bio data from?

Student bio-data form for admission in university

Student bio-data form Source code

Output of student bio-data form:-

Employee bio-data form for employment application

Employee bio-data form Source code:-

Employee bio-data form Output:-

Posted by: My codding spot

Post a Comment

0 Comments

Search This Blog

Report Abuse

Popular Posts all time

Featured Post

html css footer

Ad Space

Most Popular in last month

JavaScript object

JavaScript loops

Javascript if else if vs switch case

What is regular expression in JavaScript?

Generate bill using HTML CSS & JavaScript.

Tags

Popular Posts of last week

css grid layout

CSS flexbox

Validation of form elements by constraints and JavaScript

css media query

What is HTML form & how to create form?

Menu Footer Widget

Contact form

Header Ads Widget

HTML CSS Bio data form

What is bio data from?

Student bio-data form for admission in university

Student bio-data form Source code

Output of student bio-data form:-

Employee bio-data form for employment application

Employee bio-data form Source code:-

Employee bio-data form Output:-

Posted by: My codding spot

You may like these posts

Post a Comment

0 Comments

Search This Blog

Popular Posts all time

Featured Post

Ad Space

Most Popular in last month

Tags

Popular Posts of last week

Menu Footer Widget

Contact form