Build a Job Application Form - Build a Job Application Form

Tell us what’s happening:

Stuck on steps 14 and 15. Tried everything but can’t seem to get it to work.

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">
    <link rel="stylesheet" href="styles.css"/>
    <title>Job Application Form</title>
</head>
<body>
    <div class="container">
        <h1>Job Application Form</h1>
        <form>
            <label for="name">Name:</label>
            <input required type="text" id="name" placeholder="Full Name"/>
            <label for="email">E-mail id:</label>
            <input required type="email" id="email" placeholder="example@email.com"/>
            <label for="phone-no">Phone Number:</label>
            <input required type="number" id="phone-no" placeholder="Valid phone no."/>

            <label for="position">Job Position</label>
            <select id="position" required>
                <option disabled selected value="1">Select</option>
                <option value="2">Consultant</option>
                <option value="3">Technical Support</option>
                <option value="4">Human Resources</option>
                <option value="5">Marketing</option>
                <option value="6">S/W Engineering</option>
                <option value="7">H/W Engineering</option>
                <option value="8">SEO Engineer</option>
                <option value="9">PR</option>
                <option value="10">Operations</option>
            </select>

            <fieldset class="radio-group"> 
                <legend>Availability</legend> 
                <label for="full-time">Full-Time</label>
                <input required type="radio" name="availability" id="full-time">
                <label for="part-time">Part-Time</label>
                <input required type="radio" name="availability" id="part-time">
                <label for="intern">Internship</label>
                <input required type="radio" name="availability" id="intern"> 
            </fieldset>

            <textarea required type="text" id="message" rows="3">Enter field of interest</textarea>
            <button type="submit" id="submit">Submit form</button>
        </form>
    </div>
</body>
</html>
/* file: styles.css */
body{
  background-color:lightslategray;
  font-family:"Sans-Serif","Georgia";
}

.container{
  margin:20px;
  padding:20px;
  line-height:50px;
}
fieldset{
  text-decoration:underline;
  margin:30px;
  padding:15px 10px;
}

form{
  display:flex;
  flex-direction:column;
  margin:5px;
  padding:5px;
}
textarea{
  margin:20px;
  padding:10px;
}

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

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

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

button:hover{  background-color:mediumturquoise;
}
.radio-group input[type="radio"]:checked{
  border-color:5px lightcoral;
  background-color:lavender;
  box-shadow:5px burlywood;
}
.radio-group input[type="radio"]:checked label{
  text-color:maroon;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

is the label inside the input? this selector will select label element inside the checked input element

hi. the label is outside the input and is declared first before the input.

so you need to use a different selector

i tried with all selectors and i even swapped the positions of declaration of input type and label type in the html file but nothing seems to work

what selector are you trying right now?

hi. so i declared the input type first and then added the label with corresponding id and for values in the html file and then i declared the css statement with the + operator and it works! thank you.

still stuck on step 14

hi! i fixed it. thank you so much for the help :slight_smile: