Lesson 2 — Forms, Inputs, and User Interaction

Title: Forms, inputs, and how users (and tests) send data

Description: Study <form>, input types, placeholders, disabled state, checkboxes, radios, labels, and what QA checks on real login and checkout flows.

Why it matters for QA: Most critical user journeys go through forms. Knowing field types and attributes helps you test validation, accessibility, and automation steps that fill and submit data correctly.

Forms collect user data.

Examples:

• login
• registration
• payment
• search
• contact forms

QA engineers test forms constantly.

1. Form Example

<form>

    <input type="email">

    <input type="password">

    <button>Login</button>

</form>

2. Input Fields

<input type="text">

Used for:

• names
• usernames
• search fields

3. Password Input

<input type="password">

Characters become hidden.

4. Email Input

<input type="email">

Browsers may validate email format automatically.

5. Number Input

<input type="number">

Allows numeric values.

6. Placeholder Attribute

<input
    placeholder="Enter email"
>

7. Value Attribute

<input value="admin">

Default field value.

8. Disabled Input

<input disabled>

User cannot interact.

QA checks:

• disabled state
• style
• accessibility

9. Checkbox

<input type="checkbox">

Boolean choice:

• checked
• unchecked

10. Checked Attribute

<input
    type="checkbox"
    checked
>

Checkbox selected by default.

11. Radio Button

<input type="radio">

User selects one option from many.

12. Labels

<label>Email</label>

Useful for accessibility.

13. Full Login Form Example

<form>

    <label>Email</label>

    <input
        type="email"
        placeholder="Enter email"
    >

    <label>Password</label>

    <input
        type="password"
    >

    <button>
        Login
    </button>

</form>

14. QA Form Testing

QA engineers test:

• empty fields
• invalid data
• required fields
• successful submit
• validation messages
• API requests
• frontend behavior
• keyboard navigation

15. Common Form Bugs

Examples:

• button not clickable
• validation missing
• wrong placeholder
• hidden error message
• password visible
• submit not working