Job Application Form

Create a complete form with text fields, dropdowns, checkboxes, and file upload.

FormsInput TypesAttributes

Overview

A job application form is the natural second HTML project because it forces you to move past the two or three input types most tutorials stop at. A real application needs plain text, an email address, a dropdown of positions, a number for years of experience, a set of checkboxes for skills that aren't mutually exclusive, radio buttons for an employment type that is mutually exclusive, and a file upload for a resume — five genuinely different input patterns, each suited to a different kind of answer.

This tutorial builds that form field by field, and leans on HTML's built-in validation attributes — `required`, `minlength`, `pattern`, `min`, `max` — so the browser rejects obviously invalid input before a single line of JavaScript is written.

What You'll Build

A `<fieldset>`/`<legend>` grouped Personal Details section with text, email, and phone inputs.
A Position dropdown (`<select>`) and a numeric Years of Experience field.
A group of Skills checkboxes, where any number can be checked.
A group of Employment Type radio buttons, where exactly one can be selected.
A resume file upload restricted to PDF/DOC files, plus a cover letter textarea.
A submit button that the browser won't activate until every required field passes validation.

Prerequisites

Basic HTML structure and how to nest elements.
The generic `<form>` element and the idea of name/value pairs being submitted.
Attributes in general — you will use `type`, `name`, `id`, `required`, `min`, `max`, `pattern`, and `accept`.
Labels and why `for`/`id` pairing matters (covered briefly here, in more depth in the Portfolio project).

Project Structure

The whole form lives in one file, `application.html`, inside a single `<form>` element. Related fields are grouped with `<fieldset>`, and each fieldset gets a `<legend>` as its visible, accessible title — this is the correct semantic pairing for "here is a named group of controls", and it is exactly what a paper application form does with section headers like "Personal Details" or "Employment Type". A `<div>` with a heading above it looks similar, but assistive tech does not automatically associate that heading with the fields below it the way it does with `<legend>`.

Every field uses the input type that matches its data — `email`, `tel`, `number`, `file` — rather than defaulting everything to `type="text"`. Correct types matter because browsers change their behavior based on them: `type="email"` validates the format, `type="number"` shows a numeric keypad on mobile and a spinner on desktop, and `type="file"` opens the operating system's native file picker.

Step 1: Scaffold the Page and Form Container

Start with the standard boilerplate and open the `<form>` itself. The `action`/`method` attributes describe where the data would be sent in a real deployment; here they are left as placeholders since this tutorial focuses on the markup.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application - Frontend Developer Role</title>
    <meta name="description" content="Apply for the Frontend Developer role using this application form.">
</head>
<body>

    <main>
        <h1>Job Application: Frontend Developer</h1>
        <p>Fields marked with * are required.</p>

        <!-- method="post" is correct here: the submitted data (personal details, a file)
             shouldn't be exposed in the URL the way method="get" would expose it -->
        <form action="#" method="post" enctype="multipart/form-data">
            <!-- enctype="multipart/form-data" is required whenever a form includes a
                 file input (added in Step 6) - without it, the file itself never gets sent -->

            <!-- Fieldsets for each group of fields are added in the steps that follow -->

        </form>
    </main>

</body>
</html>

Step 2: Collect Personal Details

Personal details are grouped in a `<fieldset>`, with `<legend>` as its visible section title — the accessible equivalent of a bold heading over a group of paper form fields. Each field uses the input type suited to its data: `type="tel"` for a phone number hints a numeric keypad on mobile, and `pattern` constrains the phone number to a specific digit format without needing JavaScript.

<!-- Grouped with <fieldset>/<legend> rather than a <div> + heading: assistive tech
     automatically announces the legend as this group's name whenever any field inside it gets focus -->
<fieldset>
    <legend>Personal Details</legend>

    <p>
        <label for="fullName">Full Name *</label><br>
        <input type="text" id="fullName" name="fullName" required minlength="2">
        <!-- minlength blocks single-character "names" without any custom validation code -->
    </p>

    <p>
        <label for="email">Email Address *</label><br>
        <input type="email" id="email" name="email" required>
        <!-- type="email" rejects obviously malformed addresses (e.g. missing @) before submit -->
    </p>

    <p>
        <label for="phone">Phone Number *</label><br>
        <input type="tel" id="phone" name="phone" required
               pattern="[0-9]{10}" placeholder="10-digit number without spaces">
        <!-- pattern enforces exactly 10 digits; placeholder tells the user the expected format -->
    </p>
</fieldset>

Step 3: Add a Position Dropdown and Experience Field

Next comes the position dropdown and a numeric experience field. `<select>` is the right element whenever the user must choose exactly one option from a fixed, known list — it takes far less screen space than the equivalent radio button group would for five or more options.

<fieldset>
    <legend>Role Details</legend>

    <p>
        <label for="position">Position Applying For *</label><br>
        <!-- <select> is best for one choice out of many known options; every browser gives
             it a native, keyboard-accessible dropdown for free -->
        <select id="position" name="position" required>
            <option value="">-- Select a position --</option>
            <!-- Empty value keeps this placeholder option from silently counting as a real answer -->
            <option value="frontend">Frontend Developer</option>
            <option value="backend">Backend Developer</option>
            <option value="fullstack">Full-Stack Developer</option>
            <option value="designer">UI/UX Designer</option>
        </select>
    </p>

    <p>
        <label for="experience">Years of Experience *</label><br>
        <input type="number" id="experience" name="experience" required min="0" max="50" step="1">
        <!-- type="number" + min/max keeps the value inside a realistic, valid range -->
    </p>
</fieldset>

Step 4: Add Skill Checkboxes

Skills are checkboxes, not radio buttons, because more than one can genuinely be true at once — a candidate can know both HTML and CSS. Each checkbox needs its own unique `id`, but they can all share the same `name` so the server receives them as one group of selected values.

<fieldset>
    <legend>Skills (select all that apply)</legend>

    <!-- Checkboxes, not radios: multiple skills can be true simultaneously, so the
         "pick any number" input type is the correct one here -->
    <p>
        <input type="checkbox" id="skillHtml" name="skills" value="HTML">
        <label for="skillHtml">HTML</label>
    </p>
    <p>
        <input type="checkbox" id="skillCss" name="skills" value="CSS">
        <label for="skillCss">CSS</label>
    </p>
    <p>
        <input type="checkbox" id="skillJs" name="skills" value="JavaScript">
        <label for="skillJs">JavaScript</label>
    </p>
    <p>
        <input type="checkbox" id="skillReact" name="skills" value="React">
        <label for="skillReact">React</label>
    </p>
    <!-- Every checkbox shares name="skills" so the server groups all checked values together -->
</fieldset>

Step 5: Add Employment-Type Radio Buttons

Employment type is the opposite case — a candidate is either applying full-time, part-time, or as a contractor, never more than one at once — so radio buttons are correct here, not checkboxes. Sharing the same `name="employmentType"` across all three is what makes them mutually exclusive: selecting one automatically deselects the others.

<fieldset>
    <legend>Employment Type</legend>

    <!-- Radio buttons, not checkboxes: exactly one employment type can apply, so only
         one option should ever be selectable at a time -->
    <p>
        <input type="radio" id="typeFull" name="employmentType" value="full-time" checked>
        <!-- checked marks a sensible default; the user can still pick a different option -->
        <label for="typeFull">Full-Time</label>
    </p>
    <p>
        <input type="radio" id="typePart" name="employmentType" value="part-time">
        <label for="typePart">Part-Time</label>
    </p>
    <p>
        <input type="radio" id="typeContract" name="employmentType" value="contract">
        <label for="typeContract">Contract</label>
    </p>
    <!-- All three share name="employmentType" - that shared name is what makes them mutually exclusive -->
</fieldset>

Step 6: Add Resume Upload and Cover Letter

Resume upload needs `type="file"`, restricted with `accept` so the operating system's file picker filters to relevant formats by default. A cover letter is free-form and multi-line, so it gets a `<textarea>` instead of a single-line input.

<fieldset>
    <legend>Resume &amp; Cover Letter</legend>

    <p>
        <label for="resume">Upload Resume (PDF or DOC) *</label><br>
        <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
        <!-- accept hints the OS file picker to show only matching file types, though users can still override it -->
    </p>

    <p>
        <label for="coverLetter">Cover Letter</label><br>
        <textarea id="coverLetter" name="coverLetter" rows="6"
                   placeholder="Tell us why you're a good fit for this role..."></textarea>
        <!-- Not required: a cover letter is optional, unlike the resume above it -->
    </p>
</fieldset>

Step 7: Add the Submit Button

Finally, the submit button. `type="submit"` is explicit rather than relying on `<button>`'s default, and it sits outside every `<fieldset>` since it applies to the whole form, not to one field group.

<!-- Sits outside every fieldset since it submits the whole form, not one group -->
<p>
    <button type="submit">Submit Application</button>
</p>

Complete Code

Here is the full application form assembled in order, with a small stylesheet so every field group is easy to scan.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application - Frontend Developer Role</title>
    <meta name="description" content="Apply for the Frontend Developer role using this application form.">
    <style>
        * { box-sizing: border-box; }
        body { font-family: Arial, Helvetica, sans-serif; margin: 0; background: #f3f4f6; color: #222; line-height: 1.6; }
        main { max-width: 640px; margin: 0 auto; padding: 30px 20px; }
        h1 { color: #1d2940; }
        fieldset { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 16px 20px; margin-bottom: 20px; }
        legend { font-weight: bold; padding: 0 8px; color: #2b3a55; }
        label { display: block; font-weight: bold; margin-bottom: 4px; }
        input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
            width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 1rem;
        }
        input[type="checkbox"], input[type="radio"] { margin-right: 8px; }
        button { background: #2b3a55; color: #fff; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 1rem; }
        button:hover { background: #1d2940; }
    </style>
</head>
<body>

    <main>
        <h1>Job Application: Frontend Developer</h1>
        <p>Fields marked with * are required.</p>

        <form action="#" method="post" enctype="multipart/form-data">

            <!-- Named group of controls: <legend> is the accessible title for this fieldset -->
            <fieldset>
                <legend>Personal Details</legend>
                <p>
                    <label for="fullName">Full Name *</label><br>
                    <input type="text" id="fullName" name="fullName" required minlength="2">
                </p>
                <p>
                    <label for="email">Email Address *</label><br>
                    <input type="email" id="email" name="email" required>
                </p>
                <p>
                    <label for="phone">Phone Number *</label><br>
                    <input type="tel" id="phone" name="phone" required
                           pattern="[0-9]{10}" placeholder="10-digit number without spaces">
                </p>
            </fieldset>

            <fieldset>
                <legend>Role Details</legend>
                <p>
                    <label for="position">Position Applying For *</label><br>
                    <select id="position" name="position" required>
                        <option value="">-- Select a position --</option>
                        <option value="frontend">Frontend Developer</option>
                        <option value="backend">Backend Developer</option>
                        <option value="fullstack">Full-Stack Developer</option>
                        <option value="designer">UI/UX Designer</option>
                    </select>
                </p>
                <p>
                    <label for="experience">Years of Experience *</label><br>
                    <input type="number" id="experience" name="experience" required min="0" max="50" step="1">
                </p>
            </fieldset>

            <fieldset>
                <legend>Skills (select all that apply)</legend>
                <p>
                    <input type="checkbox" id="skillHtml" name="skills" value="HTML">
                    <label for="skillHtml">HTML</label>
                </p>
                <p>
                    <input type="checkbox" id="skillCss" name="skills" value="CSS">
                    <label for="skillCss">CSS</label>
                </p>
                <p>
                    <input type="checkbox" id="skillJs" name="skills" value="JavaScript">
                    <label for="skillJs">JavaScript</label>
                </p>
                <p>
                    <input type="checkbox" id="skillReact" name="skills" value="React">
                    <label for="skillReact">React</label>
                </p>
            </fieldset>

            <fieldset>
                <legend>Employment Type</legend>
                <p>
                    <input type="radio" id="typeFull" name="employmentType" value="full-time" checked>
                    <label for="typeFull">Full-Time</label>
                </p>
                <p>
                    <input type="radio" id="typePart" name="employmentType" value="part-time">
                    <label for="typePart">Part-Time</label>
                </p>
                <p>
                    <input type="radio" id="typeContract" name="employmentType" value="contract">
                    <label for="typeContract">Contract</label>
                </p>
            </fieldset>

            <fieldset>
                <legend>Resume &amp; Cover Letter</legend>
                <p>
                    <label for="resume">Upload Resume (PDF or DOC) *</label><br>
                    <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
                </p>
                <p>
                    <label for="coverLetter">Cover Letter</label><br>
                    <textarea id="coverLetter" name="coverLetter" rows="6"
                               placeholder="Tell us why you're a good fit for this role..."></textarea>
                </p>
            </fieldset>

            <p>
                <button type="submit">Submit Application</button>
            </p>
        </form>
    </main>

</body>
</html>

Sample Run

Open `application.html` in a browser, or use the live preview above, and try the following:

Click Submit Application with the Full Name field empty — the browser stops the submission and points at that field itself, because of `required`, with zero JavaScript.
Type a phone number with letters in it, like "abc1234567" — `pattern="[0-9]{10}"` rejects it on submit.
Check two or more Skills boxes at once, then select an Employment Type — the skills stay independently checked while picking a new employment type automatically unchecks the previous one.
Click "Upload Resume" — the operating system's native file picker opens, pre-filtered to PDF/DOC files because of the `accept` attribute.

Extend This Project

Add a "Portfolio URL" field using `type="url"` so the browser validates it looks like a real link.
Add a `<datalist>` of common job titles to the Position field so it behaves like an autocomplete text input instead of a fixed dropdown.
Split Full Name into separate First Name / Last Name inputs and validate each with its own `pattern`.
Add a required checkbox at the bottom ("I certify this information is accurate") before the submit button makes sense to click.
Style invalid fields with the `:invalid` CSS pseudo-class so validation errors are visually obvious before the user even tries to submit.

Summary

You built a complete, multi-field job application form using the input type that actually matches each piece of data — text, email, tel, number, checkbox, radio, and file — instead of defaulting everything to a single generic text box. Combined with `required`, `pattern`, `min`, `max`, and `accept`, the browser now enforces meaningful validation on its own, which is the foundation every JavaScript-powered form validation library builds on top of.