Native validation and submission

The browser validates for you (for free)

Good news: before writing a single line of JavaScript, the browser already plays bouncer for you. With a few attributes on the controls, it checks the data on your behalf; if something doesn't comply, it blocks the submission and shows the classic red message. All you have to do is ask.

required: mandatory field

required prevents submitting the form if the field is empty:

<input type="text" name="name" required />

The type also validates

A type="email" requires a valid email format (it must contain @, etc.):

<input type="email" name="email" required />

pattern: your own rule

When no type fits, pattern lets you invent the rule with a regular expression. For example, a 5-digit postal code:

<input type="text" name="zip" pattern="[0-9]{5}" />

Ranges and lengths

• min / max: minimum and maximum values (useful in number and dates).
• maxlength: maximum number of characters in a text field.

<input type="number" name="age" min="18" max="120" />
<input type="text" name="nickname" maxlength="20" />

The submission flow: action and method

When a valid form is submitted, the browser packages the name=value pairs and sends them to a server. Two <form> attributes control it:

• action: the URL that will receive the data.
• method: how they are sent. get appends them to the URL (searches, non-sensitive data); post sends them in the request body (sign-ups, passwords).

<form action="/register" method="post">
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />
  <button type="submit">Create account</button>
</form>

At a high level: HTML defines what is sent and where to; the server decides what to do with that data. ⚠️ And heads up: native validation is the first barrier, but never the only one. A malicious user bypasses it in two clicks, so the server must always revalidate. Trust, but verify.