Demon Tech Roadmap

HTML

HTML Input Types

HTML input types change how the input field behaves.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

The HTML `` element transforms based on its `type` attribute. A `password` type hides text, while an `email` type validates the format. Developers use these types to ensure correct data entry.

Syntax

1<!-- input types -->
2<input type="password" name="pass">
3<input type="date" name="day">

Example

1<!-- this uses input types -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Input Types</title>
8  </head>
9  <body>
10    <form>
11      <input type="email" name="email" required>
12      <input type="checkbox" name="agree">
13    </form>
14  </body>
15</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

The `type` attribute changes input behavior.
The `email` type requires a valid address.
The `password` type masks typed characters.
The `radio` type limits to one selection.

Up Next

Continue your journey with the next topic.

Go to HTML Input Attributes ❯