Lesson 4: Forms – Collecting User Input

HTML forms allow you to collect data from users.

Basic Form Elements

• <form>: Defines the form.
• <input>: Collects user input (e.g., text, email, password).
• <label>: Describes input fields.
• <button>: Submits the form.

Example:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <button type="submit">Submit</button>
</form>

Real-World Example:

Imagine creating a “Contact Us” page:

<h2>Contact Us</h2>
<form action="https://example.com/contact" method="post">
  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname" placeholder="Your Name" required>
  <br>
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4" cols="50" placeholder="Your message"></textarea>
  <br>
  <button type="submit">Send</button>
</form>