HTML Course

Lesson 7: Forms

Introduction to Forms

Forms allow users to send data to a server or interact with your site. A basic form starts with the <form> tag.

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

Common Form Inputs

Forms use different <input> types to collect data.

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

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="password">Password:</label>
<input type="password" id="password" name="password">

<label>
  <input type="checkbox" name="subscribe"> Subscribe to newsletter
</label>

<label>
  <input type="radio" name="gender" value="male"> Male
</label>
<label>
  <input type="radio" name="gender" value="female"> Female
</label>

Textarea & Select

<label for="message">Your Message:</label>
<textarea id="message" name="message"></textarea>

<label for="country">Country:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
</select>

Full Example Form

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

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

  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea>

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

Exercise

Create a sign-up form that includes:

  1. First Name, Last Name, Email, and Password fields.
  2. Gender selection with radio buttons.
  3. A dropdown for choosing a favorite course.
  4. A submit button.