don’t pass the test in 18
<!-- 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 id="job-form">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required placeholder="Your full name">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required placeholder="you@example.com">
<label for="position">Position</label>
<select id="position" name="position" required>
<option value="">Select a position</option>
<option value="developer">Frontend Developer</option>
<option value="designer">UI/UX Designer</option>
<option value="manager">Project Manager</option>
</select>
<fieldset class="radio-group">
<legend>Availability</legend>
<label class="radio-option">
<input type="radio" name="availability" value="full-time" required>
Full-Time
</label>
<label class="radio-option">
<input type="radio" name="availability" value="part-time">
Part-Time
</label>
<label class="radio-option">
<input type="radio" name="availability" value="contract">
Contract
</label>
</fieldset>
<label for="message">Message</label>
<textarea id="message" name="message" required placeholder="Tell us something about you"></textarea>
<button type="submit">Submit Application</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
/* Container */
.container {
max-width: 450px;
margin: 40px auto;
padding: 20px;
background: #fafafa;
border-radius: 12px;
font-family: Arial, sans-serif;
}
/* Labels */
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
/* Inputs, Select, Textarea */
input,
select,
textarea {
width: 100%;
padding: 10px;
margin-top: 6px;
border: 2px solid #ccc;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
/* FIRST input styled differently */
input:first-of-type {
border-radius: 20px;
}
/* Focus state */
input:focus,
textarea:focus {
border-color: #0077ff;
outline: none;
}
/* Valid / Invalid states */
input:valid,
select:valid,
textarea:valid {
border-color: green;
}
input:invalid,
select:invalid,
textarea:invalid {
border-color: red;
}
/* Radio Group */
.radio-group {
margin-top: 20px;
border: none;
padding: 0;
}
.radio-option {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
cursor: pointer;
}
/* Hide default radio */
.radio-option input[type="radio"] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #666;
border-radius: 50%;
position: relative;
cursor: pointer;
transition: 0.3s;
}
/* Checked radio styling */
.radio-group input[type="radio"]:checked {
border: solid 1px #0077ff;
background-color: #cfe4ff;
box-shadow: 0 0 4px #0077ff;
}
/* Change label color when selected */
.radio-group input[type="radio"]:checked + label{
border: solid 1px #1078af;
}
/* Button */
button {
margin-top: 20px;
width: 100%;
padding: 12px;
background: #0077ff;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
/* Hover */
button:hover {
background: #005fcc;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.0.0
Build a Job Application Form - Build a Job Application Form
1 Like
I’m sorry if my explanation is not too much detailed. the first is lost when i try to login for first time
dhess
March 25, 2026, 8:08pm
3
Welcome to the forum @sjc22031977 !
Are your radio buttons associated with their labels? Also, I notice you are using transition in your CSS…that can bork the tests (a timing issue).
Happy coding!
I deleted the transitions and the labels are associated. I copy the part of the code with the labels
<fieldset class="radio-group">
<legend>Availability</legend>
<label class="radio-option">
<input type="radio" name="availability" value="full-time" required>
Full-Time
</label>
<label class="radio-option">
<input type="radio" name="availability" value="part-time">
Part-Time
</label>
<label class="radio-option">
<input type="radio" name="availability" value="contract">
Contract
</label>
</fieldset>
dhess
March 26, 2026, 1:59pm
5
Your labels are still not associated with their input elements.
Here’s an example from this reference :
The text field in the example below has the explicit label of “First name:”. The label element’s for attribute matches the id attribute of the input element.
Example Code:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname" />
i did it but i have the same error
<legend>Availability</legend>
<label class="radio-option" for="full-time">Full-Time
</label>
<input type="radio" name="availability" value="full-time" id="full-time" required>
<label class="radio-option" for="part-time">Part-Time
</label>
<input type="radio" name="availability" value="part-time" id="part-time">
<label class="radio-option" for="contract">Contract</label>
<input type="radio" name="availability" value="contract" id="contract">
</fieldset>
dhess
March 27, 2026, 9:46am
7
Your selector’s next sibling combinator is looking for the label to come immediately after the radio button, which is typically the way a radio button and label are coded in HTML.
yes, before i had the input nested into label. i though that was enough to link the label with the input, then i add the for in the label and the id in the input. how i t supposed to be this line now. i am lost. i don’t know what is wrong. everybody it is having problems with this exercise. it is not clear the hints
dhess
March 27, 2026, 12:18pm
9
A radio button’s HTML is typically coded like this:
<input type="radio" id="btn">
<label for="btn">My radio button label</label>
So that the radio button is before the label.
Sorry, but i continue with the error. I pass my code
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" name="availability" id="full-time">
<label for="full-time">Full-Time
</label>
<input type="radio" name="availability" id="part-time">
<label for="part-time">Part-Time</label>
<input type="radio" name="availability" id="contract">
<label for="contract">Contract</label>
</fieldset>
dhess
March 31, 2026, 12:20pm
11
This is the hint from failed test #18:
You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
And this is the code for your selector:
.radio-group input[type="radio"]:checked + label{
border: solid 1px #1078af;
}
How is your code meeting the above requirement?
Well the error continue
<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">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required placeholder="Your full name">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required placeholder="you@example.com">
<label for="position">Position</label>
<select id="position" name="position" required>
<option value="">Select a position</option>
<option value="developer">Frontend Developer</option>
<option value="designer">UI/UX Designer</option>
<option value="manager">Project Manager</option>
</select>
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" name="availability" id="full-time">
<label for="full-time">Full-Time
</label>
<input type="radio" name="availability" id="part-time">
<label for="part-time">Part-Time
</label>
<input type="radio" name="availability" id="contract">
<label for="contract">Contract</label>
</fieldset>
<label for="message">Message</label>
<textarea id="message" name="message" required placeholder="Tell us something about you"></textarea>
<button type="submit">Submit Application</button>
/* Container */
.container {
max-width: 450px;
margin: 40px auto;
padding: 20px;
background: #fafafa ;
border-radius: 12px;
font-family: Arial, sans-serif;
}
/* Labels */
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
/* Inputs, Select, Textarea */
input,
select,
textarea {
width: 100%;
padding: 10px;
margin-top: 6px;
border: 2px solid #ccc ;
border-radius: 6px;
font-size: 1rem;
}
/* FIRST input styled differently */
input:first-of-type {
border-radius: 20px;
}
/* Focus state */
input:focus,
textarea:focus {
border-color: #0077ff ;
outline: none;
}
/* Valid / Invalid states */
input:valid,
select:valid,
textarea:valid {
border-color: green;
}
input:invalid,
select:invalid,
textarea:invalid {
border-color: red;
}
/* Radio Group */
.radio-group {
margin-top: 20px;
border: none;
padding: 0;
}
.radio-option {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
cursor: pointer;
}
/* Hide default radio */
.radio-option input[type=“radio”] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #666 ;
border-radius: 50%;
position: relative;
cursor: pointer;
}
/* Checked radio styling */
.radio-group input[type=“radio”]:checked {
border: solid 1px #0077ff ;
background-color: #cfe4ff ;
box-shadow: 0 0 4px #0077ff ;
}
/* Change label color when selected */
.radio-group input[type=“radio”]:checked + label{
border: solid 1px #1078af ;
}
/* Button */
button {
margin-top: 20px;
width: 100%;
padding: 12px;
background: #0077ff ;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
}
/* Hover */
button:hover {
background: #005fcc ;
}
dhess
April 7, 2026, 12:53pm
13
What does the hint from Test #18 say you should change on the radio button label when it’s checked? And what is your selector doing instead?
The hint say this “You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.”
and my code do this:
/* Change label color when selected */
.radio-group input[type=“radio”]:checked + label{
border: solid 1px #1078af ;
}