22 min read
Forms and Text Inputs
The form element, labels, the name attribute, and text, email, phone, number, date and textarea fields.
What a Form Does
A form collects information from visitors — an order, a booking, a message — and sends it somewhere when they press a submit button. Mrs Rizvi wants an Order page where customers enter their details and choices.
The smallest useful formHTML
<form action="order-received.html" method="get"> <label for="name">Full name</label> <input type="text" id="name" name="name"> <button type="submit">Send</button></form>What the browser shows
| Key parts | |
|---|---|
Try typing a name in the preview and pressing Send. The example site's result page shows exactly what the form sent: name = whatever you typed. (A real site would send the order to a server program, which you would learn in a later course.)
Types of Text Input
Different kinds of inputHTML
<form action="order-received.html" method="get"> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="you@example.com" required> <label for="phone">Phone</label> <input type="tel" id="phone" name="phone" placeholder="07X XXX XXXX"> <label for="people">Number of people</label> <input type="number" id="people" name="people" min="1" max="20" value="2"> <label for="date">Date</label> <input type="date" id="date" name="date"> <label for="notes">Notes</label> <textarea id="notes" name="notes" rows="4" cols="40" placeholder="Allergies, special requests…"></textarea> <p><button type="submit">Send</button></p></form>What the browser shows
| Input types | ||
|---|---|---|
Helpful Attributes
- placeholder — grey example text inside the box (not a replacement for a label).
- required — the browser will not submit the form until the field is filled.
- value — a starting value.
- min, max, maxlength — limits on what can be entered.
Practice
More lessons in HTML · Next: Checkboxes, Radio Buttons and Dropdowns · Previous: Merging Cells: colspan and rowspan