HTML Input Attributes

Input attributes provide additional functionality for input elements such as validation, autocomplete, and more.

Basic Attributes

type

<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="date">
<input type="file">
<input type="submit">

name and value

<input type="text" name="name" value="John Smith">

placeholder

<input type="email" placeholder="[email protected]">

required

<input type="text" required>

Validation Attributes

minlength and maxlength

<input type="text" minlength="3" maxlength="50">

min and max

<input type="number" min="0" max="100">
<input type="date" min="2024-01-01" max="2024-12-31">

pattern

<input type="text" pattern="[0-9]{10}" title="Student ID must be 10 digits">

multiple

<input type="email" multiple>

Other Attributes

readonly

<input type="text" value="Cannot be changed" readonly>

disabled

<input type="text" disabled>

autofocus

<input type="text" autofocus>

autocomplete

<input type="email" autocomplete="email">
<input type="password" autocomplete="current-password">

list

<input list="major">
<datalist id="major">
    <option value="Informatics Engineering">
    <option value="Information Systems">
    <option value="Computer Engineering">
</datalist>

Case Study: Form with Validation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Validation Form</title>
    <style>
        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }

        input:required {
            border-left: 3px solid blue;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        small {
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Student Registration Form</h1>

    <form action="/register" method="POST">
        <div class="form-group">
            <label for="name">Full Name (3-50 characters) *</label>
            <input type="text" id="name" name="name" 
                   required minlength="3" maxlength="50"
                   placeholder="Enter your full name">
        </div>

        <div class="form-group">
            <label for="email">Email *</label>
            <input type="email" id="email" name="email" 
                   required autocomplete="email"
                   placeholder="[email protected]">
        </div>

        <div class="form-group">
            <label for="studentId">Student ID (10 digits) *</label>
            <input type="text" id="studentId" name="studentId" 
                   pattern="[0-9]{10}" 
                   title="Student ID must be 10 digits" required
                   placeholder="1234567890">
        </div>

        <div class="form-group">
            <label for="birthDate">Date of Birth *</label>
            <input type="date" id="birthDate" name="birthDate" 
                   min="1994-01-01" max="2007-12-31" required>
        </div>

        <div class="form-group">
            <label for="phone">Phone Number</label>
            <input type="tel" id="phone" name="phone" 
                   pattern="[0-9]{10,13}"
                   title="Phone number 10-13 digits">
        </div>

        <div class="form-group">
            <label for="password">Password (minimum 8 characters) *</label>
            <input type="password" id="password" name="password" 
                   minlength="8" required autocomplete="new-password">
        </div>

        <div class="form-group">
            <label for="website">Website (optional)</label>
            <input type="url" id="website" name="website"
                   placeholder="https://example.com">
        </div>

        <button type="submit">Register</button>
    </form>
</body>
</html>

Everyday Case Study

Case: A developer needs a form with a datalist.

<h2>Study Program Search</h2>

<form>
    <div class="form-group">
        <label for="program">Study Program</label>
        <input list="study-program-list" id="program" name="program" 
               placeholder="Type or select...">
        <datalist id="study-program-list">
            <option value="Informatics Engineering">
            <option value="Information Systems">
            <option value="Computer Engineering">
            <option value="Information Technology">
            <option value="Computer Science">
        </datalist>
    </div>

    <button type="submit">Search</button>
</form>

Best Practices

1. Required: For mandatory fields
2. Pattern: For format validation
3. Autocomplete: For user convenience
4. Placeholder: For input hints
5. Title: For descriptive error messages

Summary

Input attributes improve validation and the user experience. Use the right attributes for each type of input.