HTML Input Types

Explore the different input types available in HTML forms

Introduction to HTML Input Types

HTML provides a variety of input types to create rich form controls. Each input type serves a specific purpose and provides different user interfaces and validation capabilities.

Input Type Examples

Text Input Types

Common text-based input types with different purposes

<form>
  <label for="text">Text:</label>
  <input type="text" id="text" name="text" placeholder="Enter text">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Enter password">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter email">
  
  <label for="search">Search:</label>
  <input type="search" id="search" name="search" placeholder="Search...">
</form><form>
  <label for="text">Text:</label>
  <input type="text" id="text" name="text" placeholder="Enter text">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Enter password">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter email">
  
  <label for="search">Search:</label>
  <input type="search" id="search" name="search" placeholder="Search...">
</form>

Numeric Input Types

Input types for numeric values with validation

<form>
  <label for="number">Number:</label>
  <input type="number" id="number" name="number" min="1" max="10" step="1">
  
  <label for="range">Range:</label>
  <input type="range" id="range" name="range" min="0" max="100" step="5">
  
  <label for="tel">Telephone:</label>
  <input type="tel" id="tel" name="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</form><form>
  <label for="number">Number:</label>
  <input type="number" id="number" name="number" min="1" max="10" step="1">
  
  <label for="range">Range:</label>
  <input type="range" id="range" name="range" min="0" max="100" step="5">
  
  <label for="tel">Telephone:</label>
  <input type="tel" id="tel" name="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</form>

Date & Time Inputs

Specialized inputs for date and time selection

<form>
  <label for="date">Date:</label>
  <input type="date" id="date" name="date">
  
  <label for="time">Time:</label>
  <input type="time" id="time" name="time">
  
  <label for="datetime-local">Local DateTime:</label>
  <input type="datetime-local" id="datetime-local" name="datetime-local">
  
  <label for="month">Month:</label>
  <input type="month" id="month" name="month">
  
  <label for="week">Week:</label>
  <input type="week" id="week" name="week">
</form><form>
  <label for="date">Date:</label>
  <input type="date" id="date" name="date">
  
  <label for="time">Time:</label>
  <input type="time" id="time" name="time">
  
  <label for="datetime-local">Local DateTime:</label>
  <input type="datetime-local" id="datetime-local" name="datetime-local">
  
  <label for="month">Month:</label>
  <input type="month" id="month" name="month">
  
  <label for="week">Week:</label>
  <input type="week" id="week" name="week">
</form>

Special Input Types

Unique input types for specific purposes

<form>
  <label for="color">Color Picker:</label>
  <input type="color" id="color" name="color" value="#ff0000">
  
  <label for="file">File Upload:</label>
  <input type="file" id="file" name="file">
  
  <label for="url">URL:</label>
  <input type="url" id="url" name="url" placeholder="https://example.com">
  
  <label for="hidden">Hidden Input:</label>
  <input type="hidden" id="hidden" name="hidden" value="secret-value">
</form><form>
  <label for="color">Color Picker:</label>
  <input type="color" id="color" name="color" value="#ff0000">
  
  <label for="file">File Upload:</label>
  <input type="file" id="file" name="file">
  
  <label for="url">URL:</label>
  <input type="url" id="url" name="url" placeholder="https://example.com">
  
  <label for="hidden">Hidden Input:</label>
  <input type="hidden" id="hidden" name="hidden" value="secret-value">
</form>

Try Our Online HTML Editor

Experiment with HTML right in your browser using our interactive editor with live preview:

No installation required
Real-time preview of your code
Format and clean your HTML
Export your work as HTML files

Launch HTML Editor

<!DOCTYPE html>
                      <html>
                        <head>
                          <title>HTML Input Types</title>
                          <style>
                            body { font-family: Arial, sans-serif; padding: 20px; }
                            form { max-width: 500px; margin: 0 auto; }
                            label { display: block; margin-top: 15px; }
                            input { width: 100%; padding: 8px; margin-top: 5px; }
                          </style>
                        </head>
                        <body>
                          <h1>HTML Input Types</h1>
                          <form>
                            <label for="text">Text Input:</label>
                            <input type="text" id="text" name="text" />
                      
                            <label for="email">Email Input:</label>
                            <input type="email" id="email" name="email" />
                      
                            <button type="submit">Submit</button>
                          </form>
                        </body>
                      </html>

< Previous Next >