Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I’ve tried all I could. Any ideas on what I should do next?

Your code so far

<!-- file: index.html -->
<div class="container"> <form>
     <div>
         <label for="name">Name</label>
         <input type="text" id="name" placeholder="Enter your name" required>
     </div>
     <div>
         <label for="email">Email</label> <input type="email" id="email" placeholder="e.g example@gmail.com" required>
     </div>
     <div>
         <label for="position">Preferred Position:</label> <select id="position">
             <option>Web developer</option>
             <option>Copywriter</option>
             <option>Graphics Designer</option>
             <option>Cyber Hacker</option>
             <option>Analyst</option>
             <option>Software engineering</option>
             <option>Information Systems Security Manager</option>
         </select>
     </div> <fieldset class="radio-group">
         <legend>How will you work?</legend> <div>
            <input type="radio" name="availability" id="fullTime">
            <label for="fullTime">Full Time</label>
         </div>
         <div>
            <input type="radio" name="availability" id="partTime">
            <label for="partTime">Part Time</label>
         </div>
         <div>
            <input type="radio" name="availability" id="freelance">
            <label for="freelance">Freelance</label>
         </div>
     </fieldset>

     <div>
       <label for="message">Tell us why you think you are worthy</label>
       <textarea id="message"></textarea> </div>
     <div>
         <button type="submit">Submit Application</button>
     </div>
    </form>
</div>
</body>
</html>

/* file: styles.css */
textarea:focus {
  border-color: #007bff;
  outline: none; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

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

input:valid,
select:valid,
textarea:valid {
  border-color: #28a745;
}

button:hover {
  background-color: #218838;
}

.radio-group input[type="radio"]:checked {
  border-color: #007bff;
  }

.radio-group input[type="radio"]:checked {
  background-color: #e0f0ff;
}

.radio-group input[type="radio"]:checked {
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.radio-group input[type="radio"]:checked + label {
  color: #007bff;
  font-weight: bold;
}

input:first-of-type {
  background-color: #f0f8ff;
  border: 2px solid #a0c0ff;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form
https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-job-application-form

2

Is the HTML you posted here complete?

3

yes. its absolutely complete

4

where is your boilerplate? how is the css file linked?

5

Thanks for that. I’m done now

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.