HTML Code for Application Form

HTML Code for Application Form


application form, HTML form, job application, recruitment, form validation, form submission, input fields, select, textarea, file upload, web development, HTML Code for Application Form


Below is a basic example of an HTML application form. Please note that this form doesn't include server-side processing for handling submissions, and it's crucial to incorporate server-side validation for security.


HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Application Form</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            background-color: #f4f4f4;

            margin: 0;

            padding: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }


        form {

            max-width: 600px;

            width: 100%;

            background-color: #fff;

            padding: 20px;

            border-radius: 8px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }


        label {

            display: block;

            margin-bottom: 8px;

        }


        input, select, textarea {

            width: 100%;

            padding: 8px;

            margin-bottom: 16px;

            box-sizing: border-box;

            border: 1px solid #ccc;

            border-radius: 4px;

        }


        button {

            background-color: #3498db;

            color: #fff;

            padding: 10px 15px;

            border: none;

            border-radius: 4px;

            cursor: pointer;

        }


        button:hover {

            background-color: #2980b9;

        }

    </style>

</head>

<body>

    <form action="#" method="post">

        <label for="name">Full Name:</label>

        <input type="text" id="name" name="name" required>


        <label for="email">Email:</label>

        <input type="email" id="email" name="email" required>


        <label for="phone">Phone Number:</label>

        <input type="tel" id="phone" name="phone" required>


        <label for="position">Applying for Position:</label>

        <select id="position" name="position" required>

            <option value="developer">Developer</option>

            <option value="designer">Designer</option>

            <option value="manager">Manager</option>

        </select>


        <label for="resume">Upload Resume (PDF or Word):</label>

        <input type="file" id="resume" name="resume" accept=".pdf, .doc, .docx" required>


        <label for="message">Cover Letter:</label>

        <textarea id="message" name="message" rows="4" required></textarea>


        <button type="submit">Submit Application</button>

    </form>

</body>

</html>



Remember to replace the `action` attribute in the `<form>` tag with the appropriate URL for processing form submissions on your server. Also, implement server-side validation and security measures to protect against potential vulnerabilities.

Post a Comment

Previous Post Next Post