Skip to content

More Input Types

Beyond text, email, and password, HTML forms have a few more useful input types. Each one gives the user a different way to provide information.

<textarea>

For longer text — a message, a description, a comment. Unlike <input>, it has an opening and closing tag, and the user can resize it by dragging the corner.

<label for="message">Your message</label>
<textarea id="message" name="message" rows="5" placeholder="Write something..."></textarea>
  • rows — how tall it starts (the user can resize it further)

<select> and <option>

A dropdown menu. The user picks one option from a list.

<label for="level">Your experience level</label>
<select id="level" name="level">
  <option value="beginner">Just starting out</option>
  <option value="some">Know a bit</option>
  <option value="experienced">Built things before</option>
</select>
  • <select> is the dropdown container
  • <option> is each item in the list
  • value is what gets sent to Python — the text between the tags is just what the user sees on screen

Checkboxes — type="checkbox"

For yes/no choices, or letting the user select multiple items.

<input type="checkbox" id="terms" name="terms" value="agreed">
<label for="terms">I agree to the terms and conditions</label>

The label comes after the checkbox — that is the common pattern. Clicking the label text ticks or unticks the box.

Radio buttons — type="radio"

For choosing exactly one option from a group. All radio buttons in the same group share the same name.

<input type="radio" id="yes" name="contact" value="yes">
<label for="yes">Yes, contact me</label>

<input type="radio" id="no" name="contact" value="no">
<label for="no">No thanks</label>

Because they share name="contact", selecting one automatically deselects the other. That is what makes them a group.

Challenge

Build a short survey form with all of these:

  • A text input for the person's name
  • A <select> dropdown: "How did you find this site?" with options: Google, Friend, Social Media, Other
  • A <textarea> for any comments
  • A checkbox: "I am happy to be contacted"
  • A submit button

Open it in your browser and fill it all in. Does every input work as expected?

← Text Inputs and Labels    Next: A Complete Form →