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