Forms allow users to interact with web pages by entering and submitting data.

The Form Tag

Create a form using the <form> element:

<form>
  <!-- form controls go here -->
</form>

The method Attribute

Forms can be submitted using the GET or POST HTTP methods:

<form method="POST">
  ...
</form>

GET (default):

• Data appears in the URL
• Good for search forms
• Can be bookmarked

POST:

• Data is sent in the request body
• Better for sensitive data
• Required for file uploads

The action Attribute

Specifies where to send form data:

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

If omitted, the form submits to the current URL.

Basic Form Structure

A complete form example:

<form action="/contact" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

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

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

The name Attribute

Every input needs a name to send data to the server:

<input type="text" name="username">

Without name, the field’s value won’t be included in the submission.

Labels

The <label> element improves accessibility and usability:

<!-- Using 'for' attribute (preferred) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<!-- Wrapping the input -->
<label>
  Email:
  <input type="email" name="email">
</label>

Clicking a label focuses its associated input.

Submit Buttons

Two ways to create submit buttons:

<!-- Button element (preferred) -->
<button type="submit">Submit</button>

<!-- Input element -->
<input type="submit" value="Submit">

Form Data Types

Common form controls include:

• Text inputs - single-line text
• Textareas - multi-line text
• Checkboxes - multiple selections
• Radio buttons - single selection from a group
• Select dropdowns - choose from a list
• File inputs - upload files

We’ll explore each in the following lessons.

Lessons in this unit:

0:	Introduction
1:	▶︎ How to Create HTML Forms
2:	How to Use HTML Text Input Types
3:	How to Validate HTML Forms
4:	How to Use Selection Controls in HTML Forms
5:	How to Use Advanced HTML Input Types