Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I can’t pass
9. You should associate every input element with a label element.
but the rest of the checkmarks before and after are correct and I don’t understand how to fix it.

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>
        <legend>Full Name</legend>
        <input type="text" id="name" placeholder="Example: John Doe"/>
        <legend>Email</legend>
        <input type="email" id="email" placeholder="Example: jjj@gmail.com"/>
        <legend>Position</legend>
        <select id="position">
            <option value="">Select an option</option>
            <option value="developer">Developer</option>
            <option value="designer">Designer</option>
        </select>
        <fieldset class="radio-group">
            <legend>Availability</legend>
            <input id="full-time" type="radio" name="availability"/>
            <label for="full-time">Full-time</label>
            <input id="part-time" type="radio" name="availability"/>
            <label for="part-time">Part-time</label>
        </fieldset>
        <label for="message">Why do you want this job?</label>
        <textarea id="message" rows="5" cols="30" placeholder="write your motivation"></textarea> 
        <button type="submit">Submit</button>  
     </form>
 </div>       
</body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}
.container {
  max-width: 600px;
  margin: 50px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
form {
  display: flex;
  flex-direction: column;
}
input, select, textarea {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
input:focus, textarea:focus {
  border-color: #007BFF;
  outline: none;
}
input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}
input:valid, select:valid, textarea:valid {
  border-color: green;
}
.radio-group {
  margin-bottom: 15px;
}
.radio-group input[type="radio"] {
  display: none;
}
.radio-group label {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.radio-group input[type="radio"]:checked {
  border-color: #007BFF;
  background-color:#007BFF;
  color: #fff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.radio-group input[type="radio"]:checked + label {
  color: yellow; 
}
textarea {
  resize: vertical;
}
button {
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}
button:hover {
  background-color: #0056b3;
}
input:first-of-type {
  border-radius: 5px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

From MDN:

The <legend> HTML element represents a caption for the content of its parent <fieldset>.

So I think you shouldn´t use <legend> for labeling inputs and I see you already know how to associate inputs with labels.

3

the problem is not in but in association of input element with label which is done but still the program doesn’t allow me to pass. I check it many times I don’t see a mistake every of my inputs associated with labels. I bet it’s some small detail which I can’t see

4

This input does not have a label

This input does have a label associated

5

My bad you actually were right! I thought about more and figure it out! Thank you!

6

Thank you! I already figure it out! You guys are great!