HTML Form Attributes

Form attributes provide additional functionality for form elements such as validation, autocomplete, and more.

Form Attributes

action

<form action="/api/submit">

method

<form method="POST">

enctype

<form enctype="multipart/form-data">

target

<form target="_blank">

novalidate

<form novalidate>

Input Attributes

required

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

placeholder

<input type="text" name="name" placeholder="Enter name">

maxlength

<input type="text" name="name" maxlength="50">

pattern

<input type="text" name="studentId" pattern="[0-9]{10}">

min and max

<input type="number" name="age" min="17" max="30">
<input type="date" name="date" min="2024-01-01" max="2024-12-31">

readonly

<input type="text" name="studentId" value="1234567890" readonly>

disabled

<input type="text" name="code" disabled>

autofocus

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

autocomplete

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

Case Study: Validation Form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Validation Form</title>
    <style>
        .form-group {
            margin-bottom: 15px;
        }

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

        input:invalid {
            border-color: red;
        }

        input:valid {
            border-color: green;
        }

        .error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>Registration Form</h1>

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

        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" 
                   required 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>
        </div>

        <div class="form-group">
            <label for="age">Age (17-30)</label>
            <input type="number" id="age" name="age" 
                   min="17" max="30" required>
        </div>

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

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

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

Everyday Case Study

Case: A developer needs a form with a readonly field.

<form action="/update-profile" method="POST">
    <div class="form-group">
        <label for="studentId">Student ID</label>
        <input type="text" id="studentId" name="studentId" value="1234567890" readonly>
        <small>Student ID cannot be changed</small>
    </div>

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" name="name" value="John Smith">
    </div>

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

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

Best Practices

1. Required: For mandatory fields
2. Pattern: For format validation
3. Min/Max: For numeric limits
4. Placeholder: For input hints
5. Readonly/Disabled: For fields that can't be changed

Summary

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