Web Development Forms and HTTP Methods

Study Notes

Forms are used to collect user input, that can be used to store information, or authenticate users
The FORM ELEMENT is a container for all input elements
- The action attribute specifies the URL where the data is sent
- The method attribute determines the HTTP method to use (POST or GET)

Describe the action the server should perform with the submitted data
GET retrieves data from the server
POST Creates new resources (e.g., user signup)
PUT Updates existing data on the server, replacing current content with new data
PATCH Partially updates existing data on the server, modifying only specified fields
DELETE Removes data from the server
OPTIONS Asks the server which HTTP methods are supported for a specific resource

The INPUT ELEMENT is the core building block for user input
The type attribute determines the type of data captured (e.g. text, password, email)
- text Displays a text input field
- password Displays a password input field (masked)
- number Displays a number input field
- url Displays a URL input field
- tel Displays a phone number input field
- date Displays a date input field
- datetime-local Displays a date and time input field
- month Displays a month input field
- week Displays a week input field
- color Displays a color picker
- file Displays a file upload input field
- reset Displays a button to reset the form
- submit Displays a button to submit the form
The value attribute sets a default value for the field, which is displayed when the website loads
The placeholder attribute shows a hint or example inside the input box, which disappears when the user starts typing
The disabled attribute prevents users from interacting with the input field

The required attribute makes a field mandatory, preventing submission unless the field is filled out
The minlength and maxlength attributes set limits on the number of characters that can be entered in a text field

The details element provides expandable sections with additional information
The summary element is used along with details to specify a visible heading for the details