Forms and Inputs

Building interactive forms with HTML form elements

Forms and Inputs

Forms are how users interact with your website - submitting data, searching, logging in, and more.

Basic Form Structure

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

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

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

Common Input Types

<input type="text" placeholder="Plain text">
<input type="email" placeholder="user@example.com">
<input type="password" placeholder="Your password">
<input type="number" min="0" max="100" step="1">
<input type="url" placeholder="https://example.com">
<input type="tel" placeholder="555-0123">
<input type="date">
<input type="color">
<input type="range" min="0" max="100">
<input type="file" accept="image/*">
<input type="search" placeholder="Search...">
HTML

Textarea

For multi-line text input:

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="40"
          placeholder="Type your message here..."></textarea>
HTML

Select Dropdowns

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="">-- Select --</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>
HTML

Grouped Options

<select name="car">
    <optgroup label="Japanese">
        <option>Toyota</option>
        <option>Honda</option>
    </optgroup>
    <optgroup label="German">
        <option>BMW</option>
        <option>Mercedes</option>
    </optgroup>
</select>
HTML

Checkboxes and Radio Buttons

<!-- Checkboxes (multiple selections) -->
<fieldset>
    <legend>Select your skills:</legend>
    <label><input type="checkbox" name="skills" value="html"> HTML</label>
    <label><input type="checkbox" name="skills" value="css"> CSS</label>
    <label><input type="checkbox" name="skills" value="js"> JavaScript</label>
</fieldset>

<!-- Radio buttons (single selection) -->
<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>
HTML

Validation Attributes

<input type="text" required>                    <!-- Must be filled -->
<input type="text" minlength="3" maxlength="50"> <!-- Length limits -->
<input type="number" min="1" max="100">          <!-- Range limits -->
<input type="text" pattern="[A-Za-z]{3,}">       <!-- Regex pattern -->
<input type="email" required>                     <!-- Must be valid email -->
HTML