Forms

Let the browser help

<form class="stack" data-example-form>
  <label class="field">Project name
    <input class="input" name="name" required placeholder="Website refresh">
  </label>
  <label class="field">Email
    <input class="input" name="email" type="email" required placeholder="[email protected]">
  </label>
  <button class="btn" type="submit">Check Details</button>
</form>

A form is more than inputs

• Give every input a visible label and appropriate type.
• Use native validation for simple constraints. Add specific inline messages for business rules.
• Show pending, error, and success states when a real request is involved.
• Keep server-side validation authoritative. Browser checks alone are not security.

This example only validates locally. It does not save data or contact a server.

Dialogs without a component runtime

The homepage uses a native <dialog> for creating a demo project. Its small script calls showModal() and close(). The browser supplies modal behavior and Escape dismissal.