Introduction to Forms: <form> and Basic Inputs

Every time you fill in a search box, sign up for a service, or send a message online, you are using an HTML form. Forms are the mechanism that lets web pages collect information from users.

What forms do

A form gathers input from the user and prepares it to be sent somewhere — to a server, an email address, or processed by JavaScript. This lesson covers the HTML structure only. How the data gets sent and processed is covered in later courses.

The <form> element

<form> is the container that wraps all the input elements. It tells the browser “everything inside here is part of a single form.”

<form>
  <!-- input elements go here -->
</form>

A form on its own does nothing visible. It needs input elements inside it.

<input> — the basic input element

<input> is a self-closing element that creates a field where the user can type or select something. The type attribute controls what kind of input it creates.

<input type="text">

Common type values:

type	Creates
text	A single-line text field
email	A text field that expects an email address
password	A text field that hides what is typed

The name attribute

The name attribute identifies what the data in this field represents when the form is submitted. Without name, the browser does not know what to call the data.

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

When the form is submitted, the browser sends the data as username=... and email=.... Always include name on every input that needs to submit data.

A minimal form

<form>
  <input type="text" name="name">
  <input type="email" name="email">
</form>

This creates two fields stacked on top of each other. There are no labels yet — you will add those in the next lesson — and no submit button. The structure is there, but it is not yet user-friendly.

Multiple inputs inside a form

<form>
  <input type="text" name="name">
  <input type="email" name="contact-email">
  <input type="password" name="password">
</form>

Each input is its own self-closing element. They must all live inside <form> to be submitted together.

Exercise

Open index.html in VS Code.

You are going to add a contact form section to your page. This will be a new <section> inside <main>, placed after your existing sections and before </main>.

1. Add a new <section> with a heading:

<section>
  <h2>Contact</h2>
  <form>
    <input type="text" name="name">
    <input type="email" name="email">
  </form>
</section>

2. Save and open index.html in your browser. You should see two text fields on the page. They look plain because there are no labels yet — that is exactly what the next lesson covers.

Recap

• <form> is the container for all form elements.
• <input> is a self-closing element that creates an input field.
• The type attribute controls what kind of input appears (text, email, password).
• The name attribute identifies the field’s data when the form is submitted. Always include it.
• Inputs must be inside <form> to be submitted as part of that form.