All Tracks/lab job application form/
Đang tải...
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:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.