HTML Forms

HTML Forms

 1. Basic Form Structure

A form typically contains inputs, labels, and buttons.

 2. Simple Form Example

•  Collects user data
• Submit button sends the form

 3. Important <form> Attributes

action

URL where the form data is sent.

method

How data is sent.

 Full Example

 4. Common Form Input Types

 Text Input

 Email Input

•  Validates email format automatically

 Password Input

 Number Input

Radio Buttons

•  Same name → only one selectable

Checkboxes

 Textarea

•  Multi-line input

Select (Dropdown)

 5. Labels (Accessibility )

•  Clicking label focuses input
•  Better for screen readers

 6. Name Attribute (Very Important)

• name is the key sent to server
•  Without name, data is not submitted

 7. Required & Validation Attributes

Common attributes:

• required

• minlength, maxlength

• pattern

• placeholder

 8. Submit & Reset Buttons

 9. Form with JavaScript Validation (Basic)

• Prevents empty submission

 10. GET vs POST (Quick Example)

GET

POST

 Common Mistakes

•  Forgetting name attribute
•  Using GET for passwords
•  No labels (bad accessibility)
•  Not validating inputs
•  Inline styles everywhere

 Key Points to Remember

• Forms collect user input

• <form> wraps all controls

• action + method are critical

• name attribute sends data

• Always validate input

• Accessibility matters