Forms and User Input

Welcome back.

In the previous lesson, you learned how to create tables for structured data.

Now we move to forms.

Forms are where users finally talk back to your website.

They can write their name.

Send a message.

Choose an option.

Click a button.

Basically, forms turn a static page into a conversation.

And sometimes into chaos.

But polite chaos.

What You’ll Learn

In this lesson, you’ll learn:

• what HTML forms are;
• how to use the form element;
• how to create text inputs;
• how to use labels;
• why the name attribute matters;
• how to create buttons;
• how to use textarea;
• how to create select menus;
• how to use required;
• common form mistakes.

What Is a Form?

A form collects information from the user.

Examples:

• contact forms;
• login forms;
• registration forms;
• search boxes;
• newsletter signups;
• feedback forms;
• order forms.

A form usually contains fields and a button.

Example:

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

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

This is a very small form.

But it already has structure.

Like a tiny office with one desk and one button.

The form Element

A form starts with form:

<form>
  ...
</form>

Everything inside belongs to the form.

Inputs.

Labels.

Buttons.

Text areas.

Select menus.

The form element is the container.

It says:

This group of elements works together to collect information.

Very official.

Almost like paperwork.

But with fewer stamps.

Text Inputs

A text input allows the user to type one line of text.

Example:

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

The type="text" means this is a normal text field.

Use it for:

• names;
• usernames;
• short messages;
• cities;
• simple answers.

Example:

<form>
  <label for="username">Username</label>
  <input id="username" name="username" type="text">
</form>

The user can type inside the field.

The website listens.

For once.

Labels

A label describes an input.

Example:

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

The for attribute should match the input id.

Here:

<label for="email">
<input id="email">

Both use email.

This connects the label to the input.

Why is this useful?

• users understand what to type;
• screen readers can explain the field;
• clicking the label focuses the input;
• the form becomes more accessible.

A form without labels is like a door without a sign.

Maybe it works.

But nobody knows what is happening.

The name Attribute

The name attribute gives the input a name when the form is submitted.

Example:

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

Without name, the field may not be sent properly.

This is important.

Example:

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

The id connects to the label.

The name identifies the data.

They are not the same thing.

HTML likes details.

Sometimes too much.

Placeholder Text

A placeholder shows temporary text inside an input.

Example:

<input type="text" name="name" placeholder="Enter your name">

It can help users understand what to write.

But do not use placeholder instead of a label.

Bad:

<input type="email" placeholder="Email">

Better:

<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="you@example.com">

A placeholder disappears when the user types.

A label stays.

Labels are loyal.

Placeholders are dramatic and vanish.

Email Inputs

For email addresses, use type="email":

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

Example:

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

The browser may check that the user enters something that looks like an email.

Not perfect.

But useful.

HTML gives you small help.

Not a miracle.

Small help.

Password Inputs

For passwords, use type="password":

<input type="password" name="password">

The browser hides the characters.

Example:

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

This is useful for login forms.

Do not use normal text fields for passwords.

That is not “simple”.

That is trouble wearing a hat.

Required Fields

You can make a field required:

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

The browser will not submit the form if the field is empty.

Example:

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

Use required for important fields.

But do not make every field required.

Nobody likes filling a form that asks for their life story just to send “hello”.

Textarea

For longer messages, use textarea.

Example:

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

Use textarea for:

• contact messages;
• comments;
• descriptions;
• feedback;
• longer answers.

Example:

<textarea id="message" name="message" rows="5"></textarea>

The rows attribute controls the visible height.

Not the emotional depth.

Sadly.

Select Menus

A select menu lets users choose from options.

Example:

<label for="course">Choose a course</label>
<select id="course" name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
</select>

The select is the menu.

Each option is one choice.

The value is the value sent with the form.

This is useful when users should choose from a fixed list.

Very civilized.

No typing chaos.

Buttons

A form usually has a button.

Example:

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

The type="submit" means the button submits the form.

Example:

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

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

You can also use:

<button type="reset">Reset</button>

But be careful.

Reset buttons can erase everything the user typed.

That is a fast way to become unpopular.

action and method

Forms can have action and method.

Example:

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

action says where the form data goes.

method says how it is sent.

Common methods:

• get;
• post.

For now, we focus on HTML structure.

Backend handling comes later.

HTML builds the form.

The server deals with the message.

Like a receptionist and an office.

Create a Contact Form

Create a file:

touch form.html

Add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
</head>
<body>
  <h1>Contact Me</h1>

  <p>Use this form to send a simple message.</p>

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

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

    <label for="topic">Topic</label>
    <select id="topic" name="topic">
      <option value="question">Question</option>
      <option value="project">Project</option>
      <option value="feedback">Feedback</option>
    </select>

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Send Message</button>
  </form>
</body>
</html>

Open it in the browser.

It will not send a real email yet.

That requires backend or a form service.

But the HTML structure is correct.

One step at a time.

No need to build Rome, Stripe, and a CRM in one afternoon.

Common Mistakes

Inputs without labels

Bad:

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

Better:

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

Labels matter.

Use them.

Missing name

Bad:

<input id="email" type="email">

Better:

<input id="email" name="email" type="email">

Without name, the data may not be submitted properly.

Using text input for everything

Not ideal:

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

Better for long messages:

<textarea name="message"></textarea>

Use the right element for the job.

Do not use a spoon to cut a tree.

Practice

Create a file called:

signup.html

Build a signup form with:

• one h1;
• one paragraph;
• name input;
• email input;
• password input;
• course select menu;
• message textarea;
• submit button;
• labels for every field;
• required on important fields.

No CSS.

No JavaScript.

Only HTML.

Mini Challenge

Create a feedback form.

It should include:

• name;
• email;
• rating select menu;
• message textarea;
• submit button;
• useful labels;
• placeholders where helpful;
• required fields only where necessary.

Keep the form simple.

A good form asks for what it needs.

A bad form asks for your soul, your grandmother’s recipe, and your postal code twice.

Summary

Today you learned:

• forms collect user input;
• form groups form elements;
• input creates different kinds of fields;
• label describes fields and improves accessibility;
• id connects an input to a label;
• name identifies submitted data;
• placeholder gives temporary hints;
• required makes a field mandatory;
• textarea is for longer text;
• select and option create dropdown menus;
• button type="submit" submits the form;
• action and method describe where and how data is sent.

Forms are powerful.

They let users interact with your page.

But build them carefully.

Because forms are where websites stop talking and start listening.

Next Lesson

In the next lesson, we’ll learn semantic HTML.

Because HTML is not only about tags.

It is about meaning.

And meaning is what separates a clean page from a div soup disaster.