Employee Registration Form

Employee Registration Form


Document Structure and Basics

This code starts by telling the browser that it’s dealing with a standard HTML5 document. The language of the content is specified as English.

<!DOCTYPE html>
<html lang="en">

Head Section

The head of the document contains information the browser needs but which isn’t directly displayed on the page. This includes specifying the character set (which allows various symbols and languages to be used), ensuring the page is responsive on different devices, and linking to an external style sheet (Bootstrap) that makes the form look polished without extra styling effort.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Registration Form</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" />
</head>

Body Section

The body contains everything that the user interacts with. It starts with a title and then displays the main content inside a bordered and rounded box, giving it a clean look.

<body class="container">
    <h2 class="text-center my-4">Employee Registration Form</h2>
    <div class="border border-1 rounded p-4">

Form Overview

The form element gathers all the user’s input and sends it to a specified location when submitted. It’s set to send the data securely and can handle files, like photos.

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

Personal Information Section

This part of the form collects basic details like the user’s title, first name, and last name. Each input is paired with a label to show what information is needed.

<div class="row g-3">
    <div class="col-md-2">
        <label for="title" class="form-label">Title:</label>
        <select id="title" name="title" class="form-select">
            <option value="Dr">Dr.</option>
            <option value="Mr">Mr.</option>
            <option value="Ms">Ms.</option>
        </select>
    </div>

Address Section

The address section allows the user to input where they live. This includes fields for the street address, city, state, and zip code.

<div class="my-4">
    <label for="address" class="form-label fw-bold">Address:</label>
    <input type="text" id="address" name="address" class="form-control" required>
</div>

Contact Information Section

This section gathers the user’s photo, email address, and mobile number. The photo is uploaded directly from the user’s device.

<div class="row g-3 my-4">
    <div class="col-md-4">
        <label for="photo" class="form-label">Upload Photo:</label>
        <input type="file" id="photo" name="photo" accept="image/*" class="form-control" required>
    </div>

Language and Additional Information Section

The form includes a section where the user can check which languages they know and provide any additional information. The checkboxes allow the selection of multiple languages.

<div class="row g-3 my-4">
    <div class="col-md-6">
        <label for="languages" class="form-label">Languages known:</label><br>
        <div class="form-check">
            <input type="checkbox" id="english" name="languages" value="English" class="form-check-input">
            <label for="english" class="form-check-label">English</label>
        </div>

Submit and Reset Buttons

The form ends with two buttons: one to submit the form and send the data, and another to reset the form, clearing all the inputs.

<div class="row g-3 my-4">
    <div class="col-md-6">
        <button class="btn btn-primary w-100" type="submit">Submit</button>
    </div>
    <div class="col-md-6">
        <button class="btn btn-outline-secondary w-100" type="reset">Reset</button>
    </div>
</div>

Code


<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Employee Registration Form</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" integrity="sha512-jnSuA4Ss2PkkikSOLtYs8BlYIeeIK1h99ty4YfvRPAlzr377vr3CXDb7sb7eEEBYjDtcYj+AjBH3FLv5uSJuXg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>

    <body class="container">
    
        <h2 class="text-center my-4">Employee Registration Form</h2>
        <div class="border border-1 rounded p-4">
            <form action="/submit_form" method="post" enctype="multipart/form-data">
                <!-- Title, First Name, Last Name -->
                <div class="row g-3">
                    <div class="col-md-2">
                        <label for="title" class="form-label">Title:</label>
                        <select id="title" name="title" class="form-select">
                            <option value="Dr">Dr.</option>
                            <option value="Mr">Mr.</option>
                            <option value="Ms">Ms.</option>
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label for="first_name" class="form-label">First Name:</label>
                        <input type="text" id="first_name" name="first_name" class="form-control" required>
                    </div>
                    <div class="col-md-5">
                        <label for="last_name" class="form-label">Last Name:</label>
                        <input type="text" id="last_name" name="last_name" class="form-control" required>
                    </div>
                </div>

                <!-- Address -->
                <div class="my-4">
                    <label for="address" class="form-label fw-bold">Address:</label>
                    <input type="text" id="address" name="address" class="form-control" required>
                </div>

                <!-- City, State, Zip -->
                <div class="row g-3">
                    <div class="col-md-4">
                        <label for="city" class="form-label">City:</label>
                        <input type="text" id="city" name="city" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label for="state" class="form-label">State:</label>
                        <input type="text" id="state" name="state" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label for="zip" class="form-label">Zip:</label>
                        <input type="text" id="zip" name="zip" class="form-control" required>
                    </div>
                </div>

                <!-- Photo, Email, Mobile -->
                <div class="row g-3 my-4">
                    <div class="col-md-4">
                        <label for="photo" class="form-label">Upload Photo:</label>
                        <input type="file" id="photo" name="photo" accept="image/*" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label for="email" class="form-label">Email:</label>
                        <input type="email" id="email" name="email" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label for="mobile" class="form-label">Mobile:</label>
                        <input type="tel" id="mobile" name="mobile" class="form-control" required>
                    </div>
                </div>

                <!-- Languages and Additional Information -->
                <div class="row g-3 my-4">
                    <div class="col-md-6">
                        <label for="languages" class="form-label">Languages known:</label><br>
                        <div class="form-check">
                            <input type="checkbox" id="english" name="languages" value="English" class="form-check-input">
                            <label for="english" class="form-check-label">English</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="hindi" name="languages" value="Hindi" class="form-check-input">
                            <label for="hindi" class="form-check-label">Hindi</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="punjabi" name="languages" value="Punjabi" class="form-check-input">
                            <label for="punjabi" class="form-check-label">Punjabi</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" id="other_language" name="languages" value="Other" class="form-check-input">
                            <label for="other_language" class="form-check-label">Any other</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="additional_info" class="form-label">Additional Information:</label>
                        <textarea id="additional_info" name="additional_info" rows="4" class="form-control"></textarea>
                    </div>
                </div>

                <!-- Submit and Reset Buttons -->
                <div class="row g-3 my-4">
                    <div class="col-md-6">
                        <button class="btn btn-primary w-100" type="submit">Submit</button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-outline-secondary w-100" type="reset">Reset</button>
                    </div>
                </div>
            </form>
        </div>

    </body>

</html>