The <input> element is the most versatile form control. The type attribute determines its behavior.

Text Input

The default input type for single-line text:

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

Placeholder

Shows hint text when empty:

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

Default Value

Pre-fill with a value:

<input type="text" name="username" value="john">

Email Input

Validates email format before submission:

<input type="email" name="email" placeholder="you@example.com">

On mobile devices, it shows an email-optimized keyboard.

Password Input

Hides input with dots or asterisks:

<input type="password" name="password" placeholder="Enter password">

Number Input

Accepts only numeric values:

<input type="number" name="age" placeholder="Your age">

Min and Max

Limit the range:

<input type="number" name="age" min="18" max="120">

Step

Set increment values:

<input type="number" name="quantity" min="0" max="100" step="5">

URL Input

Validates URL format:

<input type="url" name="website" placeholder="https://example.com">

Telephone Input

For phone numbers:

<input type="tel" name="phone" placeholder="555-1234">

Shows a numeric keyboard on mobile. Use pattern for validation since phone formats vary.

Search Input

Styled for search queries:

<input type="search" name="q" placeholder="Search...">

May show a clear button in some browsers.

Hidden Input

Invisible to users but submitted with the form:

<input type="hidden" name="user_id" value="12345">

Useful for:

• CSRF tokens
• User identification
• Form tracking

Common Attributes

Apply to most input types:

Attribute	Description
name	Field identifier for submission
value	Default or current value
placeholder	Hint text when empty
required	Must be filled
disabled	Cannot be edited or submitted
readonly	Cannot be edited but is submitted
maxlength	Maximum characters allowed
autofocus	Focus on page load
autocomplete	Enable/disable browser autofill

<input
  type="text"
  name="username"
  placeholder="Username"
  required
  maxlength="20"
  autocomplete="username"
>

Lessons in this unit:

0:	Introduction
1:	How to Create HTML Forms
2:	▶︎ How to Use HTML Text Input Types
3:	How to Validate HTML Forms
4:	How to Use Selection Controls in HTML Forms
5:	How to Use Advanced HTML Input Types