Let’s Make Your Website Interactive!

Until now, most of the HTML you’ve written has displayed information. But what if visitors want to register for an event, send a message, or choose their favorite topic?

That’s where HTML forms come in. Forms let people enter information and interact with your website.

Meet the <form> Element

Every form begins with <form>. Inside it, you can add labels, inputs, buttons, and other controls.

<form action="/submit" method="post">
  <label for="username">Your name</label>
  <input id="username" name="username" type="text">

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

The action attribute identifies where the form should submit data. The method attribute controls how it is sent, commonly get or post.

The name attribute identifies each field’s value during submission. Without it, most input values won’t be included in a normal form submission.

One Element, Many Possibilities

The <input> element can create different controls depending on its type attribute.

<input type="text" name="name">
<input type="email" name="email">
<input type="password" name="password">
<input type="number" name="guests" min="1">
<input type="date" name="date">
<input type="checkbox" name="updates">
<input type="radio" name="session" value="morning">

Each input type has a purpose. For example, email can check basic email formatting, while number supports numeric constraints.

Make Forms Easy to Understand

A good form clearly explains what each field is asking for. Labels help everyone, including people using assistive technology.

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

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

<fieldset>
  <legend>Preferred session</legend>
  <label>
    <input type="radio" name="session" value="am">
    Morning
  </label>
  <label>
    <input type="radio" name="session" value="pm">
    Afternoon
  </label>
</fieldset>

Notice how both radio buttons share the same name. That groups them so visitors can choose only one. <fieldset> and <legend> give related controls a shared description.

Textareas, Select Menus & Buttons

Sometimes a single-line input isn’t enough. Use <textarea> for longer responses and <select> for predefined options.

<label for="feedback">Your feedback</label>
<textarea id="feedback" name="feedback" rows="4"></textarea>

<label for="rating">Rate this lesson</label>
<select id="rating" name="rating">
  <option value="great">Great!</option>
  <option value="good">Good</option>
</select>

<button type="submit">Submit Feedback</button>

Help Visitors Enter Valid Information

HTML includes built-in validation attributes. You can require fields, limit lengths, and set acceptable ranges without writing JavaScript.

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

<label for="guests">Guests</label>
<input id="guests" name="guests"
       type="number" min="1" max="5" required>

<label for="nickname">Nickname</label>
<input id="nickname" name="nickname"
       minlength="3" maxlength="20">

Try leaving a required field empty or entering an invalid email address. The browser can prevent submission and explain what needs attention.

Make Your Forms Friendly & Accessible

The best forms don’t feel like work. They ask clear questions, avoid unnecessary fields, and provide useful feedback.

• Use a visible label for every field.
• Choose the correct input type.
• Mark required fields clearly.
• Group related options with <fieldset>.
• Use autocomplete when appropriate.
• Explain errors in plain language.
• Collect only the information you actually need.

And remember: a form that looks beautiful but is confusing to complete isn’t a great form. Usability comes first!

You’ve Built Something Interactive!

You’re no longer just displaying information — you’re giving visitors a way to participate!

• How to structure forms and input fields.
• How to use different input types.
• How to connect labels and group choices.
• How to validate form entries.
• How to create a friendly registration experience.

Next up: Canvas — get ready to draw shapes, create graphics, and bring your imagination to the screen!