Hướng dẫn thử thách
1 / 1
Build a Job Application Form
**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
**User Stories:**
1. You should have a `div` element with the class `container`.
1. Inside the `div` element, you should have a `form` element.
1. The form should contain an `input` element with the type `text` and the id `name` for entering the user's full name.
1. You should have another `input` element with the type `email` and the id `email` for entering the user's email address.
1. The form should include a `select` element with the id `position` that allows users to select a job position.
1. You should have a `fieldset` element with class of `radio-group`.
1. Inside `.radio-group` you should have a set of `input` elements with the type `radio` and relevant labels for selecting availability options (e.g., Full-Time, Part-Time). The group `name` should be `availability`.
1. You should have a `textarea` element with the id `message` for entering a message.
1. You should associate every `input`, `select`, and `textarea` element with a `label` element.
1. You should have a `button` element with the type `submit` for submitting the form.
1. Add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color and remove the default outline when focused.
1. The `input`, `select` and `textarea` elements should have an `:invalid` pseudo-class that changes the border color to red when invalid input is detected.
1. The `input`, `select` and `textarea` elements should have a `:valid` pseudo-class that changes the border color to green when valid input is entered.
1. The `button` element should have a `:hover` pseudo-class that changes the background color when hovered over.
1. Use the `:checked` pseudo-class on `.radio-group input[type="radio"]` to add a border color, background color and a box shadow when the radio button is selected.
1. Use the `:checked` pseudo-class on radio buttons to change the text color of the associated `label` when the option is selected.
1. Add a `:first-of-type` pseudo-class to the `input` element to style the first input field differently. (e.g., rounded corners).
**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.html
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵