Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hello,
I can’t get past test no 10 and 15, I have tried different codes, pseudo classes and even code validation from on other platforms(no errors found) but I just can’t get it to pass. Someone kindly advise.

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="styesheet" href="styles.css"
</head>
<body>
<div class="container">
  <form>
    <label for="name">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 selected disabled>select below</option>      <option>manager</option>
      <option>sales</option>
      <option>customer service</option>
    </select> 
<br>
    <fieldset class="radio-group">
        <legend>Availability</legend>
        <input type="radio" name="availability" value="full-time">
        <label>Full time</label>
        <input type="radio" name="availability" value="pa rt-time">
        <label>Part time</label>
        <input type="radio" name="availability" value="remote">
        <label>Remote</label>
        <input type="radio" name="availability" value="freelance">
        <label>Freelance</label>
        </fieldset> 
<br>
<textarea id="message" cols="40" rows="6" placeholder="enter your comments here"></textarea>
<br>
<button type="submit">Submit</button>
  </form>    
</div>
</body>
</html>

/* file: styles.css */
body {background-color: lightgray; margin: 5px; padding: 10px;}
input:focus, textarea:focus {border: 2px dashed blue:}
input:invalid, select:invalid, textarea:invalid {border: 2px solid red;}
input:valid, select:valid, textarea:valid {border: 2px solid green;}
button:hover {color: blue; font-weight: bold;background-color: lightblue; border: 2px dotted blue;}
.radio-group input[type="radio"]:checked { border: 5px solid gray; background-color: olive; box-shadow: 0 0 15px gray;}

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

input:first-of-type {border-radius: 4px;}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

hey @Ronn

welcome to the forum

solution to pass step 10
just reviewed ur code now and i found out there is an error.
the

your value should end with a semi colon ; not “:”

also try making your css code to be more readable by following this format

body {
   /* styles*/
}

h1 {
   /* styles*/
}
3

you need to have input and label elements associated with each other

1 Like
4

based on what @ILM said on making your input and label element associated with each other…

Each <label> should use the for attribute that matches the id of the corresponding <input>.

5

@ILM got it, thanks.

6

@mozieraphael awesome, passed all the tasks. Big thanks :clap: