HTML Forms

HTML forms collect information from users, such as login details, search terms or contact messages. A form is wrapped in the <form> element and contains controls like <input>, <textarea>, <select> and <button>.

A Simple Contact Form

Try submitting empty fields: the required attribute makes the browser block submission and show a message.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form</title>
<style>label { display: block; margin-top: 10px; }</style></head>
<body>
  <form action="/contact" method="post">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>

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

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

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

action and method

• action: the URL that receives the form data
• method="get": data is added to the URL; good for searches
• method="post": data is sent in the request body; use it for logins and anything that changes data
• name: every control needs a name or its value is not sent

Labels Make Forms Accessible

A <label> whose for attribute matches an input id is announced by screen readers and makes the label clickable. You can also wrap the input inside the label.

Dropdowns, Radio Buttons and Checkboxes

Radio buttons with the same name form a group where only one can be chosen. <fieldset> and <legend> group related controls under a caption.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Choices</title></head>
<body>
  <form>
    <label for="city">City</label>
    <select id="city" name="city">
      <option value="lhr">Lahore</option>
      <option value="khi" selected>Karachi</option>
      <option value="isb">Islamabad</option>
    </select>

    <fieldset>
      <legend>Plan</legend>
      <label><input type="radio" name="plan" value="free" checked> Free</label>
      <label><input type="radio" name="plan" value="pro"> Pro</label>
    </fieldset>

    <label><input type="checkbox" name="news"> Send me the newsletter</label>
  </form>
</body>
</html>

Built-in Validation

HTML can validate many things without JavaScript: required, minlength, maxlength, min, max, pattern and type="email" or type="url".

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Validation</title></head>
<body>
  <form>
    <label>Username (3-12 letters)
      <input name="user" pattern="[A-Za-z]{3,12}" required>
    </label>
    <label>Age <input type="number" name="age" min="18" max="99"></label>
    <button>Check</button>
  </form>
</body>
</html>

Frequently asked questions

What is the difference between GET and POST in HTML forms?

GET appends form data to the URL and is suited to searches and bookmarks. POST sends data in the request body and should be used for passwords and actions that change data.

How do I make a field required in HTML?

Add the boolean required attribute to the input, select or textarea. The browser will refuse to submit until it is filled.

Does HTML validation replace server-side validation?

No. Browser validation improves the user experience but can be bypassed. Always validate data again on the server.