HTML Forms | HTML CSS Guide

Love your Forms

In the 20/20 section I didn't venture to include any form features. Forms represent the all important 'call to action' for a page. Historically, putting forms together was often a fairly dreary job for a web designer. However, recent enhancements in HTML have made this process more creative and it is a very important part of web design as it is often how your website makes its cash!

View Demos

HTML forms are used to collect user input. The form data is then sent to a server for processing. This tutorial covers the core features of HTML forms.

Basic Form Structure

A form in HTML is created using the <form> element. Here's a simple form example:

          <form action="/submit_form" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <input type="submit" value="Submit">
    </form>

<form>: The container for form elements.
action: Specifies the URL where the form data is sent.
method: Specifies the HTTP method (GET or POST).

Input Types

HTML provides various input types to collect different kinds of data:

Text Input

Password Input

Email Input

Number Input

Date Input

Form Controls

HTML forms include various controls for user input:

Checkboxes

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

Radio Buttons

      <label>Gender:</label><br>
<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><br>

      <label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Text Area

      <label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50">

Form Attributes

Forms have several important attributes:

action: URL to send the form data.
method: HTTP method (GET, POST).
autocomplete: Enables or disables autocomplete.
target: Specifies where to display the response (e.g., _blank for new window).

Grouping Form Data

You can group form elements using the <fieldset> and <legend> elements:

      <fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
</fieldset>

Labels and Accessibility

Using elements enhances accessibility:

      <label for="username">Username:</label>
<input type="text" id="username" name="username">

The for attribute of the should match the id of the corresponding input element.

Form Validation

HTML5 provides built-in form validation:

Required Fields: Use the required attribute.

Pattern Matching: Use the pattern attribute to specify a regular expression.

Input Length: Use minlength and maxlength.

Submit and Reset Buttons

Forms usually include a submit button to send data and a reset button to clear it:

      <input type="submit" value="Submit">
<input type="reset" value="Reset">

Example Form

Here's a complete example of a form with various input types and validation:

      <!DOCTYPE html></span>
<html>
<head>
    <title>Complete Form Example</title>
</head>
<body>
    <h2>Registration Form</h2>
    <form action="/submit_form" method="post" autocomplete="on">
        <fieldset>
            <legend>Personal Information</legend>
            <label for="fname">First name:</label>
            <input type="text" id="fname" name="fname" required><br><br>
            <label for="lname">Last name:</label>
            <input type="text" id="lname" name="lname" required><br><br>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required><br><br>
            <label for="birthday">Birthday:</label>
            <input type="date" id="birthday" name="birthday"><br><br>
        </fieldset>

        <fieldset>
            <legend>Account Information</legend>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" minlength="5" maxlength="15" required><br><br>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required><br><br>
        </fieldset>

        <input type="submit" value="Register">
        <input type="reset" value="Reset">
    </form>
</body>
</html>

More Examples

More examples can be found at:

HTML5 Form Element Demos