HTML Forms

Learn how websites collect user data using HTML forms.

What is an HTML Form?

An HTML Form is used to collect data from users and send it to a server for processing.

  • Login forms
  • Registration forms
  • Contact forms
  • Feedback forms

Real-Life Example: Filling an online application form is the same as filling a paper form.

The <form> Element

The <form> tag is the container that holds all form controls.

Basic Form Structure


<form>
    form elements here
</form>

Form Controls

Form controls are elements used to take input from users.

  • <input> – Text, email, password, etc.
  • <label> – Description for input
  • <textarea> – Multi-line text
  • <button> – Submit or reset
  • <select> – Dropdown list

Simple HTML Form Example

User Information Form


<form>
    <label>Name</label><br>
    <input type="text"><br><br>

    <label>Email</label><br>
    <input type="email"><br><br>

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

Why Labels Are Important

  • Improves readability
  • Helps screen readers
  • Makes forms accessible

Tip: Always use labels with input fields.

Submit and Reset Buttons

Button Types


<button type="submit">Submit</button>
<button type="reset">Reset</button>
  • Submit: Sends data to server
  • Reset: Clears all fields

Best Practices

  • Keep forms short and simple
  • Use clear labels
  • Group related fields
  • Use correct input types

Pro Tip: A simple form increases user response.

Summary

  • HTML forms collect user data
  • <form> is the main container
  • Inputs, labels, and buttons build a form