Lesson 15: HTML Forms Part 1

Learn how to create HTML forms to collect user input

Start Learning
Previous Lesson Next Lesson

Understanding HTML Forms

HTML forms are essential for collecting user input on websites. They enable various interactions like user registration, contact forms, surveys, and search functionality.

Key Insight: Forms are the primary way users send data to web servers. The data collected is processed by server-side scripts (PHP, Python, Node.js, etc.) to perform actions like storing information in databases or sending emails.

How Forms Work

The typical form workflow:

  • User Input: Visitors enter data into form fields
  • Submission: Data is sent to a server when the form is submitted
  • Processing: Server-side scripts process the submitted data
  • Response: Server sends a response back to the user (confirmation page, error message, etc.)
<!DOCTYPE html>
<html>
<head>
    <title>Basic Form Example</title>
</head>
<body>
    <form action="/submit-form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br>
        
        <input type="submit" value="Submit">
    </form>
</body>
</html>

The Form Element

The <form> element defines an HTML form and contains attributes that control how data is submitted:

Form Element Attributes
Attribute Description Values
action URL where form data is sent Absolute or relative URL
method HTTP method used to send data GET (default) or POST
enctype Encoding type for form data application/x-www-form-urlencoded (default), multipart/form-data, text/plain
target Where to display the response _blank, _self, _parent, _top
autocomplete Enable/disable autocomplete on, off
novalidate Disable form validation Boolean (no value needed)

GET vs POST Methods

Method Description Use Cases
GET Data is appended to the URL as query parameters. Limited to about 2048 characters. Data is visible in the URL. Search forms, retrieving data (non-sensitive)
POST Data is sent in the HTTP request body. No size limitations. Data is not visible in the URL. Forms with sensitive data, file uploads, large amounts of data 
<!-- GET method example -->
<form action="/search" method="get">
  <input type="text" name="query" placeholder="Search...">
  <button type="submit">Search</button>
</form>

<!-- POST method example -->
<form action="/register" method="post" enctype="multipart/form-data">
  <!-- Form fields here -->
</form>

Input Elements

The <input> element is the most versatile form element. Its behavior depends on the type attribute:

Common Input Types
Type Description Example
text Single-line text input
password Masked text input
email Email address input with validation
number Numeric input with spinner controls
date Date picker control
time Time selection control
color Color picker
range Slider control
checkbox Toggle switch for multiple selections Option
radio Option button for single selection Option
file File upload control
submit Form submission button
reset Button to reset form fields

Text Input Example

<form action="/submit" method="post">
  <div class="form-group">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
  </div>
  
  <div class="form-group">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" minlength="8" required>
  </div>
  
  <div class="form-actions">
    <input type="submit" value="Login">
    <input type="reset" value="Clear">
  </div>
</form>

Result:

HTML5 Input Types

Date & Time Pickers

Selection Controls

Textarea Element

The <textarea> element creates a multi-line text input field, perfect for longer content like comments or messages.

Attribute Description
rows Number of visible text lines
cols Number of visible characters per line
maxlength Maximum number of characters allowed
minlength Minimum number of characters required
placeholder Hint text displayed when empty
readonly Makes textarea non-editable
disabled Disables the textarea

Textarea Example

<form action="/feedback" method="post">
  <div class="form-group">
    <label for="message">Your Feedback:</label>
    <textarea id="message" name="message" rows="5" 
              placeholder="Enter your feedback here..." 
              minlength="10" maxlength="500" required>
    </textarea>
  </div>
  <button type="submit">Submit Feedback</button>
</form>

Result:

Checkboxes and Radio Buttons

Checkboxes and radio buttons allow users to make selections:

Element Description Key Attributes
Checkbox Allows multiple selections from a set of options checked (pre-select), value
Radio Button Allows only one selection from a set of options name (must be same for group), checked, value

Selection Examples

<!-- Checkbox Example -->
<form>
  <p>Select your interests:</p>
  <label><input type="checkbox" name="interest" value="sports"> Sports</label><br>
  <label><input type="checkbox" name="interest" value="music" checked> Music</label><br>
  <label><input type="checkbox" name="interest" value="books"> Books</label>
</form>

<!-- Radio Button Example -->
<form>
  <p>Select your preferred contact method:</p>
  <label><input type="radio" name="contact" value="email" checked> Email</label><br>
  <label><input type="radio" name="contact" value="phone"> Phone</label><br>
  <label><input type="radio" name="contact" value="mail"> Postal Mail</label>
</form>

Result:

Checkboxes:

Select your interests:



Radio Buttons:

Select your preferred contact method:



Select Elements

The <select> element creates a dropdown list for users to choose from predefined options.

Element Description Attributes
select Container for dropdown options name, multiple, size, required
option Individual choices in the dropdown value, selected, disabled
optgroup Groups related options label (required)

Select Element Examples

Basic Dropdown

Multiple Selection

Grouped Options

Practical Exercise: Create a Contact Form

Create a contact form with the following fields:

Your Task:

Create a contact form with:

  1. Name field (text input)
  2. Email field (email input)
  3. Subject field (text input)
  4. Message field (textarea)
  5. Preferred contact method (radio buttons: Email, Phone)
  6. Subscribe checkbox
  7. Country dropdown
  8. Submit and reset buttons

Solution:

Form Best Practices

Follow these guidelines to create effective, accessible forms:

Use Labels Properly: Always associate labels with form controls using the for attribute. This improves accessibility and usability.
Group Related Fields: Use <fieldset> and <legend> to group related form controls.
Provide Clear Instructions: Use placeholder text and helper text to guide users.
Implement Validation: Use HTML5 validation attributes like required, pattern, min, and max.
Make Forms Accessible: Ensure keyboard navigation works properly and provide sufficient color contrast.
Responsive Design: Make sure your forms work well on all device sizes. 
<!-- Accessible form example with fieldset -->
<form>
  <fieldset>
    <legend>Personal Information</legend>
    
    <div class="form-group">
      <label for="fullname">Full Name:</label>
      <input type="text" id="fullname" name="fullname" required>
    </div>
    
    <div class="form-group">
      <label for="user-email">Email Address:</label>
      <input type="email" id="user-email" name="email" required>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Preferences</legend>
    
    <div class="form-group">
      <label>Communication Method:</label>
      <label><input type="radio" name="comm" value="email" checked> Email</label>
      <label><input type="radio" name="comm" value="sms"> SMS</label>
      <label><input type="radio" name="comm" value="phone"> Phone</label>
    </div>
    
    <div class="form-group">
      <label>Newsletter:</label>
      <label><input type="checkbox" name="newsletter" value="yes" checked> Subscribe to newsletter</label>
    </div>
  </fieldset>
  
  <div class="form-actions">
    <button type="submit">Submit</button>
  </div>
</form>
Previous Lesson Next Lesson