In this tutorial, we will explore the HTML application form.
HTML Form
An HTML form is an essential element of a webpage that is visible to users, enabling them to input information and send it by submitting the form.
HTML forms are essential for gathering information from visitors on a website.
Syntax:
Example
<form>
Form elements. . .
</form>
In the above syntax, the <form> is the opening tag and the </form> is the closing tag. The form elements come under the opening tag and closing tag of the form. The form elements can be <input> , <label> , <select> , <textarea> , <button> , <fieldset> , <option> , etc.
HTML Form Elements
Below is a table containing descriptions of various HTML form elements:
| Form Element | Description |
|---|---|
<input> |
It defines the input field where the user can input data. |
<label> |
It specifies a label for various elements. |
<button> |
It is utilized to create a button. |
<textarea> |
It is utilized to create a multi-line text input area. |
<legend> |
It is utilized to specify a caption for the <fieldset> tag. |
<fieldset> |
It is utilized to group those elements which are related to each other. |
<select> |
It is utilized to create a drop-down list. |
<option> |
It is utilized to specify an option in a select list. |
<optgroup> |
It is utilized to group related options in a <select> tag. |
<option> |
It is utilized to define a list of pre-defined options for <select> tag. |
<output> |
It is utilized to show the output of some calculations. |
Demonstrations of the HTML application form
The process of building an HTML application form will be demonstrated in the upcoming examples.
Demonstration-1
In this demonstration, we will create a basic application form using HTML.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration of an application form</title>
</head>
<body>
<div class="main">
<h1>APPLICATION FORM</h1>
<form action="">
<label for="firstname">First Name:</label>
<input type="text" id="first"
name="firstname"
placeholder="Enter the first name" required> <br> <br>
<label for="lastname">Last Name:</label>
<input type="text" id="last"
name="lastname"
placeholder="Enter the last name" required> <br> <br>
<label for="email">Email:</label>
<input type="email" id="email"
name="email"
placeholder="Enter the email" required> <br> <br>
<label for="dob">Date of Birth:</label>
<input type="date"
id="dob" name="dob"
placeholder="Enter the DOB" required> <br> <br>
<label for="pass">Password:</label>
<input type="pass" id="pass"
name="pass"
placeholder="Enter the password"
pattern=
"^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$" required
title="Password must consist of at least one number,
one alphabet, one symbol and password must be at least 8 characters long"> <br> <br>
<label for="repass">Re-type Password:</label>
<input type="password" id="repass"
name="repass"
placeholder="Re-enter the password" required> <br> <br>
<span id="pass"></span>
<label for="contact">Contact:</label>
<input type="text" id="contact"
name="contact"
placeholder="Enter the contact number" required
maxlength="10"> <br> <br>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required> <br> <br>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select> <br> <br>
<div>
<button type="submit">
Submit
</button>
</div>
</form>
</div>
</body>
</html>
Output:
Here is the result demonstrating a basic application form.
Demonstration-2
In this example, we are going to create an application form and enhance its appearance using CSS styling.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Application form with some style applied utilizing CSS</title>
<style>
body {
background-color: bisque;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
flex-direction: column;
min-height: 100vh;
line-height: 15px;
}
.application {
background-color: white;
text-align: center;
padding: 9px 19px;
border-radius: 15px;
box-shadow: 0 0 18px rgba(18, 18, 18, 0.2);
transition: transform 0.2s;
width: 600px;
}
h1 {
color: red;
}
label {
display: block;
text-align: left;
font-weight: bold;
margin-top: 12px;
margin-bottom: 5px;
width: 100%;
color: black;
}
#pass {
color: red;
}
input {
display: block;
padding: 10px;
width: 100%;
margin-bottom: 15px;
box-sizing: border-box;
border-radius: 6px;
border: 1px solid #ece7e7;
}
select {
display: block;
width: 100%;
margin-bottom: 12px;
padding: 9px;
box-sizing: border-box;
border: 1px solid#ece7e7;
border-radius: 6px;
}
button {
margin-top: 12px;
margin-bottom: 12px;
padding: 12px;
background-color: red;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.submit {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="application">
<h1>APPLICATION FORM</h1>
<form action="">
<label for="firstname">First Name:</label>
<input type="text" id="first"
name="firstname"
placeholder="Enter your first name" required>
<label for="lastname">Last Name:</label>
<input type="text" id="last"
name="lastname"
placeholder="Enter your last name" required>
<label for="email">Email:</label>
<input type="email" id="email"
name="email"
placeholder="Enter your email" required>
<label for="dob">Date of Birth:</label>
<input type="date"
id="dob" name="dob"
placeholder="Enter your DOB" required>
<label for="pass">Password:</label>
<input type="pass" id="pass"
name="pass"
placeholder="Enter your password"
pattern=
"^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])\S{8,}$" required
title="Password must contain at least one number,
one alphabet, one symbol, and be at
least 8 characters long">
<label for="repass">Re-type Password:</label>
<input type="password" id="repass"
name="repass"
placeholder="Re-enter your password" required>
<span id="pass"></span>
<label for="contact">Contact:</label>
<input type="text" id="contact"
name="contact"
placeholder="Enter your contact number" required
maxlength="10">
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<div>
<button type="submit" class="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
Output:
Below, you can see a visually appealing application form.
Demonstration-3
In this demonstration, we will create a job application form using HTML and CSS.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job Application Form</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: rgb(204, 253, 248);
}
.container {
max-width: 850px;
margin: 0 auto;
}
.case {
margin: 0 auto;
max-width: 650px;
padding: 18px;
background-color: rgb(11, 210, 190);
border-radius: 9px;
box-shadow: 6px 5px 9px rgb(137, 203, 196);
margin-top: 60px;
}
.form-case {
display: grid;
margin: 2px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
.form-control {
display: flex;
flex-direction: column;
}
label {
margin-bottom: 6px;
font-size: 18px;
}
input, select, textarea {
padding: 8px 12px;
font-size: 15px;
border-radius: 5px;
border: 1px solid black;
}
input:focus {
outline-color: rgb(67, 184, 210);
}
.submit {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
button {
background-color: rgb(12, 135, 122);
border: transparent solid 5px;
padding: 6px 10px;
color: white;
border-radius: 8px;
transition: 0.2s ease-in;
}
button:hover {
padding: 6px 15px;
background-color: rgb(3, 104, 94);
border: 2px solid white;
color: white;
transition: o.2s ease-out;
cursor: pointer;
}
.textarea-control {
grid-column: 1 / span 2;
}
.textarea-control textarea {
width: 100%;
}
@media(max-width: 475px) {
.textarea-control{
grid-column: 1 / span 1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="case">
<h1> Job Application Form</h1>
<form action="">
<div class="form-case">
<div class="form-control">
<label for="first-name">First Name:</label>
<input id="first-name" name="first-name" placeholder="Enter your first name">
</div>
<div class="form-control">
<label for="last-name">Last Name:</label>
<input id="last-name" name="last-name" placeholder="Enter your last name">
</div>
<div class="form-control">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email">
</div>
<div class="form-control">
<label for="job-role">Job Role:</label>
<select id="job-role" name="job-role">
<option value="">Select Your Job Role</option>
<option value="senior-business-analyst">Senior Business Analyst</option>
<option value="full-stack-developer">Full Stack Developer</option>
<option value="research-analyst">Research Analyst</option>
<option value="backend-developer">Backend Developer</option>
<option value="quality-assurance-inspector">Quality Assurance Inspector</option>
<option value="php-developer">PHP Developer</option>
</select>
</div>
<div class="textarea-control">
<label for="address">Address</label>
<textarea name="address" id="address" cols="50" row="4" placeholder="Enter your address"></textarea>
</div>
<div class="form-control">
<label for="city">City:</label>
<input id="city" name="city" placeholder="Enter your city name">
</div>
<div class="form-control">
<label for="pincode">Pincode:</label>
<input type="number" id="pincode" name="pincode" placeholder="Enter Pincode">
</div>
<div class="form-control">
<label for="date">Date:</label>
<input type="date" id="date" name="date">
</div>
<div class="form-control">
<label for="upload">Upload your CV:</label>
<input type="file" id="upload" name="upload">
</div>
</div>
<div class="submit">
<button type="submit">Apply Now</button>
</div>
</form>
</div>
</div>
</body>
</html>
Output:
Let's take a look at the employment application form created using HTML and CSS.
Demonstration-4
In the upcoming example, we'll create a student enrollment form using HTML and CSS.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Registration Form</title>
<style>
body {
color: white;
}
form {
margin: auto;
padding: 18px;
width: min(850px, 75%);
border: 1px solid white;
border-radius: 15px;
background-image: url('background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
h2 {
text-align: center;
font-size: 30px;
margin-bottom: 18px;
}
label {
margin-bottom: 6px;
display: block;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
#dob {
width: 100%;
margin-bottom: 18px;
padding: 12px;
box-sizing: border-box;
border: 1px solid rgb(45, 30, 96);
border-radius: 6px;
opacity: 0.6;
}
textarea {
height: 90px;
resize: vertical;
}
.checkbox {
display: flex;
align-items: flex-start;
margin-right: 18px;
}
label {
margin-right: 18px;
}
table {
margin-bottom: 18px;
width: 100%;
border-collapse: collapse;
}
table th,
table td {
padding: 12px;
border: 1px solid white;
text-align: center;
color: white;
font-size: 20px;
}
.buttons {
display: flex;
justify-content: center;
}
.buttons button {
margin-right: 10px;
padding: 12px 18px;
font-size: 18px;
background-color: rgb(252, 252, 138);
color: blue;
font-weight: bold;
width: 175px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.buttons button:hover {
background-color: yellow;
}
</style>
</head>
<body>
<form>
<h2>Student Registration Form</h2>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name" required>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name" required>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<label for="email">Email ID:</label>
<input type="email" id="email" name="email" required>
<label for="mob">Mobile:</label>
<input type="tel" id="mob" name="mob" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="address">Address:</label>
<textarea id="address" name="address" required></textarea>
<label for="city">City:</label>
<input type="text" id="city" name="city" required>
<label for="pin-code">Pin Code:</label>
<input type="text" id="pin-code" name="pin-code" required>
<label for="state">State:</label>
<input type="text" id="state" name="state" required>
<label for="country">Country:</label>
<input type="text" id="country" name="country" required>
<label for="qualification">Qualification:</label>
<table>
<tr>
<th></th>
<th>Board</th>
<th>Percentage</th>
<th>Year of Passing</th>
</tr>
<tr>
<td>10th</td>
<td><input type="text" name="10th-board" required></td>
<td><input type="text" name="10th-percentage" required></td>
<td><input type="text" name="10th-year-of-passing" required></td>
</tr>
<tr>
<td>12th</td>
<td><input type="text" name="12th-board" required></td>
<td><input type="text" name="12th-percentage" required></td>
<td><input type="text" name="12th-year-of-passing" required></td>
</tr>
<tr>
<td>Graduation</td>
<td><input type="text" name="graduation-board" required></td>
<td><input type="text" name="graduation-percentage" required></td>
<td><input type="text" name="graduation-year-of-passing" required></td>
</tr>
</table>
<div class="buttons">
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</div>
</form>
</body>
</html>
Output:
The result showcases a student enrollment form created using HTML and CSS.
Demonstration-5
In this demonstration, we will create a loan application form using HTML and CSS.
Code:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Loan Application Form</title>
<style>
body {
background-color: rgb(250, 246, 238);
color: rgb(175, 116, 8);
}
h1, legend {
color: orange;
}
legend {
font-size: 18px;
font-weight: bold;
}
button {
margin-top: 10px;
width: 75px;
height: 30px;
background-color: orange;
color: white;
border: none;
border-radius: 6px;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<h1>Loan Application Form</h1>
<fieldset>
<legend>Basic Information:</legend>
<label for="first-name">First Name:</label>
<input type="text" name="first-name" /> <br> <br>
<label for="last-name">Last Name:</label>
<input type="text" name="last-name" /> <br> <br>
<label for="email-id">Email ID:</label>
<input type="text" name="email" /> <br> <br>
<label for="contact-number">Contact Number:</label>
<input type="text" name="contact-number" /> <br> <br>
<label for="home-address">Home Address:</label>
<input type="text" name="home-address" /> <br> <br>
</fieldset>
<fieldset>
<legend>Work Information:</legend>
<label for="current-occupation">Current Occupation:</label>
<input type="text" name="current-occupation" /> <br> <br>
<label for="company name">Employer Name:</label>
<input type="text" name="company-name" /> <br> <br>
<label for="company-location">Employer Address:</label>
<input type="text" name="company-location" /> <br> <br>
</fieldset>
<fieldset>
<legend>Loan Type & Amount:</legend>
<label for="loan-type">Loan Type:</label>
<input name="loan" list="type-of-loan"/>
<datalist id="type-of-loan">
<option value="Personal">
<option value="Real Estate">
<option value="Commercial">
<option value="Mortgage">
</datalist> <br> <br>
<label for="loan-amount">Loan Amount:</label>
<input type="text" name="loan-amount" />
</fieldset>
<fieldset>
<legend>Length of Loan:</legend>
<input type="radio" name="length-of-time" value="5">5
<input type="radio" name="length-of-time" value="15">15
<input type="radio" name="length-of-time" value="30">30
</fieldset>
<fieldset>
<legend>Marital Status:</legend>
<input type="checkbox" name="status" value="single">Single
<input type="checkbox" name="status" value="married">Married
<input type="checkbox" name="status" value="divorced">Divorced
</fieldset>
<fieldset>
<legend>Special Considerations:</legend>
<label for="down-payment">Down Payment:</label>
<input type="text" name="down-payment" /> <br> <br>
</fieldset>
<fieldset>
<legend>Co-Signer Details:</legend>
<label for="name">Name of Co-Signer:</label>
<input type="text" name="name-of-cosigner" />
<label for="occupation">Co-Signer Occupation:</label>
<input type="text" name="occupation" />
</fieldset>
<fieldset>
<legend>Comments:</legend>
<textarea name='comment' cols="60" rows="3"></textarea>
</fieldset>
<fieldset>
<legend>Declaration:</legend>
<input type="checkbox" name="declaration">I hereby declare that the information given by me in the application is true, complete and correct to the best of my knowledge.
</fieldset>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
Below is the loan application form for your review.
Conclusion:
In this article, we have covered the creation of an HTML application form. HTML and CSS can be utilized to develop different kinds of forms like job applications, loan applications, student registration forms, and more.
We have grasped the process of creating a form for an application by using HTML and have acquired the skill to add design to the form using CSS.