Forms: Submit and action
A form can have action="url" (where to send data) and method="GET" or "POST". On submit, the browser sends the input names and values. Use JavaScript or a server to handle the submission.
Appy Says…
A form with no submit button is like a vending machine with no buttons — you can see the options but can't do anything. Submit buttons and form submission are how user data actually moves from the browser to your code.
How do HTML Forms Submit?
A form submits when the user clicks a submit button or presses Enter inside an input. The browser collects all named inputs and sends them to the URL in the action attribute.
- •
<button type='submit'>Send</button>— submits the parent form - •
form action='/contact' method='POST'— where and how data is sent - •GET: data goes in the URL query string (
?name=Appy) — visible, shareable - •POST: data goes in the request body — hidden, better for passwords
- •
event.preventDefault()in JS stops the browser's default page reload - •FormData API:
new FormData(formElement)collects all field values as key-value pairs
Think of it like pressing Confirm on a Roblox trade
In a trade window you fill in items, then press Confirm to send the request. Without Confirm nothing happens — that's the submit button. It packages everything up and sends it off.
How It Works
- •1. User fills form fields — all must have
nameattributes to be included - •2. Clicks submit or presses Enter in a single-input form
- •3. Browser validates required fields; shows built-in error tooltips if validation fails
- •4. JS:
form.addEventListener('submit', handler)intercepts before sending - •5.
event.preventDefault()stops the default page reload - •6. Collect:
const data = Object.fromEntries(new FormData(e.target)) - •7. Send via fetch to your API, or let browser POST to server directly
Real-World Examples
- •Login forms: POST credentials — never GET (passwords would appear in the URL)
- •Google Search bar: GET request — query string visible in URL (shareable and bookmarkable)
- •Contact forms: preventDefault → fetch to API → show success message without page reload
- •WhatsApp web: Enter key in message box submits the form
Key Facts
- •GET form data appears in the URL — never use GET for passwords or sensitive info
- •Without
nameattributes, input values are NOT included in form submission - •HTML5 validation:
required,minlength,pattern,type='email'validate before submission - •Single-page apps (React/Vue) almost always preventDefault and handle submission in JavaScript
Watch Out!
A bare <button> inside a form with no type attribute defaults to type='submit'. This can cause accidental form submissions. Always specify type='button' for buttons that should not submit, and type='submit' for ones that should.
Remember
Submit collects all named fields and sends to action URL. POST for sensitive data. Use event.preventDefault() + FormData in JS apps to handle submission without a page reload.
What You Learned
- •Submit buttons trigger form data collection; all inputs need
nameattributes to be included - •GET → data in URL; POST → in request body; preventDefault → handle in JS without reload
- •Unlocks: functional forms, login/signup flows, contact pages, any user data collection
Key Facts
- →GET form data appears in the URL — never use GET for passwords or sensitive info
- →Without
nameattributes, input values are NOT included in form submission - →HTML5 validation:
required,minlength,pattern,type='email'validate before submission - →Single-page apps (React/Vue) almost always preventDefault and handle submission in JavaScript
Real-World Examples
Remember
Submit collects all named fields and sends to action URL. POST for sensitive data. Use event.preventDefault() + FormData in JS apps to handle submission without a page reload.
Quick Quiz
method POST sends data?