HTML Exercises - Forms

In this set of exercises, which accompanies our HTML Forms and Form Controls article, we will build several HTML pages, each having a different kind of form.

We start with a simple web page that contains an empty form, and progress toward creating complex forms with multiple fields.

Exercises text

1. An empty form (View the solution)

Create an HTML page that contains an empty form that:

  • Submits the data to the process-form page
  • Uses the post method to transfer the data

2. A form with a submit button (View the solution)

Create an HTML page that contains a form that has a submit button.

3. A form with a text field and a submit button (View the solution)

Create an HTML page that holds a form with:

  • One text field for entering a name
  • A button that submits the form

4. A form with a label, a text field and a submit button (View the solution)

Create an HTML page that contains a form that has:

  • One label for a text field
  • One text field for accepting a name
  • A submit button

5. A login form with email and password fields (View the solution)

Create an HTML page that has a form that represents a login form. The form has the following fields:

  • Labels for email and password fields
  • An email field
  • A password field
  • A button for submitting the form

6. A form with dropdown and text area components (View the solution)

Create an HTML page that contains a form that has:

  • Labels for dropdown and text area fields
  • A dropdown field
  • A text area field
  • A button that submits a form

7. A registration form (View the solution)

Create an HTML page with a form that represents a registration form. The form has the following fields:

  • A name field
  • An email field
  • A password field
  • A message text area field
  • A Send/Submit button

Solutions

1. An empty form

The forms-exercise-01.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>

<body>
    <h1>An empty form</h1>

    <!-- An empty form with a post method -->
    <form action="process-form" method="post">
    
    </form>

</body>

</html>

Explanation

The following code represents a form that submits its data to the process-form page and sends its data using the POST HTTP request.

<form action="process-form" method="post">

</form>

Currently, this form has no fields, and acts as a starting point for our next exercise.

2. A form with a submit button

The forms-exercise-02.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>

<body>
    <h1>A form with a submit button</h1>

    <!-- A form with a submit button -->
    <form action="process-form" method="post">
        <!-- A button that submits the form -->
        <button>Submit</button>
    </form>

</body>

</html>

Explanation

Our HTML page has a form that expands on our previous exercise and introduces an additional <button> element that submits the form:

<!-- A button that submits the form -->
<button>Submit</button>

By default, a regular <button> element inside the form is the button that submits a form. If we want to explicitly state the button's role, we can rewrite the above code and add the type="submit" attribute to the button:

<!-- A button that submits the form -->
<button type="submit">Submit</button>

3. A form with a text field and a submit button

The forms-exercise-03.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>

<body>
    <h1>A form with a text field and a submit button</h1>
 
    <!-- A form with a text box and a submit button -->
    <form action="process-form" method="post">
        <!-- A text box field -->
        <input type="text" name="my-name" id="my-name">
        <!-- A button that submits the form -->
        <button type="submit">Submit</button>
    </form>

</body>

</html>

Explanation

Our HTML page now has a form that stores a single text field control. This field is created using the <input> element, and can be used to accept a name:

<input type="text" name="my-name" id="my-name">

In production code, the text field should have the name and id attributes. The name attribute is used by a processing script to fetch the value, and the id attribute is used by labels, JavaScript code and when applying CSS styles to our control.

4. A form with a label, a text field and a submit button

The forms-exercise-04.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>

<body>
    <h1>A form with a label, text field and a submit button</h1>

    <!-- A form with a label, a text box and a submit button -->
    <form action="process-form" method="post">
        <!-- A label for the text box whose id is my-name -->
        <label for="my-name">Name:</label>
        <!-- A text box field -->
        <input type="text" name="my-name" id="my-name">
        <!-- A button that submits the form -->
        <button type="submit">Submit</button>
    </form>

</body>

</html>

Explanation

This HTML page has a form, which is similar to the form in our previous exercise, but with one important addition - it introduces the <label> element for the text field:

<label for="my-name">Name:</label>

In our example, the <label> component is associated with the <input> component using the for="my-name" attribute. The label serves as informative text, is used by screen readers, and when we click on a label, the associated control receives focus.

5. A login form with email and password fields

The forms-exercise-05.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>

<body>
    <h1>A login form</h1>

    <!-- A login form with email and password fields -->
    <form action="process-form" method="post">
        <!-- A label for the email text box -->
        <label for="my-email">Email:</label>
        <!-- An email text box field -->
        <input type="email" name="my-email" id="my-email">
        <!-- A label for the password field -->
        <label for="my-password">Password:</label>
        <!-- A password field -->
        <input type="password" name="my-password" id="my-password">
        <!-- A button that submits the form -->
        <button type="submit">Submit</button>
    </form>

</body>

</html>

Explanation

Our HTML page now has a form that introduces email and password fields.

The email field is created using the <input> element and a type="email" attribute. As before, this field should also have the name and id attributes:

<input type="email" name="my-email" id="my-email">

The password field is also created using the <input> element with a type attribute set to the value of "password":

<input type="password" name="my-password" id="my-password">

The form also has labels for both the email and password fields:

<!-- A label for the email text box -->
<label for="my-email">Email:</label>

<!-- A label for the password field -->
<label for="my-password">Password:</label>

And a submit button, usually located just before the closing </form> tag:

<!-- A button that submits the form -->
<button type="submit">Submit</button>

6. A form with a dropdown (select) and text area components

The forms-exercise-06.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>

<body>
    <h1>A form with dropdown and text area fields</h1>

    <!-- A form with dropdown and text area fields -->
    <form action="process-form" method="post">
        <!-- A label for the dropdown control -->
        <label for="my-dropdown">Choose an option:</label>
        <!-- A dropdown control -->
        <select name="my-dropdown" id="my-dropdown">
            <option value="">--Choose an option--</option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
        </select>
        <!-- A label for the text area field -->
        <label for="my-textarea">Enter your message:</label>
        <!-- A text area control, 10 rows high and 50 characters wide -->
        <textarea name="my-textarea" id="my-textarea" rows="10" cols="50">

        </textarea>
        <!-- A button that submits the form -->
        <button type="submit">Submit</button>
    </form>

</body>

</html>

Explanation

Our HTML page has a form with two input fields; one is a dropdown (a select) component and the other is a text area component.

The dropdown field (the select field), is created using the <select> element. Multiple options within that component are created using multiple <option> elements. The value for each <option> element is specified using the value="some-value-text" attribute. As before, the entire <select> component comes with name and id attributes.

<select name="my-dropdown" id="my-dropdown">
    <option value="">--Choose an option--</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

The second component is a text area component that can accept multi-line text. A text area component is created using the <textarea> element, which displays ten rows of text and is 50 character columns wide:

<textarea name="my-textarea" id="my-textarea" rows="10" cols="50">
</textarea>

7. A registration form

The forms-exercise-07.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>

<body>
    <h1>A registration form</h1>

    <!-- A registration form with usual input fields -->
    <form action="process-form" method="post">
        <!-- A label for the my-name-field text box -->
        <label for="my-name-field">Name:</label>
        <!-- A text box field that represents a name -->
        <input type="text" name="my-name-field" id="my-name-field">
        <!-- A label for the email field -->
        <label for="my-email-field">Email:</label>
        <!-- An email field -->
        <input type="email" name="my-email-field" id="my-email-field">
        <!-- A label for the password field -->
        <label for="my-password-field">Password:</label>
        <!-- A password field -->
        <input type="password" name="my-password-field" id="my-password-field">
        <!-- A label for the text area message field -->
        <label for="my-message-field">Enter your message:</label>
        <!-- A text area control, 10 rows high and 50 characters wide -->
        <textarea name="my-message-field" id="my-message-field" rows="10" cols="50">

        </textarea>
        <!-- A button that submits the form -->
        <button type="submit">Submit</button>
    </form>

</body>

</html>

Explanation

Finally, in our last exercise, we created an HTML page with a form that is a summary of all previous forms and exercises. This form has multiple input fields, usually found on registration forms:

<form action="process-form" method="post">
    <!-- A label for the my-name-field text box -->
    <label for="my-name-field">Name:</label>
    <!-- A text box field that represents a name -->
    <input type="text" name="my-name-field" id="my-name-field">
    <!-- A label for the email field -->
    <label for="my-email-field">Email:</label>
    <!-- An email field -->
    <input type="email" name="my-email-field" id="my-email-field">
    <!-- A label for the password field -->
    <label for="my-password-field">Password:</label>
    <!-- A password field -->
    <input type="password" name="my-password-field" id="my-password-field">
    <!-- A label for the text area message field -->
    <label for="my-message-field">Enter your message:</label>
    <!-- A text area control, 10 rows high and 50 characters wide -->
    <textarea name="my-message-field" id="my-message-field" rows="10" cols="50">
    </textarea>
    <!-- A button that submits the form -->
    <button type="submit">Submit</button>
</form>

Summary

In this set of exercises, we created several HTML pages with different kinds of <form> elements, ranging from an empty form to multi-field forms, having text fields, password fields, dropdown boxes, and text area fields.

For more information, and in-depth explanation of the HTML <form> element, you can check out our HTML forms tutorial.