Forms allow users to send data to a server — logins, registrations, search boxes, contact forms. Every interactive website uses them.
<form action="/submit" method="post">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="e.g. jsmith" />
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="you@example.com" />
<button type="submit">Sign Up</button>
</form>
<form> element| Attribute | Description |
|---|---|
action | URL the form data is sent to (defaults to the current page) |
method | HTTP method: get (data in URL) or post (data in body) |
Use method="post" for any data that modifies the server (logins, registrations, etc.).
Always pair every <input> with a <label>:
<!-- Linked via for/id -->
<label for="password">Password</label>
<input type="password" id="password" name="password" />
<!-- Or wrap the input inside the label -->
<label>
Password
<input type="password" name="password" />
</label>
Linked labels make inputs clickable and are essential for screen reader accessibility.
<input type="text" name="name" placeholder="Full name" />
<input type="email" name="email" placeholder="you@example.com" />
<input type="password" name="password" placeholder="Min 8 characters" />
<input type="number" name="age" min="0" max="120" />
<input type="submit" value="Send" />
| Attribute | Effect |
|---|---|
required | Field must be filled before submission |
placeholder | Grey hint text inside the field |
value | Default value for the field |
disabled | Field is visible but not editable |
readonly | Field is editable but not sent |
autocomplete | Controls browser autofill (on / off) |
minlength / maxlength | Character limits |
Build a contact form with:
<form> with method="post".type="text", required).type="email", required).type="password").<label>.Every input should have a <label> with a for attribute matching the input's id.