BeingXpert Learn & Build Future

13. HTML Input Types

What you will learn

  • How the type attribute changes an input
  • The most useful input types
  • Useful attributes: placeholder, value, min, max, required

The type attribute

The <input> element can look and behave in many ways. The type attribute chooses which. If you leave it out, the browser uses type="text".

Syntax

<input type="text" name="fieldname">

Common input types

Type Purpose
text A single line of text
password Text hidden as dots
email An email address, checked by the browser
number A number, with up and down arrows
tel A telephone number
url A web address
search A search box
date A date picker
color A colour picker
range A slider
file A file chooser
checkbox Tick any number of options
radio Choose only one option from a group
hidden A value sent with the form but not shown

Text, password, and email

Example

<label for="user">Username</label>
<input type="text" id="user" name="user">

<label for="pass">Password</label>
<input type="password" id="pass" name="pass">

<label for="mail">Email</label>
<input type="email" id="mail" name="mail">

Output (display only, nothing is sent)




Number, date, colour, and range

Example

<label for="qty">Quantity (1 to 10)</label>
<input type="number" id="qty" name="qty" min="1" max="10" value="1">

<label for="day">Date</label>
<input type="date" id="day" name="day">

<label for="fav">Favourite colour</label>
<input type="color" id="fav" name="fav" value="#0d6efd">

<label for="vol">Volume</label>
<input type="range" id="vol" name="vol" min="0" max="100">

Output





Checkboxes and radio buttons

Radio buttons that share the same name form a group, and only one can be chosen. Checkboxes allow several choices.

Example

<fieldset>
  <legend>Choose a course</legend>
  <input type="radio" id="r-html" name="course" value="html">
  <label for="r-html">HTML</label>
  <input type="radio" id="r-css" name="course" value="css">
  <label for="r-css">CSS</label>
</fieldset>

<input type="checkbox" id="news" name="news" value="yes">
<label for="news">Send me the newsletter</label>

Output

Choose a course



Helpful attributes

  • placeholder: a hint shown inside an empty field. It is not a replacement for a label.
  • value: the starting value.
  • required: the field must be filled in before the form is sent.
  • min, max, step: limits for numbers, dates, and sliders.
  • maxlength: the most characters allowed.
  • disabled: the field cannot be used, and its value is not sent.
  • autocomplete: helps browsers fill in known details, for example autocomplete="email".

Browsers show different pickers for date, colour, and other types, and very old browsers fall back to a plain text box. Browser checks are a convenience only. A real site must validate data again on the server.

Common mistakes

  • Using type="text" for everything. The right type gives phone users the right keyboard.
  • Giving radio buttons different name values, so several can be selected.
  • Forgetting name, so the value is never sent.
  • Using type="password" and thinking it encrypts anything. It only hides the characters on screen. Use HTTPS to protect data in transit.

Exercise

Write a labelled number field named age that accepts values from 5 to 99 and is required.

Show solution 
<label for="age">Age</label>
<input type="number" id="age" name="age" min="5" max="99" required>

Knowledge check

1. Which input type hides what is typed?

password

2. How do you make radio buttons work as one group?

Give them the same name.

3. Which attribute makes a field mandatory?

required

Summary

  • The type attribute changes what an input does.
  • Choose the most specific type for the data you want.
  • Always add a name, a label, and server-side checks.
Scroll to Top