1.4 Forms and Inputs
A form is where a user "talks back" to a website. Login, sign-up, search, comments, checkout — anywhere you type something into a page, a form is behind it. This section covers how to build them in HTML.
The "form builder" below lets you toggle which fields you need and see the code plus a real, interactive form in real time.
Loading interactive lab...
The shell: <form>
All input controls go inside a <form>:
html
<form>
<!-- input fields go here -->
<button type="submit">Submit</button>
</form>The star: <input> and its type
<input> is the most-used control. The magic: one tag transforms into a dozen shapes via the type attribute.
html
<input type="text"> <!-- plain text box -->
<input type="password"> <!-- password, shown as dots -->
<input type="email"> <!-- email; phones show an @ keyboard -->
<input type="number"> <!-- digits only -->
<input type="checkbox"> <!-- checkbox, multi-select -->
<input type="radio"> <!-- radio button -->Loading concept check...
Checkbox vs radio button
A classic beginner trap:
- Checkbox: each is independent; you can check several at once ("fruits you like").
- Radio button: give several radios the same
nameand they become mutually exclusive — pick one ("your plan").
html
<!-- multi-select -->
<label><input type="checkbox"> Apple</label>
<label><input type="checkbox"> Banana</label>
<!-- pick one: note the matching name -->
<label><input type="radio" name="plan"> Free</label>
<label><input type="radio" name="plan"> Pro</label>Loading concept check...
label, placeholder, and other controls
<label>: a descriptive text for an input. Wrap the text and input together in<label>so clicking the text focuses the input — friendlier for mobile and accessibility.
placeholder: gray hint text inside an input that disappears once you type.
<textarea>: a multi-line text box (comments, messages).
<select>+<option>: a dropdown menu.
<button type="submit">: the submit button.
html
<label>Username
<input type="text" placeholder="Pick a name">
</label>
<select>
<option>Cat</option>
<option>Dog</option>
</select>
<textarea rows="3" placeholder="Say something…"></textarea>Note
Don't forget
name. When a real form submits, each input's name is the key under which its data is sent to the server. This section sometimes omits it for brevity, but in practice nearly every control needs a name.Loading practice...