HTML Forms and User Input

📖

Lesson Content

Forms are one of the most important parts of an interactive website. They allow users to communicate information to a website by entering text, selecting options, uploading information, and submitting data.

Examples of forms include:

Login forms
Registration forms
Contact forms
Search forms
Newsletter subscription forms
Online application forms
Checkout forms
Feedback forms
Student admission forms

HTML provides several elements specifically designed for collecting user input.

1. The HTML Form Element

The <form> element creates a container for user input controls.

<form>
    <!-- Form controls go here -->
</form>

A form commonly contains labels, input fields, buttons, textareas, select menus, and other form controls.

2. The Action Attribute

The action attribute specifies where the form data should be sent after the user submits the form.

<form action="/submit-form.php">
    ...
</form>

In a real application, the destination may be a PHP file, API endpoint, WordPress handler, or another server-side application.

3. The Method Attribute

The method attribute determines how form data is submitted.

The two common methods are GET and POST.

GET

GET sends form information as part of the URL.

<form action="/search" method="get">
    <input type="search" name="query">
    <button type="submit">Search</button>
</form>

GET is commonly useful for searches and requests where the submitted information can safely appear in the URL.

POST

POST sends the submitted data in the request body rather than placing it directly in the URL.

<form action="/register" method="post">
    ...
</form>

POST is commonly used when submitting information that changes data or when the data should not be placed in the URL.

Important: Neither GET nor POST by itself makes sensitive data secure. Websites handling sensitive information should use HTTPS and appropriate server-side security.

4. The Label Element

The <label> element identifies a form control and improves accessibility and usability.

<label for="full-name">Full Name</label>
<input type="text" id="full-name" name="full_name">

The for attribute should match the id of the related form control.

Clicking the label can then focus the associated input.

5. Text Input

A basic text field can be created with:

<input type="text" name="username">

The name attribute is particularly important because it identifies the submitted value.

<input type="text" name="username" value="Ade">

When the form is submitted, the server can receive the value associated with the name username.

6. Common Input Types

HTML provides many input types for different kinds of information.

Text

<input type="text" name="name">

Email

<input type="email" name="email">

Password

<input type="password" name="password">

Number

<input type="number" name="age">

Date

<input type="date" name="date_of_birth">

Telephone

<input type="tel" name="phone">

URL

<input type="url" name="website">

Search

<input type="search" name="query">

Checkbox

<label>
    <input type="checkbox" name="terms">
    I agree to the terms
</label>

Radio Button

Radio buttons are useful when the user should choose one option from a group.

<label>
    <input type="radio" name="level" value="beginner">
    Beginner
</label>

<label>
    <input type="radio" name="level" value="advanced">
    Advanced
</label>

Radio buttons that belong to the same group normally share the same name.

7. Placeholder Text

The placeholder attribute provides a temporary hint inside an input.

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

Placeholder text should not replace a proper label. Labels remain important for accessibility and clarity.

8. Required Fields

The required attribute tells the browser that a value must be entered before the form can be submitted.

<input type="email" name="email" required>

This provides basic browser-side validation.

Remember that client-side validation is not a replacement for server-side validation.

9. Minimum and Maximum Length

The minlength and maxlength attributes can control the length of text input.

<input
    type="text"
    name="username"
    minlength="3"
    maxlength="20"
    required
>

10. Minimum and Maximum Values

For numeric inputs, min and max can define acceptable limits.

<input
    type="number"
    name="age"
    min="10"
    max="100"
>

11. Textarea

The <textarea> element is used for longer text.

<label for="message">Message</label>

<textarea
    id="message"
    name="message"
    rows="6"
    cols="40"
></textarea>

Textareas are useful for messages, comments, descriptions, feedback, and other longer responses.

12. Select Menus

The <select> element creates a dropdown menu.

<label for="course">Choose a Course</label>

<select id="course" name="course">
    <option value="web-development">Web Development</option>
    <option value="data-analysis">Data Analysis</option>
    <option value="cyber-security">Cyber Security</option>
    <option value="graphics-design">Graphics Design</option>
</select>

The value attribute determines the value submitted when the option is selected.

13. Selected Options

The selected attribute can make an option selected by default.

<select name="course">
    <option value="">Select a course</option>
    <option value="web-development" selected>
        Web Development
    </option>
    <option value="data-analysis">
        Data Analysis
    </option>
</select>

14. Buttons

Buttons allow users to perform actions.

<button type="submit">Submit Form</button>

The three commonly encountered button types are:

submit — submits the form.
button — a general-purpose button, often controlled by JavaScript.
reset — resets form controls to their initial values.

Example:

<button type="submit">Register</button>
<button type="reset">Clear Form</button>

15. Fieldset and Legend

The <fieldset> element groups related form controls.

The <legend> element provides a caption for the group.

<fieldset>
    <legend>Personal Information</legend>

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

    <label for="email">Email</label>
    <input type="email" id="email" name="email">
</fieldset>

This is particularly useful for organizing larger forms and improving accessibility.

16. HTML Form Validation

HTML provides built-in validation features that allow browsers to check some user input before submission.

Examples include:

required
type="email"
min
max
minlength
maxlength
pattern

Example:

<form>

    <label for="username">Username</label>
    <input
        type="text"
        id="username"
        name="username"
        minlength="4"
        maxlength="20"
        required
    >

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

    <button type="submit">Create Account</button>

</form>

17. Pattern Validation

The pattern attribute can be used to specify a regular expression that the entered value should match.

<input
    type="text"
    name="username"
    pattern="[A-Za-z0-9]+"
    required
>

In this example, the browser expects the value to contain letters and numbers according to the specified pattern.

Pattern rules should be designed carefully so legitimate users are not unnecessarily blocked.

18. The Name Attribute

The name attribute is one of the most important attributes when submitting form data.

<input type="text" name="full_name">
<input type="email" name="email">

Without an appropriate name, a form control may not contribute its value to the submitted form data.

19. The Value Attribute

The value attribute defines the value associated with a form control.

<input
    type="text"
    name="country"
    value="Nigeria"
>

For buttons, radio buttons, checkboxes, and select options, the value can also determine what information is submitted.

20. Complete Student Registration Form

The following example combines several concepts from this lesson.

<form action="/register" method="post">

    <fieldset>
        <legend>Student Registration</legend>

        <p>
            <label for="full-name">Full Name</label><br>
            <input
                type="text"
                id="full-name"
                name="full_name"
                placeholder="Enter your full name"
                required
            >
        </p>

        <p>
            <label for="email">Email Address</label><br>
            <input
                type="email"
                id="email"
                name="email"
                placeholder="you@example.com"
                required
            >
        </p>

        <p>
            <label for="phone">Phone Number</label><br>
            <input
                type="tel"
                id="phone"
                name="phone"
                required
            >
        </p>

        <p>
            <label for="course">Select Course</label><br>
            <select id="course" name="course" required>
                <option value="">Choose a course</option>
                <option value="web-development">
                    Web Development
                </option>
                <option value="data-analysis">
                    Data Analysis
                </option>
                <option value="cyber-security">
                    Cyber Security
                </option>
            </select>
        </p>

        <p>
            <label for="message">Why do you want to learn?</label><br>
            <textarea
                id="message"
                name="message"
                rows="5"
                placeholder="Tell us about your goals"
            ></textarea>
        </p>

        <p>
            <label>
                <input
                    type="checkbox"
                    name="terms"
                    required
                >
                I agree to the terms and conditions.
            </label>
        </p>

        <button type="submit">Register Now</button>
        <button type="reset">Clear Form</button>

    </fieldset>

</form>

21. Styling Forms with CSS

HTML creates the structure of a form while CSS controls its appearance.

form {
    max-width: 600px;
    margin: 0 auto;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

button {
    padding: 12px 20px;
    cursor: pointer;
}

Good form styling should make fields easy to identify, read, and use on both desktop and mobile devices.

22. Accessible Forms

Forms should be designed so that as many users as possible can understand and operate them.

Important practices include:

Use a visible label for each important field.
Associate labels correctly with form controls.
Use meaningful field names.
Group related controls with fieldset and legend when appropriate.
Do not rely only on placeholder text.
Provide clear instructions for complex fields.
Use suitable input types.
Make buttons clearly describe their actions.
Ensure forms work well on mobile devices.

23. Common Form Mistakes

Beginners commonly make the following mistakes:

Using placeholder text instead of labels.
Forgetting the name attribute.
Using the wrong input type.
Using the same ID for multiple controls.
Forgetting to connect a label with its input.
Making every field required when it is unnecessary.
Using tables to create form layouts.
Depending entirely on browser-side validation.
Creating forms that are difficult to use on mobile screens.
Failing to provide useful error messages.

24. Client-Side vs Server-Side Validation

HTML validation happens in the user’s browser. This is called client-side validation.

However, submitted data must still be validated on the server.

For example, a user may submit data through a custom request instead of the normal browser form. Therefore, a secure application should never assume that browser validation is enough.

A typical workflow is:

User enters information.
Browser performs basic validation.
Form is submitted.
Server validates the submitted data again.
Server processes or stores the valid information.
User receives an appropriate response.

25. Forms and JavaScript

JavaScript can be used to improve form interactions.

For example, JavaScript can listen for the form submission event.

const form = document.querySelector('#student-form');

form.addEventListener('submit', function (event) {
    event.preventDefault();

    console.log('Form submitted');
});

JavaScript can provide interactive feedback, but it should not replace proper server-side validation.

26. Forms in Real-World Web Applications

Forms are used throughout modern websites.

A university uses forms for student applications.
A training center uses forms for course registration.
An e-commerce website uses forms during checkout.
A blog uses forms for comments.
A company uses forms for job applications.
A website uses search forms to find content.

Understanding forms is therefore essential for anyone learning professional web development.

Practical Exercise

Create a complete student enrollment form for Dwallnet Technologies.

Your form should contain:

Full name.
Email address.
Phone number.
Date of birth.
Gender selection using radio buttons.
Course selection using a dropdown.
Learning mode using radio buttons.
Address using a textarea.
A terms and conditions checkbox.
Submit and reset buttons.

Make sure every field that needs a label has a properly associated label.

Code Challenge

Challenge: Build a registration form that collects the following information:

Student name
Email
Phone
Course
Learning mode
Message

The form must:

Use the POST method.
Have an action attribute.
Use labels correctly.
Make name, email, course, and terms fields required.
Use an email input type for the email address.
Use a select menu for the course.
Use radio buttons for learning mode.
Use a textarea for the message.
Include a submit button.

Expected Structure

<form action="/enroll" method="post">

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

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

    <!-- Add the remaining fields here -->

    <button type="submit">Enroll</button>

</form>

Lesson Summary

HTML forms allow websites to collect information from users. The <form> element provides the overall structure, while elements such as <input>, <textarea>, <select>, and <button> provide different ways for users to enter and submit information.

You also learned how to use labels, form methods, action URLs, validation attributes, radio buttons, checkboxes, fieldsets, and legends.

Key Principle: A professional form should be easy to understand, accessible, responsive, properly validated, and designed around the needs of the user.

Lesson Content