Simple Job Application Form Using HTML And CSS

Aap ek basic job application form HTML aur CSS se kaise banate hain, yeh main aapko step-by-step guide kar raha hu:
Simple Job Application Form Using HTML And CSS

Simple Job Application Form Using HTML And CSS

1. HTML Structure:

Sabse pehle, aap HTML code likhenge jo form ke structure ko define karega. Yeh HTML code aapke form ke elements aur unke labels ko include karega. Yahan ek basic example hai:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
</head>

<body>
    <div class="container">
        <div class="box">
            <h1> Job Application
                <span class="small">(web)</span>
            </h1>
            <form action="">
                <div class="form_container">
                    <div class="form_control">
                        <label for="first_name">First Name</label>
                        <input id="first_name" name="first_name" placeholder="Enter First Name">

                    </div>
                    <div class="form_control">
                        <label for="last_name">Last Name</label>
                        <input id="last_name" name="last_name" placeholder="Enter Last Name">

                    </div>
                    <div class="form_control">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" placeholder="Enter Email">

                    </div>
                    <div class="form_control">
                        <label for="job_role">Job Role</label>
                        <select id="job_role" name="job_role">
                            <option value="">Select Job Role</option>
                            <option value="frontend">Frontend Developer</option>
                            <option value="full_stack">Full Stack Developer</option>
                            <option value="backend">Backend Developer</option>
                        </select>

                    </div>
                    <div class="textarea_control">
                        <label for="address">Address</label>
                        <textarea name="address" id="address" cols="50" row="4" placeholder="Enter address"></textarea>

                    </div>
                    <div class="form_control">
                        <label for="city">City</label>
                        <input id="city" name="city" placeholder="Enter 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 value="2022-12-03" 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="button_container">
                    <button type="submit">Apply Now</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

2. CSS Styling:

Ab aap CSS code likhenge jisse aapka form visually appealing aur user-friendly ho. CSS code ko alag se ek file mein save kar sakte hain (is example mein "style.css" ke naam se).
<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        .box {
            max-width: 600px;
            padding: 20px;
            background: white;
            margin: 0 auto;
            margin-top: 50px;
            box-shadow: 4px 3px 5px wheat;
            border-radius: 10px;
        }

        .small {
            font-size: 20px;
        }
        .form_container{
            margin: 2d0px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
            gap: 20px;
        }
        .form_control{
            display: flex;
            flex-direction: column;
        }
        label{
            margin-bottom: 5px;
            font-size: 15px;
        }
        input, select, textarea{
            padding: 6px 10px;
            border: 1px solid black;
            border-radius: 4px;
            font-size: 15px;
        }
        input:focus{
            outline-color: red;
        }
        .button_container{
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
        button{
            background-color: blue;
            border: transparent solid 5px;
            padding: 5px 10px;
            color: white;
            border-radius: 8px;
            transition: 0.3s ease-in;
        }
        button:hover{
            background: red;
            border: 4px solid blue;
            color: black;
            transition: o.3s ease-out;
            cursor: pointer;

        }
        .textarea_control{
            grid-column: 1 / span 2;
        }
        .textarea_control textarea{
            width: 100%;
        }
        @media(max-width: 460px){
            .textarea_control{
            grid-column: 1 / span 1;
        } 
        }
 </style>

3. Explanation:

  • HTML structure mein ek <form> element define kiya gaya hai, jismein aapke job application form ke sabhi fields hain.
  • Har field ke liye <label> element create kiya gaya hai, jo field ke saath associated hai (for attribute se).
  • <input> tags field ke liye define kiye gaye hain jaise Name, Email, Address, aur Resume (file upload) etc.
  • Position field ke liye <select> tag ka use kiya gaya hai jismein user ek position choose kar sakte hain.
  • <button> element form ko submit karne ke liye use kiya gaya hai.
  • CSS code me styling ki gayi hai jaise background color, margin, padding, aur border-radius etc liya gya hain.
  • Submit button ke liye hover effect bhi define kiya gaya hai jisse user ko pata chale ki woh button par hover kar rahe hain.

Full Code:-

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        .box {
            max-width: 600px;
            padding: 20px;
            background: white;
            margin: 0 auto;
            margin-top: 50px;
            box-shadow: 4px 3px 5px wheat;
            border-radius: 10px;
        }

        .small {
            font-size: 20px;
        }
        .form_container{
            margin: 2d0px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
            gap: 20px;
        }
        .form_control{
            display: flex;
            flex-direction: column;
        }
        label{
            margin-bottom: 5px;
            font-size: 15px;
        }
        input, select, textarea{
            padding: 6px 10px;
            border: 1px solid black;
            border-radius: 4px;
            font-size: 15px;
        }
        input:focus{
            outline-color: red;
        }
        .button_container{
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }
        button{
            background-color: blue;
            border: transparent solid 5px;
            padding: 5px 10px;
            color: white;
            border-radius: 8px;
            transition: 0.3s ease-in;
        }
        button:hover{
            background: red;
            border: 4px solid blue;
            color: black;
            transition: o.3s ease-out;
            cursor: pointer;

        }
        .textarea_control{
            grid-column: 1 / span 2;
        }
        .textarea_control textarea{
            width: 100%;
        }
        @media(max-width: 460px){
            .textarea_control{
            grid-column: 1 / span 1;
        } 
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <h1> Job Application
                <span class="small">(web)</span>
            </h1>
            <form action="">
                <div class="form_container">
                    <div class="form_control">
                        <label for="first_name">First Name</label>
                        <input id="first_name" name="first_name" placeholder="Enter First Name">

                    </div>
                    <div class="form_control">
                        <label for="last_name">Last Name</label>
                        <input id="last_name" name="last_name" placeholder="Enter Last Name">

                    </div>
                    <div class="form_control">
                        <label for="email">Email</label>
                        <input type="email" id="email" name="email" placeholder="Enter Email">

                    </div>
                    <div class="form_control">
                        <label for="job_role">Job Role</label>
                        <select id="job_role" name="job_role">
                            <option value="">Select Job Role</option>
                            <option value="frontend">Frontend Developer</option>
                            <option value="full_stack">Full Stack Developer</option>
                            <option value="backend">Backend Developer</option>
                        </select>

                    </div>
                    <div class="textarea_control">
                        <label for="address">Address</label>
                        <textarea name="address" id="address" cols="50" row="4" placeholder="Enter address"></textarea>

                    </div>
                    <div class="form_control">
                        <label for="city">City</label>
                        <input id="city" name="city" placeholder="Enter 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 value="2022-12-03" 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="button_container">
                    <button type="submit">Apply Now</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Result:-

Simple Job Application Form Using HTML And CSS

Aap in HTML aur CSS codes ko copy karke ek HTML file aur ek CSS file mein save kar sakte hain. Fir, aapko HTML file ko web browser mein open karke form ka visual representation dekhega. CSS styles aapke form ko attractive aur organized bana denge. Iske baad, aap is form ko server-side language (jaise PHP, Python, Node.js, etc.) ke sath integrate karke form data ko process kar sakte hain.
Humare Website me aane ke liye apka dhanyawaad!

एक टिप्पणी भेजें

0 टिप्पणियाँ
* Please Don't Spam Here. All the Comments are Reviewed by Admin.