← Common Input Types

HTML Input Types

Understanding the type attribute configurations for user inputs.

The <input> element is extremely versatile because of its type attribute, which determines the input behavior, interface, and built-in validations.

Input Type Variations

  • text: Single-line text input.
  • password: Obscured characters.
  • email: Enforces email structure validation.
  • number: Numeric fields with selectors.
  • date / time: Native date/time picker controls.
  • file: File upload dialog.
  • radio: Single choice selection from a named group.
  • checkbox: Independent toggle switches.
  • color: Native color wheel picker.
  • range: Sliders.
  • url / tel: Optimized phone and address URL inputs.
  • submit / reset: Form triggers.

Example

html
<input type="email">

<input type="password">

<input type="checkbox">

<input type="date">

Interview questions

Sign in to save

What happens on a mobile device when you use type='email' or type='tel'?

Mobile browsers display an optimized keyboard layout: type='email' shows the '@' and '.' keys directly, and type='tel' launches the numeric dialing keypad, significantly improving the mobile user experience.

Practice

Design a grouped pair of radio buttons for selecting Gender (Male or Female).

Hint: Ensure both <input type='radio'> tags share the exact same 'name' attribute (e.g. name='gender') so they function as a group.