Form Input Types - Part 3

Form Input Types: Part 3

The last batch: choices, hidden helpers, and picture buttons.

checkbox

A little box you check or uncheck. Multiple checkboxes = pick as many as you want.

<input type="checkbox" id="news" name="news">
<label for="news">Send me news</label>

Use checked to start it ticked.

radio

Round buttons where you can pick only ONE from a group. All radios in a group share the same name.

<input type="radio" id="small" name="size" value="small" checked>
<label for="small">Small</label>
<input type="radio" id="large" name="size" value="large">
<label for="large">Large</label>

hidden

Invisible, but its value still gets sent with the form. Great for secret extra info.

<input type="hidden" name="user_id" value="42">

image

A picture that acts as a submit button! You provide src and alt.

<input type="image" src="submit.png" alt="Submit">

submit, reset, button

• submit: a plain button that sends the form (text via value).
• reset: clears the whole form.
• button: does nothing alone (used with JavaScript).

<input type="submit" value="Send now">
<input type="reset" value="Clear">
<input type="button" value="Do something">

TL;DR

• checkbox = pick any number; radio = pick one (same name).
• checked starts a box/radio selected.
• hidden sends a value invisibly.
• image = a picture submit button.
• submit/reset/button = action buttons.