HTML Forms: Input Types and Validation for Beginners

Every time you log in, search, sign up or check out online, you are using HTML forms. A form collects what a visitor types or selects and sends it somewhere for processing. The good news is that modern HTML can do a surprising amount of the work for you, including checking the input before it is sent.

This guide covers the form element, the input types you will use most, and the built-in validation attributes. It assumes you know what an element is, so skim our HTML elements vs tags article if you want a refresher.

The basic form

A form is a form element that wraps one or more controls and a submit button.

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Three attributes do the heavy lifting:

• action is the address that receives the data.
• method is get (data appears in the URL, good for searches) or post (data goes in the request body, better for logins and anything private).
• name on each field is the label the server sees. A field without a name is simply not sent.

Always use labels

A label tells the user what a field is for. When its for value matches the input's id, clicking the label focuses the field. That is a bigger tap target on phones, and screen readers announce the label when the field gets focus. Placeholder text is not a substitute, since it disappears as soon as someone starts typing. We go deeper in our guide to HTML accessibility best practices.

Input types you will actually use

The type attribute changes how an input looks and behaves. Picking the right one gives you free validation and a better keyboard on mobile.

• text for short free text such as a name.
• email expects something shaped like an address and shows an email keyboard on phones.
• password hides the characters as you type.
• number accepts only numbers and supports min, max and step.
• tel brings up a phone keypad.
• date shows a date picker.
• checkbox lets you tick any number of options.
• radio lets you choose exactly one from a group that shares the same name.
• file lets the user pick a file to upload.

Not everything is an input. Two other elements are worth knowing:

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

<label for="plan">Plan</label>
<select id="plan" name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
</select>

textarea is for multi-line text and select gives a dropdown list. Both need a name too.

Checkboxes and radio buttons

These two confuse beginners because they look alike. Radio buttons share one name, so choosing one clears the others. Checkboxes are independent, so each can be ticked on its own.

<input type="radio" name="size" value="small" id="s">
<label for="s">Small</label>
<input type="radio" name="size" value="large" id="l">
<label for="l">Large</label>

The server receives size=small or size=large, depending on which one was picked. Put the value you want to receive on each option, since the visible text is only for humans.

Related reading: Semantic HTML: HTML Semantic Tags for Better SEO

Built-in validation

Validation means checking that the data makes sense before accepting it. HTML can do the common checks with attributes alone, no JavaScript needed.

<form>
  <input type="text" name="username" required minlength="3" maxlength="15">
  <input type="number" name="age" min="18" max="99">
  <input type="text" name="pin" pattern="[0-9]{6}" title="Enter a 6-digit PIN">
  <button>Send</button>
</form>

If a value breaks a rule, the browser blocks the submit and shows a message next to the first problem. The attributes mean:

• required: the field cannot be empty.
• minlength and maxlength: limits on text length.
• min and max: limits on numbers and dates.
• pattern: a regular expression the value must match. Use title to explain the rule in plain words.

Add novalidate to the form tag if you want to turn the browser checks off, for example when you plan to show your own messages.

Style invalid fields with CSS

The browser also exposes the state of each field to CSS, so you can show feedback without writing scripts.

input:invalid { border: 2px solid #c0392b; }
input:valid   { border: 2px solid #27ae60; }

One tip: these rules flag an empty required field as invalid before the user has typed anything. Many sites apply them only after the first interaction, using :user-invalid in newer browsers or a small script for older ones.

Never trust the browser alone

Here is the part many tutorials skip. Browser validation is a convenience for honest users. Anyone can open developer tools, remove required or send a request directly, so your server must check everything again. Treat the front-end checks as friendly hints and the server checks as the real gate.

// A server-side style check, written as plain JavaScript
function validateSignup({ username, age }) {
  const errors = [];
  if (!username || username.length < 3) errors.push("Username too short");
  if (!Number.isInteger(age) || age < 18) errors.push("Must be 18 or older");
  return errors;
}

console.log(validateSignup({ username: "ab", age: 16 }));
// [ 'Username too short', 'Must be 18 or older' ]
console.log(validateSignup({ username: "nikhil", age: 25 })); // []

You can add your own messages and live feedback on top of this with scripts. Our guide to JavaScript event handling shows how to react when a user types or submits.

Common mistakes

• Forgetting the name attribute, so the field is never sent.
• Radio buttons with different names, which lets people select several.
• Using type="text" for everything and losing free validation.
• Relying on placeholders instead of labels.
• Sending passwords with method="get", which puts them in the URL.

Many of these appear in common HTML mistakes and how to fix them. For more topics like this, browse the HTML category.

Conclusion

A good form is clear, accessible and checked twice. Remember these points:

• Wrap controls in a form with action and method, and give each field a name.
• Pair every input with a label.
• Choose the right type to get keyboards and checks for free.
• Use required, min, max, minlength and pattern for basic validation.
• Always validate again on the server.