FORMS Module #34

Question 1

How would you create a field on a form to upload a file?

Answer 1

You can attach multiple files:

You can use a specific MIME type, like application/json or set a file extension like .pdf. Or set multiple file extensions, like this:

Question 2

What happens when you specify an input type of date and or time?

Answer 2

Shows a picker. Handy!

Question 3

What is needed in terms of JS to intercept a form submission.

Answer 3

A form submit EVENT as below:

form.addEventListener('submit', event => {
  // submit event detected
})

Question 4

Why is preventDefault( ) needed?

Answer 4

It prevents the unwanted reloading of the page. Here’s how to include it in the function:

const form = document.querySelector('form')
form.addEventListener('submit', event => {
  // submit event detected
  event.preventDefault()
})

At this point clicking the submit event button in the form will not do anything, except giving us the control.

Question 5

Extra Credit, how do you clear a form upon submit?

Answer 5

Add an event listener listening for a click on the submit button.

document. querySelector(‘submitbtn’).addEventListener(‘click’, event =>{
document. querySelector(‘form’).reset()