Formulare

Ce este un formular

Un formular colectează date de la user și le trimite undeva (server, funcție). E cel mai vechi mecanism interactiv al web-ului și funcționează fără JavaScript: browserul știe singur să adune valorile și să le trimită.

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

La submit, browserul construiește un request cu email=ana@x.ro și îl trimite la /subscribe. În Next, action poate fi direct o Server Action.

Piesele unui formular

<button> într-un form are implicit type="submit". Butoanele care nu trimit (deschid un modal, șterg un rând) primesc type="button".

Tipuri de input — și când le folosești

Alte controale: <textarea> (text lung), <select> + <option> (listă), <fieldset> + <legend> (grup de câmpuri înrudite).

checkbox vs radio vs select: o alegere din 2–5 opțiuni vizibile → radio; o alegere din multe → select; mai multe alegeri → checkbox-uri.

Validare nativă

Stilizezi starea cu :invalid, :valid, :user-invalid (doar după ce userul a interacționat).

Validarea din browser e pentru confortul userului, nu pentru securitate. Oricine o poate ocoli → validezi mereu și pe server.

Citirea datelor în JS

form.addEventListener('submit', e => {
  e.preventDefault()
  const data = Object.fromEntries(new FormData(e.currentTarget))
})

FormData citește toate câmpurile cu name — același obiect pe care îl primește o Server Action. Cum lucrezi cu formulare în React (controlled, React Hook Form, Zod) — în tema Formulare.

Greșeli frecvente

• Input fără name → valoarea dispare la submit.
• Input fără label (doar placeholder) → inaccesibil și dispare la tastare.
• Butoane fără type care trimit formularul din greșeală.
• Validare doar pe client.

Pe scurt

• name decide ce se trimite, label for + id leagă eticheta.
• Tipul corect de input = validare + tastatură potrivită, gratis.
• Validează și pe server, mereu.

Surse oficiale

• MDN — Web forms
• MDN — <input> types
• MDN — Client-side form validation
• MDN — FormData