Week 8 - Task 1

Job application

Make a form in HTML that handles a job application. It should contain the following elements:

Name - input of type "text"
Age - input of type "number"
Email - input of type "email"
Phone - input of type "tel"
Secret - input of type "password"
Work from home - input of type "checkbox"
Favorite color - input of type "radio"
Job position - select dropdown with "Frontend", "Backend", "Full stack"
About yourself - textbox
Submit button - input of type "submit"

Functionality:

When you press the submit button first prevent the default form submission, then log all the data in the form to the console.

Example of how a solution might look like: GIF

Hints

Instead of the onclick event which you now know about, you must use onsubmit on the form element to catch what happens when you press the button.
Then you want to prevent the default form submission to happen. To do that use event.preventDefault() inside the onsubmit function.
Read the docs here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

There's many ways of displaying all the data from a form. Here's two to help you out

                    let formData = new FormData($form);
                    for (let entry of formData.entries()) {
                        console.log(entry);
                    }

                    let formData = new FormData($form);
                    let data = Object.fromEntries(formData);
                    console.log('data', data);

Read the docs here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

If you are still stuck, ask Alf! 😊