Forms and Inputs

Forms and Inputs

Forms collect user input. They are the primary way users interact with web applications - from login pages to search bars to checkout flows.

Basic Form Structure

A form wraps input elements and specifies where and how the data is sent:

<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">Send</button>
</form>

The action attribute specifies the URL that receives the form data. The method attribute determines whether data goes in the URL (GET) or request body (POST).

Input Types

HTML5 provides many input types that provide built-in validation and specialized keyboards on mobile:

<input type="text">       <!-- Plain text -->
<input type="password">   <!-- Hidden characters -->
<input type="email">      <!-- Email validation -->
<input type="number">     <!-- Numbers only -->
<input type="date">       <!-- Date picker -->
<input type="tel">        <!-- Phone keyboard on mobile -->
<input type="url">        <!-- URL validation -->
<input type="range">      <!-- Slider -->
<input type="color">      <!-- Color picker -->
<input type="file">       <!-- File upload -->

Other Form Elements

<select name="country">
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
</select>

<textarea name="message" rows="5" cols="40"></textarea>

<input type="checkbox" name="agree" value="yes"> I agree
<input type="radio" name="plan" value="free"> Free
<input type="radio" name="plan" value="pro"> Pro

Validation

HTML5 provides built-in validation with attributes like required, minlength, maxlength, min, max, and pattern. These work without any JavaScript.

Key Points

• <form> wraps inputs and specifies the action URL and HTTP method.
• <label> elements improve accessibility and click targets.
• HTML5 input types provide built-in validation and mobile keyboards.
• <select>, <textarea>, checkboxes, and radio buttons handle other input types.
• Use the required attribute and pattern matching for client-side validation.