Input Types

Master all HTML5 input types to build professional contact forms that collect text, emails, passwords, dates, and more with built-in validation.

Alex just created their first contact form, but it only has basic text inputs. Visitors can type anything into the email field — even "banana sandwich" instead of a real email address. That's where different input types save the day. An input type tells the browser what kind of information you expect. Like having different shaped slots for different keys. The browser can then show the right keyboard on phones, validate the data automatically, and style the input appropriately.

The Input Tag Anatomy

Every input starts the same way, but the type attribute changes everything:

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

Opening Tag

Input Type

Type Value

Name Attribute

Self-Closing

The type attribute is like a magic wand. Change it from "text" to "email" and suddenly the browser knows to expect an email address. On mobile phones, it'll show an email keyboard with the @ symbol right there.

Text-Based Input Types

These handle different kinds of text input. Each one gives the browser hints about what to expect:

<!-- Alex's contact form with different text inputs -->
<form>
  <!-- Regular text input for names -->
  <input type="text" name="fullName" placeholder="Your full name">
  
  <!-- Email input validates email format -->
  <input type="email" name="email" placeholder="your@email.com">
  
  <!-- Password input hides what you type -->
  <input type="password" name="password" placeholder="Create password">
  
  <!-- Tel input for phone numbers -->
  <input type="tel" name="phone" placeholder="(555) 123-4567">
  
  <!-- URL input for websites -->
  <input type="url" name="website" placeholder="https://yoursite.com">
</form>

What just happened?

The browser rendered five different input types. Try typing in the password field — it hides your characters with dots. The email field will show validation errors if you don't include an @ symbol when you submit.

Each type looks similar but behaves differently. The password input hides your typing for security. The email input checks for valid email format. On mobile devices, tel inputs show a number pad instead of a full keyboard.

Number and Range Inputs

When you need numbers instead of text, these input types are perfect. They prevent users from typing letters and give you special controls:

<!-- Number inputs for Alex's project feedback form -->
<form>
  <label>Rate this project (1-10):</label>
  <!-- Number input with min/max limits -->
  <input type="number" name="rating" min="1" max="10" value="5">
  
  <label>Budget range:</label>
  <!-- Range slider for selecting values -->
  <input type="range" name="budget" min="1000" max="50000" value="10000">
  
  <label>Team size:</label>
  <!-- Number input with step increments -->
  <input type="number" name="teamSize" min="1" max="20" step="1">
</form>

The range input creates a slider that users can drag. Perfect for ratings, price ranges, or volume controls. Number inputs show little up/down arrows and prevent typing letters entirely. Notice how we used attributes like min, max, and step to control the input behavior. These work like guardrails — they keep users within reasonable bounds.

Date and Time Inputs

Nothing frustrates users more than figuring out date formats. Is it MM/DD/YYYY or DD/MM/YYYY? Date inputs solve this by showing a calendar picker:

<!-- Date inputs for Alex's project scheduling form -->
<form>
  <label>Project start date:</label>
  <!-- Date picker calendar -->
  <input type="date" name="startDate" value="2024-03-15">
  
  <label>Meeting time:</label>
  <!-- Time picker with hours and minutes -->
  <input type="time" name="meetingTime" value="14:30">
  
  <label>Deadline (with time):</label>
  <!-- Combined date and time picker -->
  <input type="datetime-local" name="deadline">
  
  <label>Birth month:</label>
  <!-- Month and year only -->
  <input type="month" name="birthMonth">
</form>

Click on those date inputs! Most browsers show a calendar popup where users can click to select dates. No more guessing if someone meant March 5th or May 3rd when they wrote "3/5/2024".

Pro tip: Date input values must be in YYYY-MM-DD format in your HTML code, but the browser displays them in the user's local format automatically. So "2024-03-15" might show as "3/15/2024" to American users and "15/03/2024" to European users.

Choice-Based Inputs

Sometimes you want users to pick from specific options rather than typing freely. These inputs create different ways to choose:

<!-- Choice inputs for Alex's contact preferences -->
<form>
  <label>Preferred contact method:</label>
  <!-- Radio buttons - pick only one -->
  <input type="radio" name="contact" value="email" id="email">
  <label for="email">Email</label>
  
  <input type="radio" name="contact" value="phone" id="phone">
  <label for="phone">Phone</label>
  
  <label>Services interested in:</label>
  <!-- Checkboxes - pick multiple -->
  <input type="checkbox" name="services" value="web" id="web">
  <label for="web">Web Design</label>
  
  <input type="checkbox" name="services" value="mobile" id="mobile">
  <label for="mobile">Mobile Apps</label>
  
  <!-- Color picker for brand colors -->
  <label>Brand color:</label>
  <input type="color" name="brandColor" value="#3b82f6">
</form>

Radio buttons work like old car radio buttons — press one and the others pop out. All radio inputs with the same name attribute form a group where only one can be selected. Checkboxes let users pick multiple options. And that color input? It opens a full color picker in most browsers. Perfect for getting exact brand colors from clients without them having to know hex codes.

File and Hidden Inputs

These special inputs handle file uploads and store hidden data:

<!-- File and hidden inputs for Alex's project form -->
<form>
  <label>Upload your logo:</label>
  <!-- File picker for uploads -->
  <input type="file" name="logo" accept="image/*">
  
  <label>Portfolio examples:</label>
  <!-- Multiple file selection -->
  <input type="file" name="examples" multiple accept=".pdf,.jpg,.png">
  
  <!-- Hidden field for form tracking -->
  <input type="hidden" name="formVersion" value="2024.1">
  
  <!-- Search input with special styling -->
  <label>Search projects:</label>
  <input type="search" name="query" placeholder="Type to search...">
</form>

File inputs create a "Choose File" button that opens your computer's file browser. The accept attribute filters what file types users can select. Hidden inputs store data that users don't see but gets sent with the form — like tracking information or form versions.

File Upload Reality Check

File inputs just select files — they don't upload anything by themselves. You need server-side code (like PHP or Node.js) to actually handle the uploaded files. The input just gives users a way to choose which files to send.

Mobile-Friendly Input Types

These input types shine on mobile devices where they trigger specific keyboard layouts:

type="tel"

Shows number pad on mobile phones. Perfect for phone numbers, zip codes, or any numeric entry.

type="email"

Mobile keyboards show @ symbol prominently. Validates email format automatically in modern browsers.

The mobile experience makes a huge difference. When someone taps an email input on their phone, seeing the @ symbol right there instead of having to hunt for it improves your form completion rates dramatically.

Quiz

Form Validation Basics

Now that Alex's forms collect the right data types, learn how to validate user input and show helpful error messages before submission.

← Previous Course Index Next →