HTML — Lesson 5
Forms & Inputs
Building interactive forms for user input.
Forms & Inputs
Forms are how users interact with web pages - signing up, searching, submitting data, and more.
The <form> Element
The <form> tag wraps all input elements. It has two key attributes: action (where to send data) and method (how to send it).
<form action="/submit" method="post">
<!-- form elements go here -->
</form>
Common Input Types
<!-- Text input -->
<input type="text" name="username" placeholder="Enter your name">
<!-- Email input -->
<input type="email" name="email" placeholder="email@example.com">
<!-- Password input -->
<input type="password" name="password">
<!-- Number input -->
<input type="number" name="age" min="1" max="120">
<!-- Checkbox -->
<input type="checkbox" name="agree" id="agree">
<label for="agree">I agree to the terms</label>
Textarea & Select
<!-- Textarea (multi-line text) -->
<textarea name="message" rows="4" cols="30"></textarea>
<!-- Select dropdown -->
<select name="country">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
Buttons
<!-- Submit button -->
<button type="submit">Send</button>
<!-- Reset button -->
<button type="reset">Clear</button>
Labels & Accessibility
Always use <label> elements with your inputs. Labels improve accessibility and usability - clicking a label focuses the associated input.
Tip: The
for attribute on a label should match the id of the input it belongs to. This connects them properly.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →