Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

This is the code so far, I am unable to understand why I am getting following 2 errors :

  1. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected. (CSS changes are displayed and can be seen but test case doesn’t pass).
  2. The select and textarea should be reflecting the invalid state initially( display red border ) but instead displays the green border, only the text input fields(name, email) display the red border.

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="sytlesheet" href="styles.css"/>
</head>
<body>
    <h1>Job Application Form</h1>
    <div class="container">
        <form>
            <label for="name">Full Name</label>
            <input type="text" id="name" required placeholder="Enter your name" />
            
            <label for="email">Email</label>
            <input type="email" id="email" required placeholder="Enter your email"/>
            
            <label for="position">Job Position</label>
            <select id="position" required>
            <option id="select" value="select">Select a option</option>
            <option id="dev" value="dev">Front-end Developer</option>
            <option id="back-dev" value="back-dev">Back-end Developer</option>
            <option id="full-dev" value="full-dev">Full Stack Developer</option>
            <option id="devops" value="devops">Dev-Ops Engineer</option>
            </select>
            
            <fieldset class="radio-group">
                <legend>Availability</legend>
                <input id="full" type="radio" name="availability" checked/>
                <label for="full">Full Time</label>
                <input type="radio" name="availability"/>
                <label for="full">Part Time</label>
            </fieldset>
            <label for="message">Why should we choose you for this role?</label>
            <textarea id="message" required rows="5"> </textarea>
            <button type="submit" id="submit">Submit</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
body{
  font-family: arial, sans-serif;
  padding: 20px;
}
.container{
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
h1{
  text-align: center;
}

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

input, textarea, select{
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid white;
  border-radius: 4px;
  box-sizing: border-box;
}

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

input:focus, textarea:focus{
  border-color: violet;
}

.radio-group{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.radio-group input[type="radio"]{
    margin-right: 10px;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    transition: border-color 0.2s;
  }
.radio-group input[type="radio"]:checked{
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 4px white; 
  color: blue;
}
input[type="radio"]:checked + label {
  color: blue; 
}

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

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


input:nth-child(1){
  border-radius: 5px;
}

button{
  background-color: green;
  display: block;
  width: 100%;
  padding: 20px;
  font-size: 20px;
  border: 0px solid white;
  border-radius: 4px;
  color: white;
}

button:hover{
  background-color: black;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

your two label elements have the same for, and the second input doesn’t have any id

If you click on the text Part Time you will see that the input doesn’t get checked. If the label is not properly linked with the input the tests can’t pass your code

1 Like
3

Thanks for bringing that to attention but fixing that also didn’t make the test case pass :sweat_smile:
The error was due to color property set to blue in the .radio-group

.radio-group input[type="radio"]:checked{
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 4px white; 
  color: blue;
}

The second issue was resolved by changing value attribute in select :
<option id="select" value="">Select a option</option>
Also there was one whitespace due to which it showed green border in textarea:
<textarea id="message" rows="5" required></textarea>