The <input> element is a versatile, void form control whose behavior — text field, checkbox, date picker, and more — is entirely determined by its type attribute.

Syntax

<input type="text" name="username" placeholder="Enter username">

Deep Dive Course

**`<input>`** is a single self-closing (void) element that can render dozens of different controls depending on its **`type`** attribute: `text`, `email`, `password`, `checkbox`, `radio`, `date`, `range`, `file`, and more. Its behavior is further refined by attributes like `placeholder` (hint text), `required` (must be filled before submit), `disabled` (not editable/submittable), and `value` (its current or default content).

1Understanding <input>

`<input>` is a single self-closing (void) element that can render dozens of different controls depending on its `type` attribute: text, email, password, checkbox, radio, date, range, file, and more. Its behavior is further refined by attributes like placeholder (hint text), required (must be filled before submit), disabled (not editable/submittable), and value (its current or default content).

💡

Always give an <input> a matching <label> (via the for/id attributes, or by wrapping it) — a placeholder alone disappears once the user starts typing and isn't a reliable substitute for a real label, especially for screen readers.

editor.html

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

localhost:3000

2Practical Example

Here is a real-world application of <input> showing how it is used in production HTML.

editor.html

<!-- Different input types trigger different mobile keyboards and native validation -->
<input type="tel" name="phone" placeholder="555-1234">
<input type="number" name="quantity" min="1" max="10">

localhost:3000

3Best Practices

Follow these guidelines when working with <input>:

1. Choose the most specific type (email, tel, number, date) instead of always using type="text" — it improves mobile keyboards and built-in validation

2. Pair every input with a proper <label>, not just a placeholder

3. Use the name attribute consistently — it's the key under which the value gets submitted

⚠️

Tip: Always give an <input> a matching <label> (via the for/id attributes, or by wrapping it) — a placeholder alone disappears once the user starts typing and isn't a reliable substitute for a real label, especially for screen readers.

editor.html

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

localhost:3000

Examples

Example 01Basic Usage

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

Example 02Advanced Example

<!-- Different input types trigger different mobile keyboards and native validation -->
<input type="tel" name="phone" placeholder="555-1234">
<input type="number" name="quantity" min="1" max="10">

Best Practices

Choose the most specific type (email, tel, number, date) instead of always using type="text" — it improves mobile keyboards and built-in validation
Pair every input with a proper , not just a placeholder
Use the name attribute consistently — it's the key under which the value gets submitted

Interview Question

Why does choosing type="email" or type="number" matter beyond just visual appearance?▼

Hint: Think about mobile keyboards and built-in browser validation.

On mobile devices, the input type changes which on-screen keyboard appears — type="email" shows an @ key, type="number" shows a numeric keypad, type="tel" shows a phone dial pad — making data entry faster and less error-prone. Additionally, browsers apply built-in validation for these types (rejecting an obviously malformed email, or a number outside a min/max range) before the form is even submitted, without needing custom JavaScript.

Exercises

EasyPractice using <input> in a real scenario.

View Solution

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

Frequently Asked Questions

Why does choosing type="email" or type="number" matter beyond just visual appearance?▼

Related Functions

form-taglabel-tagINPUT TypesINPUT Attributes