~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/6html-forms

# HTML Forms & Validation

Forms collect user input — from simple text fields to complex multi-step workflows. They're essential for login pages, search bars, contact forms, and more.

## Basic Form Structure

Every form uses the `<form>` element:

```html
<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

<button type="submit">Submit</button>
</form>
```

**Key attributes:**
- `action` — URL where form data is sent
- `method` — HTTP method (GET or POST)

## Labels

Always pair inputs with labels for accessibility:

```html
<label for="email">Email</label>
<input type="email" id="email" name="email" />
```

**Why labels matter:**
- Clicking the label focuses the input
- Screen readers announce the label
- Improves touch targets on mobile

## Input Types

HTML5 provides many specialized input types:

```html

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

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

<input type="password" name="password" />

<input type="number" name="age" min="0" max="120" />

<input type="tel" name="phone" />

<input type="url" name="website" />

<input type="date" name="birthday" />

<input type="time" name="appointment" />

<input type="color" name="favorite-color" />

<input type="file" name="avatar" accept="image/*" />

<input type="range" name="volume" min="0" max="100" />

<input type="search" name="query" />
```

## Textarea

For multi-line text input:

```html
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40">
  Default text here...
</textarea>
```

## Select Dropdown

For choosing from a list of options:

```html
<label for="country">Country</label>
<select id="country" name="country">
  <option value="">Select a country</option>
  <option value="eg">Egypt</option>
  <option value="sa">Saudi Arabia</option>
  <option value="ae">UAE</option>
</select>
```

## Checkboxes and Radio Buttons

```html

<fieldset>
  <legend>Interests</legend>
  <label>
    <input type="checkbox" name="interests" value="html" /> HTML
  </label>
  <label>
    <input type="checkbox" name="interests" value="css" /> CSS
  </label>
  <label>
    <input type="checkbox" name="interests" value="js" /> JavaScript
  </label>
</fieldset>

<fieldset>
  <legend>Experience Level</legend>
  <label>
    <input type="radio" name="level" value="beginner" /> Beginner
  </label>
  <label>
    <input type="radio" name="level" value="intermediate" /> Intermediate
  </label>
  <label>
    <input type="radio" name="level" value="advanced" /> Advanced
  </label>
</fieldset>
```

## Validation Attributes

HTML5 provides built-in validation:

```html

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

<input type="text" name="username" minlength="3" maxlength="20" />

<input type="tel" name="phone" pattern="[0-9]{10}" />

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

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

<input type="url" name="website" />
```

## Validation Messages

Custom validation messages with JavaScript:

```html
<form id="myForm">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />
  <span class="error" aria-live="polite"></span>

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

email.addEventListener('input', () => {
    if (email.validity.valid) {
      error.textContent = '';
    } else {
      error.textContent = getErrorMessage(email);
    }
  });

function getErrorMessage(input) {
    if (input.validity.valueMissing) return 'Email is required';
    if (input.validity.typeMismatch) return 'Please enter a valid email';
    return '';
  }
</script>
```

## Fieldset and Legend

Group related form elements:

```html
<form>
  <fieldset>
    <legend>Personal Information</legend>

<label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </fieldset>

<fieldset>
    <legend>Preferences</legend>

<label>
      <input type="checkbox" name="newsletter" /> Subscribe to newsletter
    </label>
  </fieldset>

<button type="submit">Submit</button>
</form>
```

## Complete Example

Here's a complete registration form:

```html
<form action="/register" method="POST">
  <h2>Create Account</h2>

<fieldset>
    <legend>Account Details</legend>

<div>
      <label for="username">Username</label>
      <input
        type="text"
        id="username"
        name="username"
        required
        minlength="3"
        maxlength="20"
        pattern="[a-zA-Z0-9_]+"
      />
      <small>3-20 characters, letters, numbers, and underscores only</small>
    </div>

<div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required />
    </div>

<div>
      <label for="password">Password</label>
      <input
        type="password"
        id="password"
        name="password"
        required
        minlength="8"
      />
      <small>At least 8 characters</small>
    </div>
  </fieldset>

<fieldset>
    <legend>Profile</legend>

<div>
      <label for="bio">Bio</label>
      <textarea id="bio" name="bio" rows="4" maxlength="500"></textarea>
      <small>Max 500 characters</small>
    </div>

<div>
      <label for="role">Role</label>
      <select id="role" name="role" required>
        <option value="">Select a role</option>
        <option value="student">Student</option>
        <option value="developer">Developer</option>
        <option value="designer">Designer</option>
      </select>
    </div>
  </fieldset>

<label>
    <input type="checkbox" name="terms" required />
    I agree to the <a href="/terms">Terms of Service</a>
  </label>

<button type="submit">Create Account</button>
</form>
```

## Common Mistakes

1. **Missing labels** — Inputs without labels hurt accessibility
2. **Using placeholder as label** — Placeholder disappears when typing
3. **No validation** — Always validate on both client and server
4. **Missing required attribute** — Let HTML handle basic validation
5. **Not grouping related fields** — Use fieldset for complex forms

No changes yet

cancel