Forms are how you collect information from your visitors — login details, search queries, sign-ups, surveys, you name it. Without forms, the web would be a read-only place. With them, your users can talk back to you.
The Form Tag
Everything starts with a <form> tag. It wraps all your input fields and tells the browser where to send the data and how.
<form action="/submit-form" method="POST">
<input type="text" name="username">
<button type="submit">Send</button>
</form>
The Action Attribute
action tells the browser which URL to send the form data to. It could be a page on your own server, or an API endpoint. If you leave it out, the form submits to the same page it is on.
GET vs POST
Here is the big one. method="GET" appends the form data to the URL as query parameters — you can see it in the address bar. Use GET for search forms and things that are safe to bookmark. method="POST" sends the data in the request body, which keeps it out of the URL. Use POST for logins, sign-ups, and anything that changes data on the server.
How Submitting Works
When a user clicks a submit button, the browser gathers all the form fields that have a name attribute, packages them up as key-value pairs, and sends them off to the action URL. If a field does not have a name, its data does not get sent. That is a common gotcha for beginners.
<form action="/search" method="GET">
<input type="text" name="q" placeholder="Search...">
<button type="submit">Search</button>
</form>