Build a Job Application Form

HTML-CSS
1

The problems I have are with steps 6 and 7. I ran the HTML through a validator and it came back fine. I don’t know what the problem is.

Job Application Form

Name


Email


Position


Availablity

Part-Time

Full-Time


Message


Submit

CSS

input:focus,textarea:focus{

border-color: black;

}

input:invalid, select:invalid,

textarea:invalid {

border-color: red;

}

input:valid, select:valid, textarea:valid{

border-color: green;

}

button:hover{

background-color: green;

}

.radio-group input[type=“radio”]:checked{

border-color: green;

background-color: blue;

box-shadow: 5px 5px 5px 5px;

}

input:first-of-type{

border-color: brown;

}

label:checked{

color: yellow;

padding: 5px;

}

2

please link to the challenge, and put your code in a code block

3 
<!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">Name</label>
        <input type="text" id="name" required>
        <br>
        <label for="email">Email</label>
        <input type="email" id="email" required>
        <br>
        <label for="position">Position</label>
        <select id="position" required>
            <option>Intern</option>
            <option>Entry-Level</option>
            <option>Mid-Level</option>
            <option>C-Suite</option>
        </select>
        <br>
        <fieldset class=".radio-group">
    <legend>Availablity</legend> 
            <input type="radio" name="availability." id="availability" value="part-time">
            <label for="availability">Part-Time</label>
            <input type="radio" name="availablity" id="availablity" value="full-time">
            <label for="availablity">Full-Time</label>
        </fieldset>
        <br>
        <label for="message">Message</label>
        <br>
        <button type="submit" rows="5">Submit</button>
        <textarea id="message"></textarea>
    </form>
</div>
</body>
</html>

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


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

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

button:hover{
  background-color: green;
}
.radio-group input[type="radio"]:checked{
border-color: green;
background-color: blue;
box-shadow: 5px 5px 5px 5px;
}
input:first-of-type{
  border-color: brown;
}

label:checked{
  color: yellow;
  padding: 5px;
}
4

The id attribute value must be unique. And you have dots where there should be no dots.

5

Hello @jen.clark54 !

Good attempt.
Along with the previous good guidance, I noticed a slight spelling error where the text “Availablity”
is located within the legend. I was not able to copy and paste the legend with it in place. Something we all can do and have done.
Keep up the good progress! :slightly_smiling_face:

1 Like
6

I have a new problem now. I can’t pass challenges 15-18.

Here’s what I have now:

<!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">Name</label>
        <input type="text" id="name" required>
        <br>
        <label for="email">Email</label>
        <input type="email" id="email" required>
        <br>
        <label for="position">Position</label>
        <select id="position" required>
            <option>Intern</option>
            <option>Entry-Level</option>
            <option>Mid-Level</option>
            <option>C-Suite</option>
        </select>
        <br>
        <fieldset class="radio-group">
    <legend>Availablity</legend> 
            <input type="radio" name="availability" id="part-time" value="part-time">
            <label for="part-time">Part-Time</label>
            <input type="radio" name="availability" id="full-time" value="full-time">
            <label for="full-time">Full-Time</label>
        </fieldset>
        <br>
        <label for="message">Message</label>
        <br>
        <button type="submit" rows="5">Submit</button>
        <textarea id="message"></textarea>
    </form>
</div>
</body>
</html>

I once again ran both the html and css through a validator and it came back fine.

7

aren’t tests 15-18 about your css? you need to share that too

8

Can a label ever be checked?

Also, please check the syntax of your box-shadow.

9 
input:focus,textarea:focus{
  border-color: black;
}


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

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

button:hover{
  background-color: green;
}
.radio-group input[type="radio"]:checked+label{
border-color: green;
background-color: blue;
box-shadow: 20px 20px 20px 20px;;
}
input:first-of-type{
  border-color: brown;
}
10

which line satisfies this?

You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a border color when the radio button is selected.

11

Oh shoot, I fixed it a bit. Let me show you my new code.

order-color: black;
}


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

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

button:hover{
  background-color: green;
}
.radio-group input[type="radio"]:checked{
border-color: green;
background-color: blue;
box-shadow: 20px;
}
input:first-of-type{
  border-color: brown;
}

Now I’m only having a problem with the last two.

12

can you answer the question in my last pist please?