HTML Input Types

Understanding HTML Input Types

The type attribute of the HTML <input> element determines what kind of form control the browser creates.

HTML includes input types for text, passwords, email addresses, telephone numbers, numeric values, dates, colors, files, choices, buttons, and other kinds of user input. Choosing the appropriate type can improve usability, validation, and the keyboard or interface shown on different devices.

Text Inputs

The text input type creates a single-line text field and is one of the most commonly used form controls.

<label for="name">Name:</label>
<input type="text" id="name" name="user_name">

If the type attribute is omitted or contains an unsupported value, the input normally behaves like type="text".

Password Inputs

The password input type creates a field that obscures the characters entered by the user.

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

Hiding the characters only affects how the value is displayed on the screen. Passwords still require secure transmission and proper server-side handling.

Email, Telephone and URL Inputs

The email, tel, and url input types are designed for common contact and web-related information.

<input type="email" name="user_email">
<input type="tel" name="user_phone">
<input type="url" name="user_website">

The email and url types provide built-in format checking when validation is performed. The tel type does not enforce one universal telephone format because phone-number formats vary by location.

Number and Range Inputs

The number input type is used for numeric values, while range creates a slider for choosing a value within a range.

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">

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

Attributes such as min, max, and step can define the values accepted by these controls.

Date and Time Inputs

HTML provides several input types for dates and times. Browsers may display specialized interfaces such as calendars or time selectors for these controls.

<input type="date" name="event_date">
<input type="time" name="event_time">
<input type="datetime-local" name="appointment">
<input type="month" name="billing_month">
<input type="week" name="schedule_week">

The exact interface can vary between browsers, devices, and operating systems.

Radio Buttons and Checkboxes

Radio buttons and checkboxes are used when users need to choose from predefined options.

Radio buttons that belong to the same group share the same name value so only one option from that group can be selected.

<input type="radio" id="age-18-34" name="user_age" value="18-34">
<label for="age-18-34">18-34</label>

<input type="radio" id="age-35-54" name="user_age" value="35-54">
<label for="age-35-54">35-54</label>

Checkboxes allow independent selections, so users can usually choose more than one option.

<input type="checkbox" id="html" name="user_hobby[]" value="HTML">
<label for="html">Learning HTML</label>

<input type="checkbox" id="design" name="user_hobby[]" value="Design">
<label for="design">Web Design</label>

Color and File Inputs

The color input type lets users select a color, while the file input type allows one or more files to be selected for upload.

<label for="favorite-color">Favorite Color:</label>
<input type="color" id="favorite-color" name="favorite_color">

<label for="document">Choose a File:</label>
<input type="file" id="document" name="user_file">

File uploads require additional form configuration and server-side handling. They are covered separately in the File Uploads tutorial.

Hidden Inputs

The hidden input type stores a value that is submitted with the form but is not displayed as an interactive field to the user.

<input type="hidden" name="form_source" value="contact-page">

Hidden values should not be treated as secret or trusted information because users can inspect or modify the HTML and submitted request.

Button Input Types

The submit, reset, and button input types create button controls.

<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Button">

The HTML <button> element is often preferred because it can contain text and other HTML content. Form buttons are covered in the next tutorial.

Input Types Example

The following example includes several input types in one form. Experiment with the controls and change their type values to see how the browser changes their behavior and appearance.

Input Type Best Practices

• Choose the input type that most closely matches the information being collected.
• Use labels for controls that require a visible description.
• Give related radio buttons the same name value and unique id values.
• Give each checkbox a unique id and an appropriate submitted value.
• Use min, max, step, and other relevant attributes when they improve the control.
• Do not rely on input type alone for server-side validation or security.

Summary

The <input> element supports many different control types through its type attribute. Text, email, telephone, number, range, date, radio, checkbox, color, file, hidden, and button controls each serve different purposes and can provide browsers with useful information about the value being collected.

Choosing the correct input type makes forms easier for users to complete and provides a stronger foundation for validation and form processing.