📝 Forms & Inputs

Learn to create powerful, user-friendly HTML forms.

Form Basics

Basic Form Structure

<form action="/submit-form" method="POST">
    <!-- Form fields go here -->
    <button type="submit">Submit</button>
</form>

Form Attributes

Attribute	Purpose	Example
action	URL to submit form to	action="/submit"
method	HTTP method	method="POST" or method="GET"
enctype	Encoding type	enctype="multipart/form-data"
novalidate	Skip validation	novalidate
target	Where to open	target="_blank"

Input Types

Text Inputs

<!-- Basic text input -->
<input type="text" placeholder="Enter text">

<!-- Email input with validation -->
<input type="email" required>

<!-- Password input (hidden characters) -->
<input type="password" required>

<!-- URL input with validation -->
<input type="url">

<!-- Phone number -->
<input type="tel">

<!-- Search input -->
<input type="search" placeholder="Search...">

Numeric Inputs

<!-- Number with min/max -->
<input type="number" min="1" max="100">

<!-- Range slider -->
<input type="range" min="0" max="100">

Date & Time Inputs

<!-- Date picker -->
<input type="date">

<!-- Time picker -->
<input type="time">

<!-- DateTime -->
<input type="datetime-local">

<!-- Month -->
<input type="month">

<!-- Week -->
<input type="week">

<!-- Color picker -->
<input type="color">

File Upload

<!-- Single file -->
<input type="file">

<!-- Multiple files -->
<input type="file" multiple>

<!-- Specific file types -->
<input type="file" accept=".jpg,.png,.gif">

<!-- Accept images only -->
<input type="file" accept="image/*">

<!-- Accept documents -->
<input type="file" accept=".pdf,.doc,.docx">

Selection Inputs

<!-- Checkbox -->
<input type="checkbox"> Accept terms

<!-- Radio button -->
<input type="radio" name="option"> Option 1
<input type="radio" name="option"> Option 2

<!-- Hidden input -->
<input type="hidden" name="user_id" value="123">

<!-- Submit button -->
<input type="submit" value="Submit">

<!-- Reset button -->
<input type="reset" value="Clear">

<!-- Custom button -->
<input type="button" value="Click Me">

Labels

Always use labels for accessibility:

<!-- Label linked to input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- Label wrapping input -->
<label>
    <input type="checkbox">
    I agree to terms
</label>

Text Areas

<!-- Basic textarea -->
<textarea rows="5" cols="40"></textarea>

<!-- With placeholder -->
<textarea placeholder="Enter your message..." rows="5"></textarea>

<!-- Read-only -->
<textarea readonly>Cannot edit this</textarea>

<!-- Disabled -->
<textarea disabled>This is disabled</textarea>

Select & Options

<!-- Basic dropdown -->
<select name="country">
    <option>-- Select Country --</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="ca">Canada</option>
</select>

<!-- Multiple selection -->
<select name="interests" multiple>
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</select>

<!-- Grouped options -->
<select name="city">
    <optgroup label="USA">
        <option>New York</option>
        <option>Los Angeles</option>
    </optgroup>
    <optgroup label="Canada">
        <option>Toronto</option>
        <option>Vancouver</option>
    </optgroup>
</select>

Datalist

<!-- Autocomplete dropdown -->
<input type="text" list="browsers" placeholder="Type a browser...">

<datalist id="browsers">
    <option>Chrome</option>
    <option>Firefox</option>
    <option>Safari</option>
    <option>Edge</option>
</datalist>

Fieldsets & Legends

Group related form elements:

<fieldset>
    <legend>Personal Information</legend>
    
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname">
    
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname">
</fieldset>

<fieldset>
    <legend>Contact</legend>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</fieldset>

Complete Form Example

<form action="/register" method="POST">
    <fieldset>
        <legend>User Registration</legend>
        
        <!-- Text inputs -->
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        
        <!-- Email input -->
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <!-- Password -->
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        
        <!-- Select -->
        <label for="country">Country:</label>
        <select id="country" name="country" required>
            <option>-- Select --</option>
            <option>USA</option>
            <option>Canada</option>
            <option>Mexico</option>
        </select>
        
        <!-- Radio buttons -->
        <p>Account Type:</p>
        <label>
            <input type="radio" name="account_type" value="free">
            Free
        </label>
        <label>
            <input type="radio" name="account_type" value="premium">
            Premium
        </label>
        
        <!-- Checkboxes -->
        <label>
            <input type="checkbox" name="newsletter">
            Subscribe to newsletter
        </label>
        <label>
            <input type="checkbox" name="terms" required>
            I agree to terms
        </label>
        
        <!-- Textarea -->
        <label for="bio">Bio:</label>
        <textarea id="bio" name="bio" rows="4"></textarea>
        
        <!-- Buttons -->
        <button type="submit">Register</button>
        <button type="reset">Clear</button>
    </fieldset>
</form>

Input Attributes

Attribute	Purpose	Example
required	Field must be filled	required
disabled	Disable field	disabled
readonly	Cannot edit	readonly
placeholder	Hint text	placeholder="Enter name"
value	Default value	value="default"
min	Minimum value	min="1"
max	Maximum value	max="100"
step	Increment step	step="5"
pattern	Regex pattern	pattern="[0-9]{3}"
maxlength	Max characters	maxlength="50"
minlength	Min characters	minlength="5"
autocomplete	Browser autocomplete	autocomplete="email"

Form Validation

<!-- HTML5 built-in validation -->
<input type="email" required>
<input type="text" pattern="[A-Z][a-z]+" title="Start with capital">
<input type="number" min="18" max="65">
<input type="text" minlength="5" maxlength="20">

Best Practices

✅ DO:

• Use <label> for all inputs
• Group related inputs with <fieldset>
• Use proper input types
• Add required for necessary fields
• Provide helpful placeholders
• Use clear button text (not just "Submit")

❌ DON'T:

• Use <div> instead of <label>
• Forget input name attributes
• Mix <form> nesting
• Use inputs without labels
• Make forms unnecessarily complex

---

Next Steps

→ Semantic HTML → HTML Attributes → Advanced HTML