Built-in Validation & Submission

After this lesson, you can add native HTML validation and explain the limits of forms without a backend.

BEGIN WITH A QUESTION

Understanding begins with a question.

A user forgets to enter an email address. Instead of leaving them guessing, the browser can provide immediate guidance using simple HTML rules.

Add native HTML validation and explain the limits of forms without a backend.

UNDERSTAND THE CONCEPT

Rules already provided by the browser

Required marks a mandatory field. Type email checks address format, rather than whether the mailbox exists. Minlength sets minimum text length; min and max constrain number values. Explain the rules in labels or nearby text so people know them before making an error.

Validation is not server security

Browser validation helps users but can be bypassed. Real applications must still validate data on the server. Required="false" still makes a field mandatory because required is boolean; remove the attribute to make it optional.

Get, post, and the demo’s limits

Method get usually carries data in the URL query; post carries it in the request body. Post is not encryption: connection protection requires HTTPS. Action defines the processing destination. Lucia’s preview blocks form submission; no data is sent and no ‘successfully sent’ message appears. To try validation here, use Try form validation in the preview panel.

EXAMPLE / CONTEXT

Examples clarify concepts.

HTML EXAMPLE

<form method="get">
  <label for="email">Email (required)</label>
  <input id="email" name="email" type="email" required>
  <label for="pesan">Message (at least 10 characters)</label>
  <textarea id="pesan" name="pesan" required minlength="10"></textarea>
  <label for="peserta">Participant count (1–5)</label>
  <input id="peserta" name="peserta" type="number" min="1" max="5" required>
  <p>Local demonstration; data is not sent.</p>
  <button type="button">Demo without submission</button>
</form>

BROWSER RESULT

Rules belong to controls. An ordinary button does not submit; Lucia’s validation panel provides a separate demonstration using safe native controls.

COMMON MISTAKES

<input type="email" required="false">

This input is still required. HTML booleans depend on attribute presence, rather than the text false. Remove required if email is optional.

TRY TOGETHER

Practice clarifies understanding.

01 A form uses type email and required. Can the server immediately trust its data?

Yes, the browser guarantees all data is safeNo, the server must still validate the dataYes, as long as the method is post

Try as often as you need. The independent task that follows records lesson completion.

WRITE · OBSERVE · UNDERSTAND

Rules that help people complete a form

Fix the form: require email, require a pesan textarea with at least 10 characters, and require a participant count from 1–5. Label every field. Add ‘Demo, data is not sent’ and use a type button button.

<form>
  <label for="email">Email</label><input id="email" name="email" type="text">
  <label for="message">Message</label><textarea id="message" name="message"></textarea>
  <label for="peserta">Participants</label><input id="peserta" name="peserta" type="number">
  <button>Send</button>
</form>

index.htmlHTMLLn 1, Col 16 lines2 spasi

Editor shortcuts & help

Ctrl + Space: Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F: Format code
Ctrl/⌘ + F: Find and replace text
Ctrl/⌘ + [ / ]: Decrease / increase indentation
Tab: Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z: Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

TAKE THIS UNDERSTANDING WITH YOU

Practice gives a foundation.

HTML provides basic validation rules.
Client validation does not replace server checks.
This demo form sends no data; get and post are not a backend.

FormDebugging

A lesson is complete when the independent task meets its goals. Return to the reading at any time.

Connect with other concepts

HTML validation °HTML form °HTTPS °

Library: What happens when you open a website? ↗

Take the Chapter Trial →