HTML Forms
HTML forms collect input from a user and submit it somewhere — to a server, an API, or a JavaScript handler on the page. Every form is a <form> element wrapping inputs and a submit button.
Form anatomy
| Element | Role |
|---|---|
<form> | Wraps all controls. Carries action and method. |
<label> | Caption for an input — clickable, improves accessibility. |
<input> | Single-line input — many types: text, email, number, date… |
<textarea> | Multi-line input. |
<select> / <option> | Dropdown menu. |
<button type="submit"> | Submits the form. |
A minimal form
<form action="/signup" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Sign up</button>
</form>
Tip: Always pair an
<input> with a <label> — connect them with for and id. Clicking the label focuses the input, and screen readers announce the field name correctly.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<h1>HTML Forms</h1>
<p>This is a demo page for the "HTML Forms" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Add the attribute that controls where the form data is sent.
<form
="/signup" method="post">…</form>
Six letters. Takes a URL.
Discussion
Loading…