Practical Exercise 7: Basic HTML Form

Learn to create a basic HTML form step by step. Discover how to use tags like <form>, <input>, <label>, and more to capture user information clearly and structurally.

Activity

Create a form with text fields, email, and a submit button.

Interactive Solution

AI PlatformTurn Code into Customers.Try it free

Solution with Complete HTML Code

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Form</title>
  </head>
  <body>
    <h1>Form</h1>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Exercise Variants

Variant 1: Form with `method` and `action`

The method and action attributes define how and where form data is sent.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form with POST Method</title>
  </head>
  <body>
    <h1>User Registration</h1>
    <form action="/process-registration" method="POST">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />
      <br />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <br />
      <button type="submit">Register</button>
    </form>
  </body>
</html>

method="POST": sends data in the request body (more secure for sensitive information).
method="GET": sends data in the URL as visible parameters (useful for searches and filters).
action: server URL that will process the form. If omitted, it's submitted to the same page.

Variant 2: HTML5 Validation with Native Attributes

HTML5 allows validating fields without JavaScript using attributes like required, placeholder, minlength, maxlength, and pattern.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form with Validation</title>
  </head>
  <body>
    <h1>Validated Form</h1>
    <form>
      <label for="name">Name (required):</label>
      <input
        type="text"
        id="name"
        name="name"
        placeholder="Enter your full name"
        required
        minlength="3"
        maxlength="50"
      />
      <br />
      <label for="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="example@email.com"
        required
      />
      <br />
      <label for="phone">Phone:</label>
      <input
        type="tel"
        id="phone"
        name="phone"
        placeholder="+1 415 555-1234"
        pattern="[+]{0,1}[0-9]{1,3}[0-9]{6,14}"
      />
      <br />
      <button type="submit">Send</button>
    </form>
  </body>
</html>

required: the field cannot be empty.
placeholder: example text that disappears when typing.
minlength / maxlength: minimum and maximum character length.
pattern: regular expression the value must match.

Variant 3: Input Types and Their Differences

Each input type activates a different keyboard on mobile and has automatic validation.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Input Types</title>
  </head>
  <body>
    <h1>Different Field Types</h1>
    <form>
      <label for="text">Text (type="text"):</label>
      <input type="text" id="text" name="text" />
      <br /><br />

      <label for="email2">Email (type="email"):</label>
      <input type="email" id="email2" name="email2" />
      <br /><br />

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

      <label for="age">Age (type="number"):</label>
      <input type="number" id="age" name="age" min="1" max="120" />
      <br /><br />

      <label for="phone2">Phone (type="tel"):</label>
      <input type="tel" id="phone2" name="phone2" />
      <br /><br />

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

Variant 4: Grouping Fields with `fieldset` and `legend`

For long forms, <fieldset> and <legend> group related fields visually and semantically.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Grouped Form</title>
  </head>
  <body>
    <h1>User Profile</h1>
    <form>
      <fieldset>
        <legend>Personal Data</legend>
        <label for="name2">Name:</label>
        <input type="text" id="name2" name="name" required />
        <br />
        <label for="email3">Email:</label>
        <input type="email" id="email3" name="email" required />
      </fieldset>

      <fieldset>
        <legend>Preferences</legend>
        <label for="language">Preferred language:</label>
        <select id="language" name="language">
          <option value="en">English</option>
          <option value="es">Español</option>
          <option value="pt">Português</option>
        </select>
      </fieldset>

      <br />
      <button type="submit">Save Profile</button>
    </form>
  </body>
</html>

fieldset creates a visual border around grouped fields and legend gives it an accessible title.

Mini-Challenge: Put It to the Test

Create a registration form containing:

Name field with required and placeholder
Email field with type="email" and automatic validation
Password field with type="password" and minlength="8"
Phone field with type="tel" and pattern
A <button type="submit"> to submit
All fields must have their <label> associated with for

Try to build it without looking at the examples. If you get stuck, go back to the variant you need.

Common Mistakes with HTML Forms

Mistake	Why It's a Problem
Forgetting the `name` attribute on inputs	Without `name`, the data is not sent to the server. It's the field identifier
Not associating `label` with `for`/`id`	Screen readers don't know which label corresponds to which field. Also, clicking the label doesn't focus the input
Button without `type="submit"`	When inside a `<form>`, a `<button>` without `type` works as submit, but it's better to be explicit to avoid unexpected behavior
Using only `required` without server-side validation	Browser validation can be bypassed. Always validate on the backend too
Not providing `placeholder` as visual help	Although it doesn't replace `<label>`, `placeholder` guides the user on the expected format

Frequently Asked Questions

What happens if I don't put `name` on an input?

The field is not sent to the server. The name attribute is the key with which the backend receives the value. If you have <input type="text" id="name"> without name, the user can type in the field but when submitting the form that data doesn't reach its destination.

`GET` vs `POST`: which one should I use?

Use GET for searches and filters (parameters remain in the URL, the link can be shared). Use POST for registration, login, or any form that modifies data or contains sensitive information (passwords, personal data). POST sends data in the request body, not in the URL.

info

Check out the full explanation here 👉 Creating HTML Forms

Practical Exercise 7: Basic HTML Form

Activity​

Interactive Solution​

Solution with Complete HTML Code​

Exercise Variants​

Variant 1: Form with method and action​

Variant 2: HTML5 Validation with Native Attributes​

Variant 3: Input Types and Their Differences​

Variant 4: Grouping Fields with fieldset and legend​

Mini-Challenge: Put It to the Test​

Common Mistakes with HTML Forms​

Frequently Asked Questions​

What happens if I don't put name on an input?​

GET vs POST: which one should I use?​