Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

having error in task 18, i tried many possibilities but its not working.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <form>
        <label>
            Full Name:<input type="text" id="name">
        </label><br></br>
        <label>
            Email:<input type="email" id="email">
        </label>
        <select id="position">
            <option></option>
            <option>Data Scientist</option>
            <option>Web Developer</option>
            <option>Back-end Developer</option>

        </select>
        <fieldset class="radio-group">
            <label for="availability" id="availibility">Full-time<input type="radio" name="availability" checked>
            </label>
                
                <label for="availability" id="availibility">Part-time<input type="radio" name="availability"></label>
        </fieldset>
        <p> Message:</p>
        <textarea id="message"></textarea>
        <button type="submit">Submit</button>
    </form>
    
</div>
</body>
</html>

/* file: styles.css */
/* file: styles.css */
input:focus, textarea:focus {
  border-color: blue;
}
input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}
input:valid, select:valid, textarea:valid {
  border-color: green;
}
button:hover {
  background-color: skyblue;
}
.radio-group input[type="radio"]:checked {
  border-color: yellow;
  background-color: lightblue;
  box-shadow: 0 0 5px gray;
}
input[type="radio"]:checked + label{
  color: indigo;
}

input:first-of-type {
  border-left: 5px solid orange;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

It’s because in your css, you’re changing the non-existent label element that comes right after input when you wrapped your input inside the label tags. If you want to keep your html unchanged, you should be targeting the label. Something like :

removed by mod

Additional fixes in this part:

removed by mod

The “id” attribute must be moved to the input or it won’t make sense. We want to imply this label is FOR this ID and you’re pointing to the label itself when it should be for input. The “id” attribute should also be unique but it’s repeated as “availability” in both inputs. Besides, those attributes are only necessary if you’re writing something like:

removed by mod

which is what your current css is intended for, btw. Hope this helps!

3

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

4

Oh, I see. My bad, and thanks! I’ll definitely be more careful about it next time.

1 Like