You should associate every input element with a label element. in Build a Job Application Form

HTML-CSS
1

Hello

I’m working on the lab Build a Job Application Form.

The check of:

You should associate every input element with a label element.

fails and i don’t know why.

Can anyone help me please?

Thanks!

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 for="name">Full Name</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" required>

      <label for="position">Job Position</label>
      <select id="position" name="position" required>
        <option value="" selected disabled>Select a position</option>
        <option value="developer">Developer</option>
        <option value="designer">Designer</option>
      </select>

      <fieldset class="radio-group">
        <legend>Availability</legend>

        <input type="radio" id="full" name="availability" value="full-time" required>
        <label for="full">Full-Time</label>

        <input type="radio" id="part" name="availability" value="part-time">
        <label for="part">Part-Time</label>
      </fieldset>

      <label for="message">Message</label>
      <textarea id="message" name="message" required></textarea>

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

    </form>
  </div>
</body>
</html>

CSS:

.container {
  max-width: 520px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ccc;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input,
select,
textarea {
  padding: 8px;
  border: 1px solid #999;
}

input:focus, textarea:focus {
  border-color: black;
  outline: none;
}

input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}

input:valid, select:valid, textarea:valid {
  border-color: green;
}

button {
  padding: 10px;
  cursor: pointer;
}

button:hover {
  background-color: blue;
  color: white;
}

.radio-group {
  border: none;
  padding: 0;
  display: flex;
  gap: 10px;
  align-items: center;
}

.radio-group input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
}

.radio-group input[type="radio"]:checked {
  border-color: blue;
  background-color: green;
  box-shadow: 2px 5px 2px black;
}

.radio-group input[type="radio"]:checked + label {
  color: blue;
}

input:first-of-type {
  border-radius: 10px;
}
2

solved, it was the browser. Tried it in a different one and it worked.