HTML Application Form

We will understand the HTML application form in this article.

HTML Form

The HTML form is a part of the document visible on the webpage that allows users to fill in the details and submit the form.

HTML forms are used to collect details of users visiting the website.

Syntax:

<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

Here are the HTML form elements with their description in the table below:

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.
<datalist>	It is utilized to define a list of pre-defined options for <input> tag.
<output>	It is utilized to show the output of some calculations.

Demonstrations of the HTML application form

We will learn to create an HTML application form with the help of the following demonstrations.

Demonstration-1

We will construct a simple application form in the following demo utilizing HTML.

Code:

<!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 output in which we can witness a simple application form.

Demonstration-2

We will be building an application form in this illustration and we will put style on the form with the help of CSS.

Code:

<!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:

Here in the result given downwards we can witness an application form that is stylish.

Demonstration-3

We will build up a job application form in the following demo with the help of HTML and CSS.

Code:

<!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:

We can have a gaze at the job application form which is formed with the help of HTML and CSS.

Demonstration-4

We will build up a student registration form in the following illustration with the assistance of HTML and CSS.

Code:

<!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 output demonstrates a student registration form which is built with the utilization HTML and CSS.

Demonstration-5

We will build up a loan application form in the following demo with the assistance of HTML and CSS.

Code:

<!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:

Here in the output given downwards we can view a loan application form.

Conclusion:

We have apprehended the HTML application form in this article. We can make various types of application forms with the help of HTML and CSS such as job application form, loan application form, student registration form, etc.

We have understood how to construct an application form utilizing HTML and learned to apply style on the form utilizing CSS.

Next TopicHTML Border Style

← prev next →