Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

i have 2 issues here:

the first one is (You should associate every input element with a label element.)

The second one is (You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.)

Please help me out

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>
        <label for="name">Full Name: </label>
        <input type="text" id="name">
        <label for="email">Email: </label>
        <input type="email" id="email">
        <label for="position">Position: </label>
        <select id="position"><option>Select a Position</option>
        <option>Developer</option>
        <option>Designer</option>
        <option>Manager</option>
        </select>
        <fieldset class="radio-group"><legend>
            Availability
           </legend>
           <input type="radio" name="availability">
           <label for="full-time">Full-Time</label> 
           <input type="radio" name="availability">
           <label for="part-time">Part-Time</label>
        </fieldset>
        <p>Why do you want this job?</p>
        <textarea id="message" cols="30" rows="10"></textarea>
    <button type="submit">Submit</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
input:focus, textarea:focus {
  border-color: orange;
}

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

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

button:hover {
  background-color: royalblue;
}

.radio-group input[type="radio"]:checked {
  border-color: teal;
  background-color: skyblue;
  color: midnightblue;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input:first-of-type {
  border-radius: 10px;
  background-color: #eef7ff;
  border-color: #007BFF;
}

body {
  max-width: 300px;
  padding: 20px;
  margin: 10px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Do you remember what you need to do to associate a label and an input element? What should the for attribute in your label be?

And here’s a good reference about next sibling combinators: Next-sibling combinator - CSS | MDN

3

I don’t understand what you’re talking about

4

Could you be more specific, please?

: The Label element - HTML | MDN

5

Tell us what’s happening:

Please i have 2 issues with my project.

The first is i was told to associate every input element with a label element… I don’t know how to do that cos it won’t mark correctly.

The second issue is i was told to use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected… I’ve tried but still don’t get it… Could you help out please?

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>
        <label for="name">Full Name:</label>
        <input type="text" id="name">
        <label for="email">Email:</label>
        <input type="email" id="email">
        <label for="position">Position:</label>
        <select id="position">
            <option>Select a position</option>
            <option>Developer</option>
            <option>Designer</option>
            <option>Manager</option>
        </select>
        <fieldset class="radio-group">
            <legend>Availability</legend>
            <input type="radio" name="availability"><label for="full-time">Full-Time</label>
            <input type="radio" name="availability"><label for="part-time">Part-Time</label>
        </fieldset>
        <p>Why do you want this job?</p>
        <textarea id="message" rows="10" cols="30"></textarea>
        <button type="submit">Submit</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
input:focus, textarea:focus {
  border-color: orange;
}

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

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

button:hover {
  background-color: royalblue;
}

.radio-group input[type="radio"]:checked {
  border-color: teal;
  background-color: skyblue;
  color: midnightblue;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input[type="radio"] label:checked {
  color: #ff0000;
  font-weight: bold;
}

input:first-of-type {
  border-radius: 10px;
  background-color: #eef7ff;
  border-color: #007BFF;
}

body {
  max-width: 300px;
  padding: 20px;
  margin: 10px;
}

input[type="radio"]:checked + label {
  color: green; 
}

.radio-group label{
  font-weight: normal;
  cursor: pointer;
  margin: 0;
}

label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

6

Add id to each radio button matching the label’s for value.

1 Like
7

Please don’t create duplicate topics for the same challenge/step. I’ve merged the posts into this existing topic.

8

Thank you for the quick solution