HTML Tutorial
HTML Forms
form collects input: a clinic booking, a mass from the bench. action and method decide where the fields go when the user submits.
A form is a package of fields
A <form> groups controls — text boxes, choices, buttons — and defines what happens when the user submits. The browser gathers every successful control that has a name, then sends that data to a URL. HTML describes the package. A server (or a script) is what actually stores it.
This chapter is the envelope: action, method, name, and a submit button. The next chapters cover the controls inside the envelope.
action is the destination
The action attribute is a URL. That is where the browser navigates (or sends the request) on submit. It can be a path on your site, a full https:// address, or — for safe demos —#, which stays on the same page.
Example
<form action="#" method="get">
<label for="guest">Name</label>
<input id="guest" name="guest" type="text" required>
<label for="when">Visit date</label>
<input id="when" name="when" type="date">
<button type="submit">Book the clinic</button>
</form>StudyGrid examples use action="#" so the live preview at /html/try does not POST to a real server. On a production site you would point action at an endpoint your backend actually handles, for example /signup.
If you omit action, the form submits to the current page URL. That can be correct for a page that processes itself. It is still clearer to write the URL you mean.
GET versus POST
method chooses how the package is sent. You need the idea, not a networking textbook.
| GET | POST | |
|---|---|---|
| Where the data goes | Appended to the URL as a query string | In the request body, not in the address bar |
| Visible to the user | Yes — page.html?guest=Ada | No, not in the URL |
| Good for | Search boxes, filters, anything you might bookmark | Sign-up, login, comments, anything that changes data |
| Not for | Passwords, long essays, file uploads | A public search you want to share as a link |
GET is like writing the answers on the envelope. Anyone who sees the URL sees the fields. POST is like putting the answers inside. Browsers may also warn before reloading a POST, because submitting twice could send the same order twice.
Example
<!-- Search: results should be a link you can share -->
<form action="#" method="get">
<label for="q">Search the menu</label>
<input id="q" name="q" type="text">
<button type="submit">Search</button>
</form>
<!-- Sign-up: do not put the email in the URL -->
<form action="#" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email">
<button type="submit">Subscribe</button>
</form>The preview still uses action="#". In the GET example you will see the names and values appear after # in the iframe’s navigation. That is enough to prove GET puts data in the URL.
name is what gets submitted
Each control that should be part of the package needs a name. The browser sendsname=value pairs. Without name, the field can still look like an input on screen, but it is left out of the submission.
Example
<form action="#" method="get">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="notes">Notes</label>
<input id="notes" type="text">
<button type="submit">Send</button>
</form>name is for the server. id is for the page — labels, CSS, JavaScript. They are often spelled the same, but they are not interchangeable. The notes field above has an idand a label, yet it will not appear in the submitted data.
A submit button finishes the job
A button with type="submit" (or a button with no type, inside a form) sends the form. Pressing Enter in a text field usually does the same when the form has a submit button.
- Put the button inside the
<form>. A button outside it cannot submit that form. - The button’s label is the inner text:
<button type="submit">Send</button>. - You can also use
<input type="submit" value="Send">.<button>is easier to style.
A full, preview-safe form looks like this:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Join the list</title>
<style>
label { display: block; margin: 0.75rem 0 0.25rem; }
input, button { font: inherit; padding: 0.45rem 0.6rem; }
</style>
</head>
<body>
<h1>Join the list</h1>
<form action="#" method="get">
<label for="name">Name</label>
<input id="name" name="name" type="text">
<label for="email">Email</label>
<input id="email" name="email" type="email">
<p><button type="submit">Send</button></p>
</form>
</body>
</html>What happens on submit
- The browser finds the form that owns the button.
- It runs built-in checks (required fields, email format) unless you turned them off.
- It builds a list of named controls and their values.
- GET appends that list to
action. POST sends it in the body toaction.
Until you have a server, treat submit as “pack the data and go to this URL.” The later input chapters teach how to constrain what goes in the package. Form attributes teach autocomplete, new tabs, and file encoding.
What to remember
<form>is the envelope. Controls inside it are the contents.actionis the URL. Tutorial demos useaction="#"so the preview stays put.- GET puts fields in the URL. POST puts them in the request body. Use POST for anything private or that changes data.
- Only controls with a
nameare submitted. A submit button sends the package.
Next: form attributes — autocomplete, novalidate, target, and enctype.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Biology
Book a clinic slot
form groups controls. action is the URL that receives the data. method="get" puts fields in the query string; post sends them in the body.
Without a backend this demo posts nowhere useful. The lesson is the markup: label, name, submit. name is the key the server will read.
Example
<form action="#" method="get">
<label>Name <input name="name" required></label>
<label>Date <input type="date" name="when"></label>
<button type="submit">Book</button>
</form>Engineering
Log a mass from the bench
A logger form is still a form. type="number" brings a numeric keypad on phones. min and max are hints, not a physics law.
n = m / M
Example
<form action="#">
<label>Mass / g <input type="number" name="grams" min="0" step="0.001" value="18"></label>
<button>Record</button>
</form>