You should associate every input element with a label element.
I thought I had, I was doing my best to follow instructions. I’ve taken a step back from this lab to redo the wholke module again because my brain has drawn a blank on this one.
It’s not the lack of wanting to get it right. I thought I had each label and input matched up right but so far. This question having a white X with a black circle around it has told me otherwise.
I’m going to carry on revising. I do try promise!!
<!-- 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>
<header><h1 class="title center">Job Application page 2026</h1>
<h2 class="title center">Please fill out the form to put your application through.</h2></header>
<div class="container">
<form class="info">
<label for="name">Full Name:</label>
<input type="text" id="name" class="name" placeholder="Your name" required>
<br>
<label for="email">Email Address:</label>
<input type="email" id="email" class="email" placeholder="yours@random.com" required>
<br>
<legend>Position:</legend>
<select id="position">
<option>Select Option</option>
<option>Junior Developer</option>
<option>Manager</option>
<option>Designer</option>
<option>Senior Level</option>
</select>
<fieldset class="radio-group">
<legend>Availability:</legend>
<input class="radio-group" type="radio" name="availability">
<label for="availability">Part-Time</label>
<input class="radio-group" type="radio" name="availability">
<label for="availability">Full-time</label>
<input class="radio-group" type="radio" name="availability">
<label for="avilability">Nights-only</label>
</fieldset>
<legend>Why do you want this job?</legend>
<textarea id="message" rows="5" cols="70"></textarea>
<button type="submit">Click Me</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
body {
background-color: midnightblue;
color: white;
}
.title {
text-align: center;
font-size: 1.5rem;
}
.container {
background-color: lightblue;
width: 100%;
border-radius: 12px;
padding: 10px 20px;
margin: 20px auto;
box-shadow: 0 5px 15px white;
text-align: center;
}
label {
font-size: 1.5rem;
}
input:focus, textarea:focus {
border-color: red;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0
Build a Job Application Form - Build a Job Application Form
GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub
-ignore CSS- thats not my priority
dhess
June 8, 2026, 1:25pm
3
Hi @bunnyprog ,
We give all of the radio buttons the same name to group them, but that name should not be used to associate a radio button’s label. Instead, you need to give each radio button a unique id attribute and associate your labels using that.
You can refer to the examples here: HTML label tag
Hope that helps…
Happy coding
You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
Can’t get this one right, thats all I need to pass.
This lab has been difficult as anything to concentrate on with building work in background!
any tips would be great!!
<!-- 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">
<header><h1>Job Application Form:</h1></header>
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" placeholder="Your Name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" placeholder="yours@gmail.com" required>
<legend>Your Position choice?</legend>
<select id="position">
<option value=" " disabled>Select Option</option>
<option>Junior Developer</option>
<option>Designer</option>
<option>Manager</option>
<option>Senior Level</option>
</select>
<fieldset class="radio-group">
<legend>Avaliability</legend>
<label for="part-time">Part-Time</label>
<input type="radio" name="availability" id="part-time">
<label for="full-time">Full-Time</label>
<input type="radio" name="availability" id="full-time">
<label for="night-only">Night-Only</label>
<input type="radio" name="availability" id="night-only">
</fieldset>
<legend>Why this job over others?</legend>
<textarea id="message" rows="5" placeholder="Your Insipiration.." required></textarea>
<button type="submit">Click me!</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
body {
background-color: midnightblue;
color: white;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
.container {
margin: 50px;
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 6px;
}
form {
display: flex;
flex-direction: column;
}
input, select, textarea {
margin-bottom: 15px;
padding: 10px;
border: 2px dotted teal;
border-radius: 4px;
font-size: 16px;
}
input:focus, textarea:focus {
border-color: orange;
outline: none;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: blue;
cursor: pointer;
}
.radio-group input[type="radio"]:checked {
border-color: magenta;
background-color: gray;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
text-color: blue;
}
input:first-of-type {
border-radius: 8px;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0
Build a Job Application Form - Build a Job Application Form
GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub
dhess
June 8, 2026, 6:02pm
5
I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.
dhess
June 8, 2026, 6:06pm
6
The changes you made to associate the radio buttons with their labels look good, but I recommend placing the radio button before its label, which is convention, to help you satisfy the requirement for Test #19 .
Take a look at this reference for information about how to do 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.
I know I’m still doing it wrong…but I’m wrong with the :checked on the radio buttons…I’ve looked at other people’s answers as a comparison. I don’t see what I’m missing
<!-- 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">
<header><h1>Job Application Form:</h1></header>
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" placeholder="Your Name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" placeholder="yours@gmail.com" required>
<legend>Your Position choice?</legend>
<select id="position">
<option value=" " disabled>Select Option</option>
<option>Junior Developer</option>
<option>Designer</option>
<option>Manager</option>
<option>Senior Level</option>
</select>
<fieldset class="radio-group">
<legend>Avaliability</legend>
<label for="part-time">Part-Time</label>
<input type="radio" name="availability" id="part-time">
<label for="full-time">Full-Time</label>
<input type="radio" name="availability" id="full-time">
<label for="night-only">Night-Only</label>
<input type="radio" name="availability" id="night-only">
</fieldset>
<legend>Why this job over others?</legend>
<textarea id="message" rows="5" placeholder="Your Insipiration.." required></textarea>
<button type="submit">Click me!</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
body {
background-color: midnightblue;
color: white;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
.container {
margin: 50px;
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 6px;
}
form {
display: flex;
flex-direction: column;
}
input, select, textarea {
margin-bottom: 15px;
padding: 10px;
border: 2px dotted teal;
border-radius: 4px;
font-size: 16px;
}
input:focus, textarea:focus {
border-color: orange;
outline: none;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: blue;
cursor: pointer;
}
.radio-group input[type="radio"]:checked {
border-color: red;
background-color: gray;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
label:checked, radio:checked {
text-color: purple;
}
input:first-of-type {
border-radius: 8px;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0
Build a Job Application Form - Build a Job Application Form
GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub
dhess
June 8, 2026, 6:31pm
8
Please do not create duplicate topics for the same challenge/project question(s). If you need more help then respond back to the original topic you created with your follow up questions and/or your question and updated code, formatted as follows:
There are two ways you can format your code to make it easier to read and test:
After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)
Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post .
To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:
The duplicate topic has been unlisted.
Thank you.
I have tried on mulitple occasions to add + label to the .radio-group input [type="radio] and I’ve added checked. it still doesn’t like question 19. I will carry on trying to get it to behave! oh lord…
dhess
June 8, 2026, 6:45pm
10
Did you change the order of the label and associated radio button in your HTML, so your label actually is a descendant of the radio button?
This is not the way to target a checked radio button, much less a label that appears after a checked radio button.
You already have a selector to target a checked radio button:
Now, what do you need to add to that to create a new selector that targets the label after the checked radio button? (refer to the link i provided)
This label:checked/ radio:checked isn’t what I have now, that was when I was working on HTML,
body {
background-color: midnightblue;
color: white;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
.container {
margin: 50px;
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 6px;
}
form {
display: flex;
flex-direction: column;
}
input, select, textarea {
margin-bottom: 15px;
padding: 10px;
border: 2px dotted teal;
border-radius: 4px;
font-size: 16px;
}
input:focus, textarea:focus {
border-color: orange;
outline: none;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: blue;
cursor: pointer;
}
.radio-group input[type=“radio”]:checked {
border-color: pink;
background-color: green;
box-shadow: 0 4px 6px;
}
fieldset {
border-radius: 16px;
border-color: green;
border-width: 1px;
}
input:first-of-type {
border-radius: 8px;
}
child combinators etc I do remember doing a while back but won’t let me add + label…
I’m confused
dhess
June 8, 2026, 6:59pm
12
Please learn how to format your code for readability and testability. A previous post provided specific instructions.
What do you mean by this? Please provide an example of what you tried.
Make sure that if you have label for each ID in your code and if you have an Id with the position attribute , you have to give it a label instead of legend and link it to its positon ID of the corresponding position.
