Hello, I’m getting this error message: You should associate every input element with a label element. I believe that I have done that but it’s not passing.
<!-- 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>
</head>
<body>
<div class="container">
<form>
<input type="text" id="name">Enter your name</input>
<input type="email" id="email">Enter your email
<select id="position" required>
<option value="" disabled selected>Choose a path...</option>
<option>Front End</option>
<option>Back End</option>
<option>Junior</option>
</select>
<fieldset class="radio-group">
<input type="radio" name="availability" id="choice-1" value="1">
<label for="choice-1">1</label>
<input type="radio" name="availability" id="choice-2" value="2">
<label for="choice-2">2</label>
<input type="radio" name="availability" id="choice-3" value="3">
<label for="choice-3">3</label>
</fieldset>
<textarea id="message"></textarea>
</form>
</div>
</body>
</html>
/* file: styles.css */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Build a Job Application Form - Build a Job Application Form
ILM
February 18, 2026, 2:25pm
2
what about these? are they associated with a label?
I think I fixed it as you suggested but it doesn’t seem to help…
<!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>
</head>
<body>
<div class="container">
<form>
<input type="text" id="name"><label for="name">Enter your name</label>
<input type="email" id="email"><label for="name">Enter your email</label>
<select id="position" required>
<option value="" disabled selected>Choose a path...</option>
<option>Front End</option>
<option>Back End</option>
<option>Junior</option>
</select>
<fieldset class="radio-group">
<input type="radio" name="availability" id="choice-1" value="1">
<label for="choice-1">1</label>
<input type="radio" name="availability" id="choice-2" value="2">
<label for="choice-2">2</label>
<input type="radio" name="availability" id="choice-3" value="3">
<label for="choice-3">3</label>
</fieldset>
<textarea id="message"></textarea>
</form>
</div>
</body>
ILM
February 19, 2026, 5:12pm
5
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add the backticks.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
Gotcha, fixed it and passed, thanks!
Hi, part 11 with the :focus pseudo -class ain’t working, please help
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Application Form</title>
</head>
<body>
<div class="container">
<form>
<input type="text" id="name"><label for="name">Enter your name</label>
<input type="email" id="email"><label for="email">Enter your email</label>
<select id="position" required>
<option value="" disabled selected>Choose a path...</option>
<option>Front End</option>
<option>Back End</option>
<option>Junior</option>
</select>
<fieldset class="radio-group">
<input type="radio" name="availability" id="choice-1" value="1">
<label for="choice-1">1</label>
<input type="radio" name="availability" id="choice-2" value="2">
<label for="choice-2">2</label>
<input type="radio" name="availability" id="choice-3" value="3">
<label for="choice-3">3</label>
</fieldset>
<textarea id="message"></textarea>
<button type="submit"></button>
</form>
</div>
</body>
</html>
/* file: styles.css */
input:focus{
border-color: #007bff;
background-color: #f9f9ff;
}
textarea:focus {
border-color: #007bff;
background-color: #f9f9ff;
}
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36
Build a Job Application Form - Build a Job Application Form
ILM
February 19, 2026, 5:37pm
9
are you sure what you are doing here?css folder available?
Hi,
I fixed it to this
<link rel= "stylesheet" href="styles.css">
Which normally works but it’s not working now, why?
Hi, I’m still stuck, please help
<!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>
<input type="text" id="name"><label for="name">Enter your name</label>
<input type="email" id="email"><label for="email">Enter your email</label>
<select id="position" required>
<option value="" disabled selected>Choose a path...</option>
<option>Front End</option>
<option>Back End</option>
<option>Junior</option>
</select>
<fieldset class="radio-group">
<input type="radio" name="availability" id="choice-1" value="1">
<label for="choice-1">1</label>
<input type="radio" name="availability" id="choice-2" value="2">
<label for="choice-2">2</label>
<input type="radio" name="availability" id="choice-3" value="3">
<label for="choice-3">3</label>
</fieldset>
<textarea id="message"></textarea>
<button type="submit"></button>
</form>
</div>
</body>
</html>
input:focus{
border-color: #007bff;
background-color: #f9f9ff;
}
textarea:focus {
border-color: #007bff;
background-color: #f9f9ff;
}
ILM
February 24, 2026, 9:24am
13
please take a note of the part that says
Use a list selector in the given order.
input, textarea, :focus{
border-color: #007bff;
background-color: #f9f9ff;
}
Hi, the code responds in the console but it still won’t pass…
ILM
February 24, 2026, 9:35am
15
that selector is not giving a style to input and textarea when they are selected, each selector in a selector list is independent from the others
1 Like
