📄 Lesson 6: Forms & Inputs

Introduction to Forms

Forms allow users to input and submit data to a server. Use the <form> tag to create a form, and various input elements for different types of data.

Basic Form Structure

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

Form Attributes

action: URL where the form data is sent
method: HTTP method - GET or POST
enctype: How data is encoded (important for file uploads)
target: Where to open the response (_blank, _self, etc.)

Input Types

Text Inputs

<!-- Single-line text input -->
<input type="text" placeholder="Enter your name">

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

<!-- Multi-line text area -->
<textarea rows="5" cols="40"></textarea>

<!-- Email input with validation -->
<input type="email" placeholder="your@email.com">

<!-- URL input -->
<input type="url" placeholder="https://example.com">

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

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

Text Input:

Email Input:

Number Input:

Message:

Selection Inputs

Checkboxes

<label>
    <input type="checkbox" name="agree">
    I agree to the terms
</label>

<label>
    <input type="checkbox" name="interests" value="sports">
    Sports
</label>
<label>
    <input type="checkbox" name="interests" value="music">
    Music
</label>
        

I agree to the terms

Sports
Music

Radio Buttons

<label>
    <input type="radio" name="color" value="red">
    Red
</label>
<label>
    <input type="radio" name="color" value="blue">
    Blue
</label>
<label>
    <input type="radio" name="color" value="green">
    Green
</label>
        

Red
Blue
Green

Drop-down Menus (Select)

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="">Select a country</option>
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="mexico">Mexico</option>
</select>
        

Country:

Date & Time Inputs

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

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

<!-- Date and time -->
<input type="datetime-local">

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

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

Date:

Time:

Other Inputs

<!-- Color picker -->
<input type="color" value="#667eea">

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

<!-- File upload -->
<input type="file" accept="image/*">

<!-- Hidden input (not visible) -->
<input type="hidden" name="user_id" value="123">
        

Color:

Volume (0-100):

Input Attributes

name: Name of the input (sent with form data)
id: Unique identifier (use with labels)
value: Default or current value
placeholder: Helper text in the input
required: Field must be filled before submit
disabled: Input is disabled and can't be used
readonly: Input can't be edited
maxlength: Maximum number of characters
min/max: Minimum/maximum values for number inputs

Labels

Always use labels with inputs for better accessibility and usability:

<!-- Good: Label associated with input -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- Good: Label wraps input -->
<label>
    <input type="checkbox">
    Remember me
</label>
        

Form Buttons

<!-- Submit button (sends form) -->
<button type="submit">Submit</button>

<!-- Reset button (clears form) -->
<button type="reset">Clear Form</button>

<!-- Regular button -->
<button type="button">Click Me</button>
        

Complete Form Example

<form action="/contact" method="POST">
    <div>
        <label for="name">Full Name:</label>
        <input type="text" id="name" name="name" required>
    </div>
    
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    
    <div>
        <label for="subject">Subject:</label>
        <select id="subject" name="subject">
            <option value="sales">Sales</option>
            <option value="support">Support</option>
        </select>
    </div>
    
    <div>
        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5"></textarea>
    </div>
    
    <button type="submit">Send Message</button>
</form>
        

Key Takeaways

Use <form> to create a form with action and method
Use various input types for different data (text, email, number, etc.)
Use labels for better accessibility and usability
Use required attribute for validation
Use select for drop-down menus, textarea for multi-line text
Always test forms to ensure they work correctly

← Back to Course | ← Previous | Next: CSS Introduction →