Difficulty: Intermediate
The <input> element is the workhorse of HTML forms. By changing its type attribute, you can create a wide variety of input controls. Text-based input types are the most commonly used and include text, email, password, number, tel, and url. Each type provides built-in browser behavior including appropriate keyboard layouts on mobile, native validation rules, and autofill hints.
The type="text" input is the most basic -- it accepts any text value with no built-in validation. The type="email" input looks the same but provides automatic validation that the entered value matches a standard email format (contains an @ sign and a domain). The type="password" input masks the entered characters for security. On mobile devices, these type attributes trigger different keyboard layouts: email shows the @ key prominently, tel shows a numeric keypad, and url shows .com and / keys.
The type="number" input restricts entry to numeric values and provides increment/decrement spinner buttons. You can set min, max, and step attributes to constrain the range: for example, <input type="number" min="0" max="100" step="5"> only accepts multiples of 5 between 0 and 100. The type="tel" input is for phone numbers but does not enforce any particular format since phone number formats vary globally; its primary benefit is triggering a phone keypad on mobile devices.
The placeholder attribute provides hint text that appears inside the input when it is empty. It disappears as soon as the user begins typing. Placeholders should supplement labels, never replace them -- a placeholder alone does not satisfy accessibility requirements because it vanishes once the field has content, leaving users uncertain about what the field expects. The required attribute marks a field as mandatory; the browser will prevent form submission and show a validation message if a required field is empty.
Additional useful attributes include autocomplete (which hints to the browser what kind of data the field expects for autofill), maxlength and minlength (which constrain the number of characters), readonly (which displays the value but prevents editing), and disabled (which grays out the field and excludes it from form submission). Using the appropriate autocomplete values like 'email', 'current-password', or 'tel' significantly improves the user experience by enabling password managers and address autofill.
<form>
<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname"
placeholder="John Doe" required autocomplete="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email"
placeholder="john@example.com" required autocomplete="email">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
minlength="8" required autocomplete="new-password">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
placeholder="+91 98765 43210" autocomplete="tel">
<label for="website">Website:</label>
<input type="url" id="website" name="website"
placeholder="https://example.com" autocomplete="url">
</form>Each input type triggers appropriate browser behavior: email validates format, password masks characters, tel shows a phone keypad on mobile, and url validates URL format. The autocomplete attributes enable intelligent autofill.
<form>
<label for="age">Age:</label>
<input type="number" id="age" name="age"
min="18" max="120" step="1" required>
<label for="price">Price ($):</label>
<input type="number" id="price" name="price"
min="0" max="99999.99" step="0.01"
placeholder="29.99">
<label for="quantity">Quantity (multiples of 5):</label>
<input type="number" id="quantity" name="quantity"
min="0" max="100" step="5" value="10">
</form>Number inputs support min, max, and step attributes. The step attribute controls the increment amount when using the spinner buttons. Setting step="0.01" allows decimal values with two decimal places, suitable for prices.
<form>
<label for="user-id">User ID:</label>
<input type="text" id="user-id" name="userId"
value="USR-001" readonly>
<label for="deprecated">Old Field:</label>
<input type="text" id="deprecated" name="old"
value="Not editable" disabled>
<label for="search">Search:</label>
<input type="text" id="search" name="q"
autofocus placeholder="Start typing...">
</form>readonly fields are visible and submitted with the form but cannot be edited. disabled fields are grayed out and excluded from form submission entirely. autofocus places the cursor in the field when the page loads. Use autofocus sparingly -- only on the primary input of the page.
<form>
<label for="username">Username (3-20 characters, letters and numbers only):</label>
<input type="text" id="username" name="username"
minlength="3" maxlength="20"
pattern="[a-zA-Z0-9]+"
title="Only letters and numbers, 3-20 characters"
required>
<label for="zipcode">ZIP Code:</label>
<input type="text" id="zipcode" name="zipcode"
pattern="[0-9]{5}"
title="5-digit ZIP code"
maxlength="5"
required>
</form>The pattern attribute accepts a regular expression that the input value must match. The title attribute provides a custom message shown in the validation tooltip when the pattern does not match. Combined with minlength and maxlength, you can enforce precise format requirements.
input type text, email, password, number, tel, url, placeholder, required