Chapter 5 – Forms in HTML

HTML Forms Introduction

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Basic Form with Validation:

<form action="/submit" method="post">
  <label for="name">Full Name:*</label><br>
  <input type="text" id="name" name="name" required minlength="2" maxlength="50"><br><br>

  <label for="email">Email:*</label><br>
  <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"><br><br>

  <label for="age">Age:</label><br>
  <input type="number" id="age" name="age" min="13" max="120"><br><br>

  <input type="submit" value="Submit Form">
</form>

* Required fields

What Forms Are Used For:

• Collecting user information (registration, login)
• Gathering feedback and surveys
• Search functionality
• File uploads
• Contact forms
• E-commerce checkout

Form Submission:

Form data can be submitted using:

• GET method: Data sent in URL (visible, limited length)
• POST method: Data sent in request body (secure, unlimited length)

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
  <!-- Form elements go here -->
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.

Important Form Attributes:

• action: Specifies where to send form data
• method: HTTP method (GET or POST)
• name: Name of the form
• target: Where to display response

Complete Form Example:

<form action="/submit" method="post" name="contactForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Send">
</form>

All the different form elements are covered in this chapter.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

Common Input Types:

Input Element Examples:

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

<!-- Password input -->
<input type="password" placeholder="Enter password">

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

Here are some examples:

• <input type="text"> - Displays a single-line text input field
• <input type="radio"> - Displays a radio button (for selecting one of many choices)
• <input type="checkbox"> - Displays a checkbox (for selecting zero or more of many choices)
• <input type="submit"> - Displays a submit button (for submitting the form)
• <input type="button"> - Displays a clickable button

Text Fields

The <input type="text"> defines a single-line input field for text input.

Basic Text Field:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Note: The form itself is not visible. Also note that the default width of an input field is 20 characters.

Text Field Attributes:

• placeholder: Shows hint text when field is empty
• value: Sets default value
• maxlength: Maximum number of characters
• size: Width of input field
• required: Makes field mandatory

Enhanced Text Fields:

<!-- With placeholder -->
<input type="text" placeholder="Enter your name" name="username">

<!-- With default value -->
<input type="text" value="John Doe" name="fullname">

<!-- With size and maxlength -->
<input type="text" size="30" maxlength="50" name="address">

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Label Examples:

<!-- Explicit label association -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- Implicit label association -->
<label>Password: <input type="password" name="password"></label>

Label with Radio Buttons:

<form>
  <p>Choose your gender:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
</form>

Benefits of Using Labels:

• Improves accessibility for screen readers
• Makes forms easier to use on mobile devices
• Provides larger clickable areas for form controls
• Helps with form validation and error messages
• Improves overall user experience

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Basic Radio Button Example:

<p>Choose your favorite Web language:</p>
<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Radio Button Attributes:

• name: Groups related radio buttons (required)
• value: Value sent when form is submitted
• id: Unique identifier for the input
• checked: Pre-selects the radio button
• disabled: Disables the radio button

Pre-selected Radio Button:

<form>
  <p>Select your experience level:</p>
  <input type="radio" id="beginner" name="level" value="beginner">
  <label for="beginner">Beginner</label><br>
  <input type="radio" id="intermediate" name="level" value="intermediate" checked>
  <label for="intermediate">Intermediate</label><br>
  <input type="radio" id="advanced" name="level" value="advanced">
  <label for="advanced">Advanced</label>
</form>

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Basic Checkbox Example:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Checkbox Attributes:

• name: Name of the checkbox (can be same for multiple)
• value: Value sent when checkbox is checked
• id: Unique identifier for the input
• checked: Pre-checks the checkbox
• disabled: Disables the checkbox

Pre-checked Checkboxes:

<form>
  <p>Select your skills:</p>
  <input type="checkbox" id="html" name="skill" value="html" checked>
  <label for="html">HTML</label><br>
  <input type="checkbox" id="css" name="skill" value="css">
  <label for="css">CSS</label><br>
  <input type="checkbox" id="js" name="skill" value="js" checked>
  <label for="js">JavaScript</label>
</form>

Difference Between Radio Buttons and Checkboxes:

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

Basic Submit Button:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Submit Button Attributes:

• value: Text displayed on the button
• name: Name of the submit button
• disabled: Disables the submit button
• form: Associates with a form (if outside form)

Different Submit Button Styles:

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

<!-- Submit with custom styling -->
<input type="submit" value="Send Message">

<!-- Submit button with name -->
<input type="submit" name="submit_btn" value="Register">

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

Example with Name Attribute:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

This example will submit the value of the "First name" input field.

Example without Name Attribute:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

This example will NOT submit the value of the "First name" input field.

Why Name Attributes Matter:

• Data won't be sent without name attributes
• Server-side processing requires named fields
• Name attributes create key-value pairs in form data
• Multiple inputs can share the same name (for arrays)
• Radio buttons must have the same name to work as a group

Form Data Structure:

When submitted, form data becomes key-value pairs:

fname=John&lname=Doe&email=john@example.com

Mini Project

Create a registration form using the form elements you've learned!

Complete Registration Form:

<form action="/register" method="post">
  <h3>User Registration</h3>

  <label for="name">Full Name:</label><br>
  <input type="text" id="name" name="fullname" required><br><br>

  <label for="email">Email Address:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="dob">Date of Birth:</label><br>
  <input type="date" id="dob" name="dob"><br><br>

  <label>Gender:</label><br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br><br>

  <label>Skills:</label><br>
  <input type="checkbox" id="html" name="skill" value="html">
  <label for="html">HTML</label>
  <input type="checkbox" id="css" name="skill" value="css">
  <label for="css">CSS</label>
  <input type="checkbox" id="js" name="skill" value="js">
  <label for="js">JavaScript</label><br><br>

  <label for="file">Profile Picture:</label><br>
  <input type="file" id="file" name="profile_pic"><br><br>

  <input type="submit" value="Register Now">
</form>

Form Best Practices:

• Always include labels for accessibility
• Use appropriate input types (email, date, etc.)
• Add validation with the 'required' attribute
• Group related fields together
• Provide clear submit button text
• Test forms on different devices

Additional Form Elements:

Besides input elements, HTML forms support:

• <textarea>: Multi-line text input
• <select>: Dropdown lists
• <button>: Clickable buttons
• <fieldset>: Group related form elements
• <legend>: Caption for fieldsets

Example with Additional Elements:

<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="usa">USA</option>
      <option value="canada">Canada</option>
    </select><br><br>
    <button type="submit">Send Message</button>
  </fieldset>
</form>

Working Contact Form Example

This is a complete, working contact form with proper validation, accessibility features, and user feedback.

Complete Contact Form Code:

<form id="contactForm" action="#" method="post" novalidate>
  <fieldset>
    <legend>Contact Information</legend>

    <label for="fullname">Full Name:*</label><br>
    <input type="text" id="fullname" name="fullname" required minlength="2" maxlength="50" aria-describedby="nameHelp">
    <div id="nameHelp" class="help-text">Enter your full name (2-50 characters)</div><br>

    <label for="email">Email Address:*</label><br>
    <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" aria-describedby="emailHelp">
    <div id="emailHelp" class="help-text">We'll never share your email with anyone else.</div><br>

    <label for="phone">Phone Number:</label><br>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890"><br><br>

    <label for="subject">Subject:*</label><br>
    <select id="subject" name="subject" required>
      <option value="">Choose a subject</option>
      <option value="general">General Inquiry</option>
      <option value="support">Technical Support</option>
      <option value="feedback">Feedback</option>
    </select><br><br>

    <label for="message">Message:*</label><br>
    <textarea id="message" name="message" required minlength="10" maxlength="500" rows="5" cols="50" aria-describedby="messageHelp"></textarea>
    <div id="messageHelp" class="help-text">Please enter your message (10-500 characters)</div><br>

    <label>
      <input type="checkbox" name="newsletter" value="yes">
      Subscribe to our newsletter
    </label><br><br>

    <button type="submit">Send Message</button>
    <button type="reset">Reset Form</button>
  </fieldset>
</form>

<!-- Validation feedback -->
<div id="formFeedback"></div>

Interactive Contact Form:

Form Validation Features:

• Required Fields: Marked with * and validated on submission
• Pattern Validation: Email format and phone number patterns
• Length Validation: Minimum and maximum character limits
• Real-time Feedback: Visual indicators for invalid fields
• Accessibility: ARIA labels and screen reader support
• User Feedback: Success/error messages after submission

Practice Exercises

Exercise 1: Contact Form

Create a contact form with text inputs, email, textarea, and submit button.

<form action="/submit-contact" method="post">
  <h3>Contact Us</h3>

  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required><br><br>

  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="subject">Subject:</label>
  <input type="text" id="subject" name="subject" required><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="5" cols="40" required></textarea><br><br>

  <input type="submit" value="Send Message">
</form>

Exercise 2: Survey Form with Radio Buttons

Create a survey form asking users about their HTML experience level using radio buttons.

<form action="/submit-survey" method="post">
  <h3>HTML Learning Survey</h3>

  <label>What's your HTML experience level?</label><br>
  <input type="radio" id="beginner" name="experience" value="beginner">
  <label for="beginner">Beginner - Just starting</label><br>

  <input type="radio" id="intermediate" name="experience" value="intermediate">
  <label for="intermediate">Intermediate - Know the basics</label><br>

  <input type="radio" id="advanced" name="experience" value="advanced">
  <label for="advanced">Advanced - Build complex websites</label><br><br>

  <label>Which HTML topics interest you most?</label><br>
  <input type="checkbox" id="forms" name="topics" value="forms">
  <label for="forms">Forms</label><br>

  <input type="checkbox" id="tables" name="topics" value="tables">
  <label for="tables">Tables</label><br>

  <input type="checkbox" id="semantic" name="topics" value="semantic">
  <label for="semantic">Semantic HTML</label><br><br>

  <input type="submit" value="Submit Survey">
</form>

Exercise 3: Registration Form

Create a user registration form with various input types including password, date, and select dropdown.

<form action="/register" method="post">
  <h3>User Registration</h3>

  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="3"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required minlength="8"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="birthdate">Birth Date:</label>
  <input type="date" id="birthdate" name="birthdate"><br><br>

  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="">Select a country</option>
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
    <option value="au">Australia</option>
  </select><br><br>

  <label>Preferred contact method:</label><br>
  <input type="radio" id="email-contact" name="contact" value="email" checked>
  <label for="email-contact">Email</label><br>

  <input type="radio" id="phone-contact" name="contact" value="phone">
  <label for="phone-contact">Phone</label><br><br>

  <input type="checkbox" id="newsletter" name="newsletter" value="yes">
  <label for="newsletter">Subscribe to newsletter</label><br><br>

  <input type="submit" value="Register">
  <input type="reset" value="Clear Form">
</form>

Exercise 4: Search Form

Create a search form with text input, select dropdown for categories, and search button.

<form action="/search" method="get">
  <h3>Search Our Site</h3>

  <label for="search-query">Search for:</label>
  <input type="search" id="search-query" name="q" placeholder="Enter search terms..." required><br><br>

  <label for="category">Category:</label>
  <select id="category" name="category">
    <option value="all">All Categories</option>
    <option value="tutorials">Tutorials</option>
    <option value="examples">Code Examples</option>
    <option value="reference">Reference</option>
    <option value="faq">FAQ</option>
  </select><br><br>

  <label>Search in:</label><br>
  <input type="checkbox" id="title" name="search_in" value="title" checked>
  <label for="title">Titles</label>

  <input type="checkbox" id="content" name="search_in" value="content" checked>
  <label for="content">Content</label>

  <input type="checkbox" id="tags" name="search_in" value="tags">
  <label for="tags">Tags</label><br><br>

  <input type="submit" value="Search">
  <input type="reset" value="Clear">
</form>