HTML Forms and User Input

HTML

Introduction to HTML Forms

Websites often need to collect information from users. A student may need to register
for a course, a visitor may need to send a message, or a customer may need to provide
information before completing an order.

HTML provides forms for collecting this information.

A form can contain text fields, email fields, passwords, numbers, dates, checkboxes,
radio buttons, dropdown menus, text areas, and buttons.

Forms are one of the most important parts of interactive websites because they create
a connection between the user and the application.

1. The <form> Element

The <form> element acts as a container for controls that collect
information from users.

Basic Example

<form>

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

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

</form>

The form contains an input field and a submit button.

2. The action Attribute

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

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

In a real web application, the destination could be a PHP script, WordPress
endpoint, API endpoint, or another server-side handler.

HTML provides the interface for collecting the data. A backend application is
responsible for processing and storing the submitted information.

3. The method Attribute

The method attribute determines how the browser sends form data.
Two commonly used methods are GET and POST.

GET

<form action="/search" method="get">
    ...
</form>

GET is commonly used when the submitted information is intended to retrieve
or search for data.

Query parameters are generally visible in the URL when GET is used.

POST

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

POST sends the submitted information in the request body rather than placing
the form fields directly in the URL.

POST is commonly used for operations such as creating accounts, submitting
registration information, or changing server-side data.

Remember that using POST by itself does not make sensitive information secure.
Proper server-side security and HTTPS are still required.

4. The <input> Element

The <input> element is one of the most commonly used form controls.
Its behavior depends on its type attribute.

Basic Text Input

<input type="text">

This creates a single-line text field.

5. Text Input

Text inputs are useful for short pieces of information such as names, usernames,
locations, and titles.

<label for="fullname">Full Name</label>

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

6. The name Attribute

The name attribute identifies the form field when the browser submits
the form.

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

Without a useful name attribute, a normal successful form control
will not provide the expected field name to the server.

The id and name attributes often have similar values,
but they serve different purposes.

• id uniquely identifies an element in the document.
• name identifies the submitted form field.

7. Placeholder Text

The placeholder attribute provides a short hint about what the user
should enter.

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

Placeholder text should not replace a proper label.

A label identifies the field, while a placeholder can provide an example or hint.

8. Email Input

The email input type is designed for email addresses.

<label for="email">Email Address</label>

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

Browsers can provide useful built-in validation for values entered into an
email input.

9. Password Input

Password fields hide the characters as the user types.

<label for="password">Password</label>

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

Password inputs help prevent people nearby from easily reading the characters
being entered on screen.

Developers must still use secure server-side password handling. Passwords should
never be stored as plain text.

10. Number Input

The number input is useful when users need to enter numerical values.

<label for="age">Age</label>

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

The min and max attributes can define the allowed range
that the browser should validate.

Server-side validation is still required because browser validation can be bypassed.

11. Date Input

The date input allows users to enter a date.

<label for="start-date">Training Start Date</label>

<input
    type="date"
    id="start-date"
    name="start_date"
>

Browsers may display a date picker depending on the device and browser.

12. URL Input

The URL input type is useful when collecting website addresses.

<label for="website">Website</label>

<input
    type="url"
    id="website"
    name="website"
    placeholder="https://example.com"
>

13. Telephone Input

The telephone input type is useful for collecting phone numbers.

<label for="phone">Phone Number</label>

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

The exact formatting of telephone numbers varies between countries, so validation
rules should be designed according to the application’s requirements.

14. Labels

Labels are extremely important for accessible forms.

A label tells the user what information a particular field expects.

<label for="email">Email Address</label>

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

The for attribute of the label should match the input’s
id.

This also allows users to activate the associated control by interacting with
its label.

15. Required Fields

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

<label for="name">Full Name</label>

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

Browser validation is helpful, but it should never be considered a replacement
for server-side validation.

16. Minlength and Maxlength

Text inputs can use minlength and maxlength to specify
constraints on the number of characters.

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

17. Radio Buttons

Radio buttons allow the user to select one option from a group.

<p>Choose your learning mode:</p>

<label>
    <input
        type="radio"
        name="learning_mode"
        value="physical"
    >
    Physical
</label>

<label>
    <input
        type="radio"
        name="learning_mode"
        value="virtual"
    >
    Virtual
</label>

The radio buttons share the same name, which groups them together.

Their value attributes identify which option was selected.

18. Checkboxes

Checkboxes allow users to select one or more independent options.

<p>Select your interests:</p>

<label>
    <input
        type="checkbox"
        name="interest[]"
        value="html"
    >
    HTML
</label>

<label>
    <input
        type="checkbox"
        name="interest[]"
        value="css"
    >
    CSS
</label>

<label>
    <input
        type="checkbox"
        name="interest[]"
        value="javascript"
    >
    JavaScript
</label>

In this example, multiple options can be selected.

19. The Checked Attribute

The checked attribute can make a checkbox or radio button selected
by default.

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

20. The Select Element

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>

</select>

21. The Selected Attribute

The selected attribute can make an option selected by default.

<option
    value="web-development"
    selected
>
    Web Development
</option>

22. Textarea

The <textarea> element is used when users need to enter
multiple lines of 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 pieces of information.

23. The Button Element

The <button> element creates a clickable button.

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

Common button types include:

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

Example

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

<button type="reset">Reset</button>

<button type="button">Open Details</button>

24. Fieldset and Legend

Related form controls can be grouped using <fieldset>.
The <legend> element provides a title 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>

Fieldsets are particularly useful for larger forms because they create meaningful
groups of related controls.

25. Form Validation

Validation ensures that information entered into a form meets the application’s
requirements.

HTML provides several built-in validation attributes.

• required
• min
• max
• minlength
• maxlength
• type
• pattern

Example

<label for="username">Username</label>

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

26. Pattern Validation

The pattern attribute can specify a regular expression that the
value should match.

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

The pattern above allows letters and numbers.

Regular expressions can become complex, so developers should use them carefully
and provide understandable instructions to users.

27. A Complete Student Registration Form

The following example combines many of the concepts in this lesson.

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

    <fieldset>

        <legend>Personal Information</legend>

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

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

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

    </fieldset>


    <fieldset>

        <legend>Training Information</legend>

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

            <select
                id="course"
                name="course"
                required
            >

                <option value="">
                    Select 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>Learning Mode</p>

        <label>
            <input
                type="radio"
                name="learning_mode"
                value="physical"
                required
            >
            Physical
        </label>

        <label>
            <input
                type="radio"
                name="learning_mode"
                value="virtual"
            >
            Virtual
        </label>


        <p>
            <label for="message">
                Why do you want to learn this course?
            </label>

            <textarea
                id="message"
                name="message"
                rows="6"
            ></textarea>
        </p>

    </fieldset>


    <p>
        <label>
            <input
                type="checkbox"
                name="terms"
                value="accepted"
                required
            >
            I agree to the training terms.
        </label>
    </p>


    <button type="submit">
        Register Now
    </button>

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

</form>

28. Styling Forms with CSS

HTML provides the structure of a form, while CSS can improve its appearance and usability.

form {
    max-width: 600px;
}

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

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

button {
    padding: 10px 18px;
    cursor: pointer;
}

CSS can also be used to create responsive forms that work well on desktop,
tablet, and mobile devices.

29. Accessible Forms

A good form should be usable by as many people as possible, including users
who rely on assistive technologies.

Important Practices

• Give important controls clear labels.
• Connect labels to inputs using for and id.
• Group related controls with <fieldset>.
• Use <legend> to describe field groups.
• Provide clear instructions.
• Do not rely only on placeholder text.
• Make keyboard navigation possible.
• Use clear error messages.
• Do not make important information depend only on color.

30. Client-Side vs Server-Side Validation

Client-side validation happens in the user’s browser.

Examples include:

<input type="email" required>

<input type="number" min="1" max="100">

Server-side validation happens on the server after the information is submitted.

Server-side validation is essential because users can disable or bypass browser-side
validation.

A secure web application should validate important data on the server before processing
or storing it.

31. Common Form Mistakes

Mistake 1: Missing Labels

Weak:

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

Better:

<label for="name">Full Name</label>

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

Mistake 2: Missing Name Attributes

Form controls that need to submit data should normally have appropriate
name attributes.

Mistake 3: Using Placeholder as the Label

Placeholder text should not be the only way users know what a field means.

Mistake 4: Incorrect Radio Button Names

Radio buttons intended to represent one choice should share the same
name.

Mistake 5: No Validation

Important fields should have appropriate validation requirements, both on the
client and server.

Mistake 6: Using the Wrong Button Type

A button inside a form can behave as a submit button by default in many situations.
Developers should explicitly set the button type when appropriate.

<button type="button">Open Menu</button>

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

32. Form Security Principles

Forms are an important entry point into a web application, so developers must
treat submitted data as untrusted input.

• Validate submitted data on the server.
• Sanitize data where appropriate.
• Use prepared database queries.
• Use HTTPS for websites handling sensitive information.
• Protect authenticated forms against CSRF attacks.
• Never trust values simply because browser validation accepted them.
• Use secure password hashing for passwords.

These security principles become increasingly important as you progress from
basic HTML into PHP, WordPress development, JavaScript, APIs, and database programming.

33. Practical Exercise

Build a complete Student Course Registration Form.

Your form should contain:

1. Full name.
2. Email address.
3. Phone number.
4. Password.
5. Date of birth.
6. Course selection dropdown.
7. Learning mode using radio buttons.
8. At least three interests using checkboxes.
9. A message textarea.
10. A terms and conditions checkbox.
11. A submit button.
12. A reset button.

Requirements

• Every important field should have a label.
• Use meaningful name attributes.
• Use appropriate input types.
• Use required where appropriate.
• Group related information using fieldsets.
• Add a legend to every fieldset.
• Style the form using CSS.
• Make the form responsive.

34. Code Challenge

The following registration form contains several errors. Identify and correct them.

<form>

    <input
        type="text"
        placeholder="Full Name"
    >

    <input
        type="email"
        id="email"
    >

    <p>Choose your course:</p>

    <input
        type="radio"
        name="course1"
        value="web"
    >
    Web Development

    <input
        type="radio"
        name="course2"
        value="data"
    >
    Data Analysis

    <select>
        <option>Cyber Security</option>
        <option>WordPress</option>
    </select>

    <textarea></textarea>

    <button>Register</button>

</form>

Identify the Problems

• The text input has no label.
• The text input has no name attribute.
• The email input has an ID but no label.
• The email input has no name attribute.
• The radio buttons have different names, so they do not form one group.
• The select element has no label or name.
• The textarea has no label or name.
• The form does not specify a submission method.
• The submit button does not explicitly specify its type.

Corrected Version

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

    <label for="fullname">
        Full Name
    </label>

    <input
        type="text"
        id="fullname"
        name="fullname"
        required
    >


    <label for="email">
        Email Address
    </label>

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


    <p>
        Choose your course:
    </p>

    <label>
        <input
            type="radio"
            name="course"
            value="web"
            required
        >
        Web Development
    </label>

    <label>
        <input
            type="radio"
            name="course"
            value="data"
        >
        Data Analysis
    </label>


    <label for="other-course">
        Other Course
    </label>

    <select
        id="other-course"
        name="other_course"
    >

        <option value="">
            Select a course
        </option>

        <option value="cyber-security">
            Cyber Security
        </option>

        <option value="wordpress">
            WordPress
        </option>

    </select>


    <label for="message">
        Additional Information
    </label>

    <textarea
        id="message"
        name="message"
        rows="5"
    ></textarea>


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

</form>

35. Lesson Summary

HTML forms provide a structured way for websites to collect information from users.
Forms can contain many different controls depending on the type of information
being collected.

The <form> element provides the main container. Input controls
such as <input>, <textarea>,
<select>, and <button> provide the
user interface.

Labels, fieldsets, legends, meaningful names, and appropriate input types make
forms easier to understand and more accessible.

HTML provides useful browser-side validation through attributes such as
required, min, max,
minlength, maxlength, and pattern.

However, browser validation is not enough for security. Important information
must always be validated on the server before it is trusted or stored.

Key Principle

Build forms for people first: make every field understandable, accessible,
properly named, validated, and easy to use.

Once you understand HTML forms, you have the foundation needed to connect
webpages to JavaScript, PHP, WordPress, databases, APIs, and full web applications.