Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Number 9 and 18 having issues. No matter what I do they won’t complete.

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
</head>
<body>
    <header><h1>Job Application Form</h1></header>
<div class="container">
    <form>
        
        <label>Full Name:
        <input class="name" type="text" id="name"></input>
        </label>

        <label>E-mail:
        <input class="email" type="email" id="email"></input>
        </label>

        <label>Select a position:
        <select id="position">
   <option>Web Developer</option>
   <option>Tech Engineer</option>
   <option>Data Entrist</option>
   <option>IT Scientist</option>
        </select>
        </label>
        

                 <label id="radio-group">Choose your work-time:</label>
        <fieldset class="radio-group" name="availability">

          <input type="radio" name="availability"><label class="radio"> Full-Time</label></input> 
          <input type="radio" name="availability"><label class="radio"> Part-Time</label></input> 
          <input type="radio" name="availability"><label class="radio">Only Night-Time</label></input>
        </fieldset>
        

        <label class="message">Why do you want this job?</label>
        <textarea id="message"></textarea>
        <button type="submit">SUBMIT</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */

body {
    font-family: Arial, sans-serif;
    padding: 0;
    background-color: #cec6c6;
}

h1 {
  text-align: center;
 
}

.container {
    max-width: 90%;
    margin: 5px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

input, select, textarea {
    margin-bottom: 16px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 16px;
    font-size: 16px;
    
}

button {
  border-radius: 16px; 
  font-weight: bold;
  height: 40px;
}

input:focus, textarea:focus { 
    outline: none !important;
    border-color: yellow;
    background-color: rgba(248, 204, 204, 0.452);
    box-shadow: 0 0 10px #719ECE   
 }

 select:focus { 
    outline: none !important;
    border-color: yellow;
    background-color: rgba(248, 204, 204, 0.452);
    box-shadow: 0 0 10px #719ECE 
 }

button:hover {
  background-color: green;
  color: white;
}

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

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

.radio-group input[type="radio"]:checked {
  -webkit-appearance: none;
  border-color: red;
  background-color: rgb(9, 9, 247);
  box-shadow: 0 1px  rgb(180, 180, 6);
  margin-top: 16px;
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.radio-group input[type="radio"] {
  margin-top: 16px;
  width: 10%;

}


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


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

.message {
  padding-top: 16px;
}

fieldset {
  
  border-radius: 16px;
  border-color: green;
  border-width: 1px;
  }
  
  /* file: styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

input, select, textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

input:focus, textarea:focus {
    border-color: #007BFF;
    outline: none;
}

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

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

.radio-group {
    margin-bottom: 15px;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.radio-group input[type="radio"]:checked + label {
    border-color: #007BFF;
    background-color: #007BFF;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

textarea {
    resize: vertical;
}

button {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #0056b3;
}

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

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

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Test 9. You should associate every input element with a label element.

When the user clicks on the label element, it´s like the user clicks on the radio button too.
For that to happen, you have to explicitly associate the label element and the input element.
You can find about that in that link.
I use MDN most of the time. It’s a great resource to have while you code.

And Welcome to the forum @wesley.lunnen !