HTML Input Types

Beginner ~10 min read

Common Input Types

The <input> element is the most important form element. It can be displayed in several ways, depending on the type attribute.

Text and Password

HTML

CSS

<form>\n  Username: <input type="text" name="user"><br><br>\n  Password: <input type="password" name="pass">\n</form>

Radio Buttons

Radio buttons let a user select ONE of a limited number of choices.

HTML

CSS

<form>\n  <input type="radio" id="html" name="fav_language" value="HTML">\n  <label for="html">HTML</label><br>\n  <input type="radio" id="css" name="fav_language" value="CSS">\n  <label for="css">CSS</label><br>\n  <input type="radio" id="js" name="fav_language" value="JavaScript">\n  <label for="js">JavaScript</label>\n</form>

Checkboxes

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

HTML

CSS

<form>\n  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">\n  <label for="vehicle1"> I have a bike</label><br>\n  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">\n  <label for="vehicle2"> I have a car</label>\n</form>

Quick Quiz

Which input type is best for selecting multiple options?

radio

text

checkbox

select

Previous Forms

Next Form Attributes

Common Input Types

Text and Password

Radio Buttons

Checkboxes

Quick Quiz

Enjoying these tutorials?