HTML Form Templates

An HTML form template is a ready-made, reusable block of form markup that you can copy into a project and adapt. Most web apps need the same handful of forms over and over again — contact, login, registration, feedback — so instead of building each one from scratch, you start from a clean, correct template and change only the labels, fields, and submit endpoint.

Working from a template has real advantages:

• Consistency — every form uses the same structure, so styling and validation behave predictably across your site.
• Speed — you skip the boilerplate and focus on the fields that are actually specific to your form.
• Accessibility by default — a good template already pairs each <label> with its control, groups related fields in a <fieldset>, and uses the right <input> types, so screen readers and keyboard users get a correct experience.
• Fewer bugs — common mistakes (a label that points at nothing, a missing name, the wrong input type) are already solved.

This chapter gives you three clean, valid, copy-pasteable templates — a contact form, a login form, and a registration form — plus a quick reference to the attributes that make them work.

Key form attributes

Before the templates, here are the attributes you will see in every one of them:

The single most important rule: every input needs a label, and the label's for must equal the input's id. This is also why <p for="..."> is invalid — only <label> carries the for attribute.

Contact form template

A minimal contact form: a name, an email, a message, and a submit button. Note the type="email" field, which gives free format validation in the browser.

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact us</legend>

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

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

    <p>
      <label for="contact-subject">Subject</label>
      <input type="text" id="contact-subject" name="subject">
    </p>

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

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

The <textarea> is used for multi-line input. Unlike <input>, it has no value attribute — its content goes between the opening and closing tags, and rows sets its visible height.

Login form template

A login form keeps it short: an identifier (email or username), a password, and an optional "remember me" checkbox. The password field uses type="password" so the characters are masked.

<form action="/login" method="post">
  <fieldset>
    <legend>Sign in</legend>

    <p>
      <label for="login-email">Email</label>
      <input type="email" id="login-email" name="email" autocomplete="username" required>
    </p>

    <p>
      <label for="login-password">Password</label>
      <input type="password" id="login-password" name="password" autocomplete="current-password" required>
    </p>

    <p>
      <label>
        <input type="checkbox" name="remember" value="yes"> Remember me
      </label>
    </p>

    <button type="submit">Log in</button>
  </fieldset>
</form>

For a single checkbox, wrapping the text inside the <label> is a common, valid pattern — the label is then implicitly associated with the control it contains, so you do not need a for/id pair. The autocomplete hints let the browser and password managers fill credentials correctly.

Registration form template

A registration form is longer and shows two more controls: a <select> dropdown and a group of radio buttons. Radio buttons that share the same name form one group, so only one can be selected at a time.

<form action="/register" method="post">
  <fieldset>
    <legend>Create an account</legend>

    <p>
      <label for="reg-name">Full name</label>
      <input type="text" id="reg-name" name="fullname" required>
    </p>

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

    <p>
      <label for="reg-password">Password</label>
      <input type="password" id="reg-password" name="password" autocomplete="new-password" minlength="8" required>
    </p>

    <p>
      <label for="reg-country">Country</label>
      <select id="reg-country" name="country" required>
        <option value="">Choose…</option>
        <option value="us">United States</option>
        <option value="uk">United Kingdom</option>
        <option value="de">Germany</option>
        <option value="other">Other</option>
      </select>
    </p>

    <fieldset>
      <legend>Account type</legend>
      <p>
        <label>
          <input type="radio" name="account" value="personal" checked> Personal
        </label>
        <label>
          <input type="radio" name="account" value="business"> Business
        </label>
      </p>
    </fieldset>

    <p>
      <label>
        <input type="checkbox" name="terms" value="agreed" required> I agree to the terms
      </label>
    </p>

    <button type="submit">Register</button>
  </fieldset>
</form>

A few things worth noting here:

• The first <option value=""> is a non-selectable placeholder. Because the <select> is required, the browser blocks submission while that empty option is chosen.
• minlength="8" on the password enforces a minimum length without any JavaScript.
• The inner <fieldset> groups the radio buttons, and its <legend> acts as a label for the whole group — important for screen reader users.

Related chapters

To go deeper into each element used above:

• The <form> tag — the container and its action/method attributes.
• The <input> tag — every input type and its attributes.
• The <label> tag — associating labels with controls.
• The <fieldset> tag — grouping related fields with a <legend>.
• The <textarea> tag — multi-line text input.
• The <select> tag — dropdown menus and options.
• The <button> tag — submit and reset buttons.

For a broader walkthrough of how forms work, see HTML Forms.

Practice