HTML Input Attributes with Example

HTML Input Attributes are special properties used within the <input> tag that define how an input field behaves, looks, and interacts with users.

They help control everything from placeholder text and field requirements to validation rules and default values.

Basic Example

<input type="text" name="username" placeholder="Enter your name" required>

Here:

type defines input type.
name identifies data for the server.
placeholder gives a hint to the user.
required ensures the field must be filled before submitting.

Common HTML Input Attributes

Let’s explore all major input attributes one by one.

1. name Attribute

Specifies a unique name for each input field. It’s sent to the server when the form is submitted.

<input type="text" name="fullname">

2. value Attribute

Defines the default value of the input field.

<input type="text" name="country" value="India">

3. placeholder Attribute

Displays a light-gray hint text inside the input box, describing expected input.

<input type="email" placeholder="Enter your email address">

4. required Attribute

Makes the field mandatory before form submission.

<input type="text" name="username" required>

5. readonly Attribute

Displays input data but prevents editing.

<input type="text" value="Readonly Example" readonly>

6. disabled Attribute

Disables the input field completely. It cannot be clicked or submitted.

<input type="text" value="Disabled Field" disabled>

7. size Attribute

Defines the visible width of the input field in characters.

<input type="text" name="user" size="30">

8. maxlength Attribute

Limits the number of characters allowed in the input.

<input type="text" name="zip" maxlength="6">

9. min and max Attributes

Define minimum and maximum numeric or date range values.

<input type="number" name="age" min="18" max="60">

10. step Attribute

Defines the stepping interval for numeric or range input.

<input type="number" name="points" step="5">

11. pattern Attribute

Specifies a regular expression to validate input format.

<input type="text" name="zipcode" pattern="[0-9]{6}" title="Enter a 6-digit postal code">

12. autofocus Attribute

Automatically focuses the cursor on the input field when the page loads.

<input type="text" name="search" autofocus>

13. autocomplete Attribute

Tells the browser whether to remember and autofill previous input values.

Value	Description
on	Enables autofill
off	Disables autofill

Example:

<input type="text" name="username" autocomplete="off">

14. multiple Attribute

Allows multiple file or email entries in a single field.

<input type="file" name="documents" multiple>

15. checked Attribute

Pre-selects a radio button or checkbox.

<input type="radio" name="gender" value="male" checked> Male

16. src Attribute (for image input)

Used when type="image", specifies the image source for the button.

<input type="image" src="submit.png" alt="Submit Form">

17. height and width Attributes

Define dimensions for image-type input buttons.

<input type="image" src="button.png" height="50" width="150">

18. list Attribute

Connects an <input> field to a <datalist> for suggestions.

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Edge">
  <option value="Firefox">
</datalist>

Full Example of HTML Input Attributes in Action

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn HTML input attributes with examples of placeholder, required, readonly, min, max, pattern, and autocomplete. Complete guide for beginners.">
    <meta name="keywords" content="HTML input attributes, HTML form attributes, HTML placeholder, HTML required, HTML pattern, HTML tutorial, SEO-friendly HTML article">
    <meta name="author" content="Dharmesh Kundariya">
    <title>HTML Input Attributes Example</title>
</head>
<body>
    <h1>HTML Input Attributes Example</h1>
    <form action="submit_form.php" method="post">
        <label for="name">Full Name:</label><br>
        <input type="text" id="name" name="fullname" placeholder="Enter your name" required maxlength="30"><br><br>

        <label for="email">Email Address:</label><br>
        <input type="email" id="email" name="email" placeholder="example@mail.com" autocomplete="on"><br><br>

        <label for="age">Age (18–60):</label><br>
        <input type="number" id="age" name="age" min="18" max="60"><br><br>

        <label for="phone">Phone (10 digits):</label><br>
        <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" title="Enter a 10-digit number"><br><br>

        <label for="resume">Upload Resume:</label><br>
        <input type="file" id="resume" name="resume" multiple><br><br>

        <input type="submit" value="Submit Form">
    </form>
</body>
</html>

HTML Input Types HTML SVG Graphics