HTML Forms and Input

Learning Objectives

• Understand the purpose and structure of HTML forms
• Master different input types and their attributes
• Learn form validation techniques
• Create accessible and user-friendly forms
• Handle form submission and data processing

What are HTML Forms?

• Essential for user interaction on websites
• Used for login, registration, contact forms, surveys
• Can collect various types of data
• Provide validation and user feedback

<form action="/submit" method="post">
  <input type="text" name="username">
    <button type="submit">Submit</button>
  </form>

Basic Form Structure

<form action="destination.php" method="post">
  <!-- Form elements go here -->
  <input type="text" name="field_name">
    <button type="submit">Submit Form</button>
  </form>

• action: Where the form data is sent
• method: How the data is sent (GET or POST)
• name: Identifies the field for processing

Form Methods: GET vs POST

<!-- GET Method -->
<form action="/search" method="get">
  <input type="text" name="query">
  </form>
  <!-- POST Method -->
  <form action="/register" method="post">
    <input type="text" name="username">
    </form>

• GET: Data visible in URL, limited size, for searches
• POST: Data hidden, unlimited size, for sensitive data

Text Input Fields

<input type="text" name="username" placeholder="Enter username">
  <input type="email" name="email" placeholder="Enter email">
    <input type="password" name="password" placeholder="Enter
    password">
    <input type="tel" name="phone" placeholder="Enter phone number">

Common Input Attributes

<input type="text"
name="username"
placeholder="Enter username"
required
maxlength="20"
minlength="3"
value="default_value"
disabled
>

• required: Field must be filled
• placeholder: Hint text
• maxlength/minlength: Character limits
• value: Default value

Textarea for Long Text

<textarea name="message" rows="4" cols="50" placeholder="Enter your
message"></textarea>

• Used for longer text input
• rows and cols set dimensions
• Can be resized by users

Select Dropdown

<select name="country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>

Radio Buttons

<p>Select your gender:</p>
<input type="radio" name="gender" value="male" id="male">
  <label for="male">Male</label>
  <input type="radio" name="gender" value="female" id="female">
    <label for="female">Female</label>
    <input type="radio" name="gender" value="other" id="other">
      <label for="other">Other</label>

Checkboxes

<p>Select your interests:</p>
<input type="checkbox" name="interests" value="sports" id="sports">
  <label for="sports">Sports</label>
  <input type="checkbox" name="interests" value="music" id="music">
    <label for="music">Music</label>
    <input type="checkbox" name="interests" value="reading" id="reading">
      <label for="reading">Reading</label>

File Upload

<input type="file" name="upload" accept="image/*">
  <input type="file" name="document" accept=".pdf,.doc,.docx">
    <input type="file" name="multiple" multiple>

• accept specifies allowed file types
• multiple allows multiple file selection

Date and Time Inputs

<input type="date" name="birthdate">
  <input type="time" name="meeting_time">
    <input type="datetime-local" name="event_datetime">
      <input type="month" name="start_month">

Number and Range Inputs

<input type="number" name="age" min="0" max="120" step="1">
  <input type="range" name="rating" min="1" max="10" value="5">
    <input type="color" name="favorite_color">

Proper Label Usage

<!-- Method 1: Label with for attribute -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
  <!-- Method 2: Wrapping label -->
  <label>
    Email: <input type="email" name="email">
  </label>

• Labels improve accessibility
• Clicking label focuses the input
• Required for screen readers

HTML5 Form Validation

<input type="email" name="email" required>
<input type="text" name="username" pattern="[A-Za-z]{3,}" title="3+ letters
only">
<input type="number" name="age" min="18" max="65">
<input type="url" name="website">

• required: Field must be filled
• pattern: Custom validation with regex
• min/max: Numeric limits
• Browser provides automatic validation

Fieldset and Legend

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    </fieldset>

• Groups related form fields
• Improves form organization
• Better accessibility

Form Buttons

<button type="submit">Submit Form</button>
<button type="reset">Clear Form</button>
<button type="button">Custom Action</button>
<input type="submit" value="Submit">
  <input type="reset" value="Reset">

Form Accessibility Best Practices

• Always use <label> elements
• Provide clear error messages
• Use semantic HTML elements
• Ensure keyboard navigation works
• Add ARIA attributes when needed
• Test with screen readers

Form Styling Considerations

• Use consistent spacing and alignment
• Make inputs large enough to click/tap
• Provide visual feedback for focus states
• Use clear, readable fonts
• Ensure sufficient color contrast
• Make forms responsive for mobile devices

Form Security Considerations

• Always validate on the server side
• Use HTTPS for sensitive data
• Implement CSRF protection
• Sanitize user input
• Use appropriate input types
• Consider rate limiting

Form Processing Options

• Server-side: PHP, Python, Node.js, etc.
• Client-side: JavaScript form handling
• Third-party services: Formspree, Netlify Forms
• Email: mailto: links for simple forms

<!-- Simple email form -->
<form action="mailto:contact@example.com" method="post"
enctype="text/plain">
<input type="text" name="name">
  <button type="submit">Send Email</button>
</form>

Common Form Patterns

• Login forms: Username/email + password
• Registration forms: Multiple fields with validation
• Contact forms: Name, email, message
• Search forms: Query input + filters
• Survey forms: Multiple question types
• File upload forms: File input + metadata

Testing Your Forms

• Test all input types and validation
• Check form submission and data handling
• Test with different browsers and devices
• Verify accessibility with screen readers
• Test error handling and edge cases
• Check form performance and loading times

Common Form Issues and Solutions

• Form not submitting: Check action URL and method
• Validation not working: Verify input types and attributes
• Styling issues: Check CSS specificity and browser compatibility
• Accessibility problems: Ensure proper labels and ARIA attributes
• Mobile issues: Test touch targets and viewport settings