Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

please i need with step 9 and 18.. i’ve tried differently and code still not passing

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="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <form>
        <label>Full Name:</label>
        <input class="name" type="text" id="name"></input>
        <label>E-mail:</label>
        <input class="email" type="email" id="email"></input>
        <label>Select a position:</label>
        <select id="position">
            <option>Art</option>
            <option>works</option>
            <option>finance</option>
            </select>
           <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;
  }
  input[type="radio"]:checked + label {
  color: blue; 
}
input:first-of-type{
  margin-bottom: 16px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 16px;
    font-size: 16px;
}
label[type="radio button"]:checked {
  background-color: yellow;
  color: yellow;

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.

3

No error message

You should associate every input element with a label element.

now i am lost with your questions

4

do you remember how an input element and a label element are associated?

not like this, </input> closing tag should not be there because input elements are void elements, that means they don’t have a closing tag

5 
<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">

<form>

    <label>Full Name:</label>

    <input class="name" type="text" id="name">

    <label>E-mail:</label>

    <input class="email" type="email" id="email">

    <label>Select a position:</label>

    <select id="position">

        <option>Art</option>

        <option>works</option>

        <option>finance</option>

        </select>

       <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 type="radio" name="availability">

      <label class="radio"> Part-Time</label>

      <input type="radio" name="availability">

      <label class="radio">Only Night-Time</label>

    </fieldset>

    <label class="message">Why do you want this job?</label>

    <textarea id="message"></textarea>

    <button type="submit">SUBMIT</button>

    </form>

</div>
‘‘‘
6

I see you posted new code, can you explain what is this new code for?