Text Input Fields

Text input fields are the most common form elements. They allow users to enter single-line text data. HTML provides several specialized input types that enhance user experience and provide built-in validation.

Basic Text Input

The type="text" input is the default and most versatile text input field. It accepts any text content.

basic-text.html

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  
  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname">
</form>

Email Input

The type="email" input is specifically designed for email addresses. It provides automatic validation and displays an email-optimized keyboard on mobile devices.

email-input.html

<form>
  <label for="email">Email Address:</label>
  <input 
    type="email" 
    id="email" 
    name="email" 
    placeholder="you@example.com"
    required
  >
  <button type="submit">Subscribe</button>
</form>

Benefits of using email input:

Automatic validation for email format
Mobile keyboards show @ and .com keys
Better user experience with appropriate keyboard
Browser can suggest previously entered emails

Password Input

The type="password" input hides the entered text, displaying dots or asterisks instead. This protects sensitive information from shoulder surfing.

password-input.html

<form>
  <label for="password">Password:</label>
  <input 
    type="password" 
    id="password" 
    name="password"
    minlength="8"
    required
  >
  
  <label for="confirm-password">Confirm Password:</label>
  <input 
    type="password" 
    id="confirm-password" 
    name="confirm-password"
    minlength="8"
    required
  >
  
  <button type="submit">Create Account</button>
</form>

🔒 Security Note:

While password inputs hide text on screen, they don't encrypt the data. Always use HTTPS and secure server-side handling for passwords.

Search Input

The type="search" input is designed for search fields. On some browsers, it displays a clear button (×) when text is entered.

search-input.html

<form action="/search" method="get">
  <label for="search">Search:</label>
  <input 
    type="search" 
    id="search" 
    name="q" 
    placeholder="Search products..."
  >
  <button type="submit">Search</button>
</form>

Telephone Input

The type="tel" input is for telephone numbers. It shows a numeric keyboard on mobile devices, making it easier for users to enter phone numbers.

tel-input.html

<form>
  <label for="phone">Phone Number:</label>
  <input 
    type="tel" 
    id="phone" 
    name="phone" 
    placeholder="+1 (555) 123-4567"
    pattern="[0-9+-s()]+"
  >
</form>

URL Input

The type="url" input is for web addresses. It validates URL format and optimizes the mobile keyboard with .com and / keys.

url-input.html

<form>
  <label for="website">Website:</label>
  <input 
    type="url" 
    id="website" 
    name="website" 
    placeholder="https://example.com"
  >
  
  <label for="portfolio">Portfolio URL:</label>
  <input 
    type="url" 
    id="portfolio" 
    name="portfolio" 
    placeholder="https://yourportfolio.com"
  >
</form>

Common Input Attributes

All text input fields share several useful attributes that control their behavior and appearance.

placeholder

Shows hint text inside the input field before user types:

placeholder.html

<input type="text" placeholder="Enter your name">
<input type="email" placeholder="your@email.com">
<input type="search" placeholder="Search for products...">

value

Sets the initial or default value of the input:

value.html

<!-- Pre-filled input -->
<input type="text" name="country" value="United States">

<!-- Empty input (default) -->
<input type="text" name="city">

required

Makes the field mandatory before form submission:

required.html

<input type="email" name="email" required>
<input type="password" name="password" required>

readonly

Prevents users from editing the field (but still submits the value):

readonly.html

<label for="username">Username:</label>
<input type="text" id="username" name="username" value="john_doe" readonly>

disabled

Disables the field completely (value is not submitted):

disabled.html

<label for="promocode">Promo Code:</label>
<input type="text" id="promocode" name="promocode" disabled>

maxlength and minlength

Controls the character limits for input:

length-limits.html

<!-- Twitter-style character limit -->
<input type="text" name="tweet" maxlength="280" placeholder="What's happening?">

<!-- Username with minimum length -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- Password requirements -->
<input type="password" name="password" minlength="8" maxlength="128">

size

Sets the visible width of the input (in characters):

size.html

<!-- Small input -->
<input type="text" name="zipcode" size="5">

<!-- Medium input -->
<input type="text" name="username" size="20">

<!-- Large input -->
<input type="text" name="fullname" size="50">

Complete Registration Form

Here's a practical example combining different input types in a registration form:

registration-form.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    form {
      max-width: 500px;
      margin: 40px auto;
      padding: 30px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f9f9f9;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #333;
    }
    
    input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
    }
    
    input:focus {
      outline: none;
      border-color: #4CAF50;
    }
    
    button {
      width: 100%;
      padding: 12px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }
    
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <form action="/register" method="post">
    <h2>Create Your Account</h2>
    
    <div class="form-group">
      <label for="fullname">Full Name:</label>
      <input 
        type="text" 
        id="fullname" 
        name="fullname" 
        placeholder="John Doe"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="username">Username:</label>
      <input 
        type="text" 
        id="username" 
        name="username" 
        placeholder="johndoe123"
        minlength="3"
        maxlength="20"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="email">Email Address:</label>
      <input 
        type="email" 
        id="email" 
        name="email" 
        placeholder="john@example.com"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="phone">Phone Number:</label>
      <input 
        type="tel" 
        id="phone" 
        name="phone" 
        placeholder="+1 (555) 123-4567"
      >
    </div>
    
    <div class="form-group">
      <label for="website">Website (optional):</label>
      <input 
        type="url" 
        id="website" 
        name="website" 
        placeholder="https://yourwebsite.com"
      >
    </div>
    
    <div class="form-group">
      <label for="password">Password:</label>
      <input 
        type="password" 
        id="password" 
        name="password"
        minlength="8"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="confirm-password">Confirm Password:</label>
      <input 
        type="password" 
        id="confirm-password" 
        name="confirm-password"
        minlength="8"
        required
      >
    </div>
    
    <button type="submit">Register</button>
  </form>
</body>
</html>

Best Practices for Text Inputs

Choose the Right Input Type

Using the correct input type improves user experience:

Use type="email" for email addresses
Use type="tel" for phone numbers
Use type="url" for website addresses
Use type="search" for search boxes
Use type="password" for sensitive information

Provide Clear Labels

Always use descriptive labels connected to inputs:

good-labels.html

<!-- Good: Clear and connected -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

<!-- Bad: No label -->
<input type="email" name="email" placeholder="Email">

Use Placeholders Wisely

Placeholders should provide examples, not replace labels:

placeholder-usage.html

<!-- Good: Label + helpful placeholder -->
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567">

<!-- Bad: Placeholder as label -->
<input type="text" name="fullname" placeholder="Full Name">

Validate Appropriately

Use validation attributes to ensure data quality:

validation.html

<!-- Require fields that are essential -->
<input type="email" name="email" required>

<!-- Set reasonable length limits -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- Use patterns for specific formats -->
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Key Takeaways

type="text" is the default for general text input
type="email" validates email format and optimizes keyboards
type="password" hides input text for security
type="search" is optimized for search functionality
type="tel" shows numeric keyboard on mobile
type="url" validates URL format
Use placeholder for examples, not as label replacement
Choose the right input type for better user experience

What's Next?

Now that you understand different text input types, the next lesson will cover labels and placeholders in more detail, focusing on accessibility and best practices for form usability.

Basic Text Input

The type="text" input is the default and most versatile text input field. It accepts any text content.

basic-text.html

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  
  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname">
</form>

Email Input

The type="email" input is specifically designed for email addresses. It provides automatic validation and displays an email-optimized keyboard on mobile devices.

email-input.html

<form>
  <label for="email">Email Address:</label>
  <input 
    type="email" 
    id="email" 
    name="email" 
    placeholder="you@example.com"
    required
  >
  <button type="submit">Subscribe</button>
</form>

Benefits of using email input:

Automatic validation for email format
Mobile keyboards show @ and .com keys
Better user experience with appropriate keyboard
Browser can suggest previously entered emails

Password Input

The type="password" input hides the entered text, displaying dots or asterisks instead. This protects sensitive information from shoulder surfing.

password-input.html

<form>
  <label for="password">Password:</label>
  <input 
    type="password" 
    id="password" 
    name="password"
    minlength="8"
    required
  >
  
  <label for="confirm-password">Confirm Password:</label>
  <input 
    type="password" 
    id="confirm-password" 
    name="confirm-password"
    minlength="8"
    required
  >
  
  <button type="submit">Create Account</button>
</form>

🔒 Security Note:

While password inputs hide text on screen, they don't encrypt the data. Always use HTTPS and secure server-side handling for passwords.

Search Input

The type="search" input is designed for search fields. On some browsers, it displays a clear button (×) when text is entered.

search-input.html

<form action="/search" method="get">
  <label for="search">Search:</label>
  <input 
    type="search" 
    id="search" 
    name="q" 
    placeholder="Search products..."
  >
  <button type="submit">Search</button>
</form>

Telephone Input

The type="tel" input is for telephone numbers. It shows a numeric keyboard on mobile devices, making it easier for users to enter phone numbers.

tel-input.html

<form>
  <label for="phone">Phone Number:</label>
  <input 
    type="tel" 
    id="phone" 
    name="phone" 
    placeholder="+1 (555) 123-4567"
    pattern="[0-9+-s()]+"
  >
</form>

URL Input

The type="url" input is for web addresses. It validates URL format and optimizes the mobile keyboard with .com and / keys.

url-input.html

<form>
  <label for="website">Website:</label>
  <input 
    type="url" 
    id="website" 
    name="website" 
    placeholder="https://example.com"
  >
  
  <label for="portfolio">Portfolio URL:</label>
  <input 
    type="url" 
    id="portfolio" 
    name="portfolio" 
    placeholder="https://yourportfolio.com"
  >
</form>

Common Input Attributes

All text input fields share several useful attributes that control their behavior and appearance.

placeholder

Shows hint text inside the input field before user types:

placeholder.html

<input type="text" placeholder="Enter your name">
<input type="email" placeholder="your@email.com">
<input type="search" placeholder="Search for products...">

value

Sets the initial or default value of the input:

value.html

<!-- Pre-filled input -->
<input type="text" name="country" value="United States">

<!-- Empty input (default) -->
<input type="text" name="city">

required

Makes the field mandatory before form submission:

required.html

<input type="email" name="email" required>
<input type="password" name="password" required>

readonly

Prevents users from editing the field (but still submits the value):

readonly.html

<label for="username">Username:</label>
<input type="text" id="username" name="username" value="john_doe" readonly>

disabled

Disables the field completely (value is not submitted):

disabled.html

<label for="promocode">Promo Code:</label>
<input type="text" id="promocode" name="promocode" disabled>

maxlength and minlength

Controls the character limits for input:

length-limits.html

<!-- Twitter-style character limit -->
<input type="text" name="tweet" maxlength="280" placeholder="What's happening?">

<!-- Username with minimum length -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- Password requirements -->
<input type="password" name="password" minlength="8" maxlength="128">

size

Sets the visible width of the input (in characters):

size.html

<!-- Small input -->
<input type="text" name="zipcode" size="5">

<!-- Medium input -->
<input type="text" name="username" size="20">

<!-- Large input -->
<input type="text" name="fullname" size="50">

Complete Registration Form

Here's a practical example combining different input types in a registration form:

registration-form.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration Form</title>
  <style>
    form {
      max-width: 500px;
      margin: 40px auto;
      padding: 30px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #f9f9f9;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #333;
    }
    
    input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
    }
    
    input:focus {
      outline: none;
      border-color: #4CAF50;
    }
    
    button {
      width: 100%;
      padding: 12px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }
    
    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <form action="/register" method="post">
    <h2>Create Your Account</h2>
    
    <div class="form-group">
      <label for="fullname">Full Name:</label>
      <input 
        type="text" 
        id="fullname" 
        name="fullname" 
        placeholder="John Doe"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="username">Username:</label>
      <input 
        type="text" 
        id="username" 
        name="username" 
        placeholder="johndoe123"
        minlength="3"
        maxlength="20"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="email">Email Address:</label>
      <input 
        type="email" 
        id="email" 
        name="email" 
        placeholder="john@example.com"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="phone">Phone Number:</label>
      <input 
        type="tel" 
        id="phone" 
        name="phone" 
        placeholder="+1 (555) 123-4567"
      >
    </div>
    
    <div class="form-group">
      <label for="website">Website (optional):</label>
      <input 
        type="url" 
        id="website" 
        name="website" 
        placeholder="https://yourwebsite.com"
      >
    </div>
    
    <div class="form-group">
      <label for="password">Password:</label>
      <input 
        type="password" 
        id="password" 
        name="password"
        minlength="8"
        required
      >
    </div>
    
    <div class="form-group">
      <label for="confirm-password">Confirm Password:</label>
      <input 
        type="password" 
        id="confirm-password" 
        name="confirm-password"
        minlength="8"
        required
      >
    </div>
    
    <button type="submit">Register</button>
  </form>
</body>
</html>

Best Practices for Text Inputs

Choose the Right Input Type

Using the correct input type improves user experience:

Use type="email" for email addresses
Use type="tel" for phone numbers
Use type="url" for website addresses
Use type="search" for search boxes
Use type="password" for sensitive information

Provide Clear Labels

Always use descriptive labels connected to inputs:

good-labels.html

<!-- Good: Clear and connected -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

<!-- Bad: No label -->
<input type="email" name="email" placeholder="Email">

Use Placeholders Wisely

Placeholders should provide examples, not replace labels:

placeholder-usage.html

<!-- Good: Label + helpful placeholder -->
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567">

<!-- Bad: Placeholder as label -->
<input type="text" name="fullname" placeholder="Full Name">

Validate Appropriately

Use validation attributes to ensure data quality:

validation.html

<!-- Require fields that are essential -->
<input type="email" name="email" required>

<!-- Set reasonable length limits -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- Use patterns for specific formats -->
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Key Takeaways

type="text" is the default for general text input
type="email" validates email format and optimizes keyboards
type="password" hides input text for security
type="search" is optimized for search functionality
type="tel" shows numeric keyboard on mobile
type="url" validates URL format
Use placeholder for examples, not as label replacement
Choose the right input type for better user experience

What's Next?

Now that you understand different text input types, the next lesson will cover labels and placeholders in more detail, focusing on accessibility and best practices for form usability.

Basic Text Input

Email Input

Password Input

Search Input

Telephone Input

URL Input

Common Input Attributes

placeholder

value

required

readonly

disabled

maxlength and minlength

size

Complete Registration Form

Best Practices for Text Inputs

Choose the Right Input Type

Provide Clear Labels

Use Placeholders Wisely

Validate Appropriately

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New HTML Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

Menu

Text Input Fields

Basic Text Input

Email Input

Password Input

Search Input

Telephone Input

URL Input

Common Input Attributes

placeholder

value

required

readonly

disabled

maxlength and minlength

size

Complete Registration Form

Best Practices for Text Inputs

Choose the Right Input Type

Provide Clear Labels

Use Placeholders Wisely

Validate Appropriately

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New HTML Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

Menu