Input fields
🏠The everyday picture
On a paper form, the box for a date has little slots for day, month and year, and the box for a signature is wide. The shape of the box tells you what goes in it.
📘What it really is
<input>is the basic field. Itstypechanges what it accepts and, on phones, which keyboard appears:text: any short text;email: shows an@keyboard and checks the email shape;tel: shows the number pad;number: numbers only, with optionalminandmax;date: a date picker;password: hides what's typed;checkbox: tick boxes, any number can be ticked;-
radio: round buttons, only one in a group can be chosen (give them the samename). -
<textarea>is for longer text, like a message. <select>with<option>s makes a drop-down list.- Every field needs a
name. It's the label the data travels with:name="email". placeholdershows a faint example inside the field, but it disappears when typing starts, so it never replaces a label.
🖱️Try it
Inside your form, add a text field for name, an email field, a tel field, a <select> for "Reason for
contacting" with three options, and a <textarea> for the message. Open the page on your phone (or use
developer tools' device mode) and tap the email and phone fields to see the different keyboards.
✅Quick check
Why use type="tel" instead of type="text" for a phone number?
Show the answer
Phones show the number pad, which makes typing easier and reduces mistakes.
Choosing one class time out of four: checkboxes or radio buttons?
Show the answer
Radio buttons, because only one can be chosen.