Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

The code editor didn’t seem to realize that I clearly have a textarea with an id equal to message (it is one of the tests), and I Clearly, too, have a button with a type equal to Submit. I’m not sure if it is just nesting the tags that did something, the tester isn’t recognizing these two. help is appreciated. Thanks!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>Job Application Form</title>
    </head>

    <body>
        <div class="container">
            <h1>Job Application Form</h1>
            <form method="post">


                <label for="name">
                    <h2>Name:</h2>
                    <input type="text" id="name" placeholder="Enter your Name." required/>
                </label>

                <label for="email">
                    <h2>Enter an email:</h2>
                    <input type="email" id="email" placeholder="Enter Your Email." required/>
                </label>

                
                <fieldset>
                    <h2>Select a Position:</h2>
                    <select id='position'>
                        <option>Select a Position</option>
                        <option>Full Stack Developer</option>
                        <option>Cybersecurity Engineer</option>
                        <option>DevOps</option>
                    </select>
                </fieldset>

                <fieldset class="radio-group">
                    <label for='availability'>Part Time<input type="radio" name="availability" value="part-time" id="part-time" /></label>
                    <label for='availability'>Full Time<input type="radio" name="availability" value="full-time" id="full-time" checked /></label>
                </fieldset>
            </form>

                <fieldset>
                    <h2>Why did you decide to work here?</h2>
                    <textarea cols="30" rows="5" placeholder="Im Jobless..." id="message" required ></textarea>
                </fieldset>

                <button type="submit">SUBMIT</button>
        </div>
    </body>
</html>


/* file: styles.css */
.container {
    width: 60%;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    min-width: 500px;
    max-width: 600px;
    border-radius: 10px;
    border: 3px solid darkgreen;
}
h1 {text-align: center;}
body {
    background-color: darkseagreen;
    font-family: Arial;
}
input[type='text'], input[type='email'], select {
    display: block;
    width: 95%;
    border-color: darkseagreen;
    border-radius: 5px;
    height: 30px;
    font-size: 16px;
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.3s ease;
}
.radio-group {
    display: flex;
    justify-content:space-evenly;
}
fieldset {
    border: none;
}
input::placeholder {
    font-size: 18px;
}
input[type='text']:hover, input[type='email']:hover {
    transform: scale(1.035);
    border-color: gray;
}
input:focus, textarea:focus {
    border-color: darkolivegreen;
}
input:valid, select:valid, textarea:valid {
    border-color: green;
}
input:invalid, select:invalid, textarea:invalid {
    border-color: red;
}
input:first-of-type {
  border-radius: 12px;
}
button {
    display: block;
    margin: 8px auto;
    width: 400px;
    height: 35px;
    background-color: white;
    border-radius: 6px;
    transition: transform 0.3s ease
}
button:hover {
    transform: scale(1.2);
    background-color: black;
    color: white;
}
.radio-group input[type='radio']:checked {
    box-shadow: 5px 5px 4px black;
    color: green;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Hi,
Your textarea and button elements seem to be outside the form element. Look at where you’ve added the closing form tag.
You also need to work on steps 14 and 15. See if you can pull anything out.
Good luck!

1 Like
3

Oh, I didn’t notice, it worked! Thanks, Really!

1 Like