Text Inputs
Overview
The <input> tag is a 'void element' (it has no closing tag) and is the chameleon of HTML. By changing its type attribute, it fundamentally transforms its behavior and appearance. Text-based inputs allow users to type raw string data. Modern HTML5 introduced highly specialized text input types (email, url, password) that not only validate the data natively, but also force mobile devices to pop up specifically optimized virtual keyboards (like showing an '@' symbol for email fields).
Syntax
<!-- Standard single-line text -->
<input type="text" name="first_name" placeholder="John">
<!-- Masks characters with asterisks for security -->
<input type="password" name="secret" placeholder="********">
<!-- Forces mobile phones to show the @ symbol keyboard -->
<input type="email" name="user_email" placeholder="john@example.com">
<!-- Forces mobile phones to show the .com keyboard -->
<input type="url" name="website" placeholder="https://...">
<!-- Multi-line text (Note: This is NOT an input tag!) -->
<textarea name="bio" rows="4" placeholder="Tell us about yourself..."></textarea>Common Pitfalls
- Using
<input type="text">for emails. While it technically works, you lose the browser's built-in email validation (checking for an '@' symbol) and you severely frustrate mobile users who have to hunt for the '@' key on their standard keyboard. - Providing a
valueinstead of aplaceholder.value="John"literally injects the text 'John' into the field, forcing the user to manually highlight and delete it.placeholder="John"creates a ghost hint that disappears instantly when they type.
Interview Questions
<textarea> fundamentally different from an <input type="text"> tag?<textarea> is not a void element. It has an opening and closing tag (<textarea></textarea>). Furthermore, because it supports multiple lines, it preserves raw whitespace and line breaks exactly as typed.
Real-World Example
Utilizing modern attributes to maximize user convenience and conversion rates.
<!--
autocomplete="email" allows password managers (like 1Password)
and the browser to instantly fill the field for the user in 1 click!
-->
<input
type="email"
name="login_email"
placeholder="you@company.com"
autocomplete="email"
spellcheck="false"
>Check Your Knowledge
Test your understanding of Text Inputs with these quick questions.