A <form> collects user input and submits it to a server. The key attributes are action (where to send) and method (how to send).
html
Email
Password
Sign up
A <form> collects user input and submits it to a server. The key attributes are action (where to send) and method (how to send).
Email
Password
Sign up
When the user clicks the submit button (or presses Enter), the browser gathers all controls that have a name, encodes them, and sends a request to action.
<form method="get" action="/search"> <!-- data in the URL: /search?q=html -->
<form method="post" action="/login"> <!-- data in the request body -->
name attribute is essential<input value="hi" /> <!-- ❌ no name → NOT submitted -->
<input name="message" value="hi" /> <!-- ✅ submitted as message=hi -->
Only named controls are sent. The server reads them by their name.
form.addEventListener("submit", (e) => {
e.preventDefault(); // stop the full-page reload to handle it with fetch/AJAX
const data = new FormData(form); // easy way to read all fields
});
Forms are the core way users send data to servers.
Understanding action/method, the role of name, GET-vs-POST semantics, and preventDefault for JS handling is fundamental to every web app with input.