HTML Forms

Forms allow users to enter data, making your site interactive.

They could be performing a search, logging in, signing up for a newsletter.

HTML form elements

form

https://html.spec.whatwg.org/multipage/forms.html

action

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action

Url that handles the form submission.

method

HTTP method used for submission.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method

input

type

Text, button, radio, checkbox, etc.

<input [type="radio"]>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

textarea

Multi line text.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

label

Use for="#ID" attribute to label a form element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

https://html.spec.whatwg.org/multipage/forms.html#the-label-element

button

UI button.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Form submission

Hitting the enter key when an input is focused should submit the form.

The form submission is an HTTP request using the form's method (GET/POST/etc) and action(the URL to send to).

Submit buttons

An input[type="submit"] or button[type="submit"] can be used to submit the form.

Button elements allow content inside the button, and are more flexible to use than input[type="submit"] or input[type="button].

Javascript submission

Add a submit event listener, and use Event.preventDefault() to stop the normal HTTP submission.

An input element's value can be accessed with .value.

Check out the FormData class.
https://developer.mozilla.org/en-US/docs/Web/API/FormData

Level
Topics