Informatică Dezvoltare web
Formulare HTML cu validare simpla
Pentru a adăuga validare simplă la un formular HTML, folosești atribute încorporate precum required pentru a face câmpurile obligatorii și type="email" sau pattern pentru a verifica formatul datelor. De exemplu, <input type="email" required> forțează utilizatorul să introducă o adresă de email validă înainte de trimitere. Această validare este client-side și funcționează în browsere moderne.
Atribute de validare
- required Adaugă required la un input pentru a-l face obligatoriu, cum ar fi <input type="text" name="nume" required>; browserul va afișa o eroare dacă câmpul este gol.
- type="email" Folosește type="email" pentru a verifica dacă inputul conține o adresă de email validă, de exemplu <input type="email" name="email" required>.
- pattern Utilizează pattern cu o expresie regulată pentru validare personalizată, cum ar fi pattern="[A-Za-z]{3}" pentru a accepta doar 3 litere.
- minlength și maxlength Specifică minlength și maxlength pentru a limita lungimea textului, de exemplu <input type="text" minlength="2" maxlength="50"> pentru un nume între 2 și 50 de caractere.
Exemplu de formular cu validare
- Cod HTML <form> <label>Nume: <input type="text" name="nume" required minlength="2"></label><br> <label>Email: <input type="email" name="email" required></label><br> <label>Parolă: <input type="password" name="parola" required pattern="(?=.*\d).{6,}" title="Minim 6 caractere, incluzând o cifră"></label><br> <button type="submit">Înregistrează</button> </form>
- Explicație validare Numele este obligatoriu și trebuie să aibă cel puțin 2 caractere; emailul trebuie să fie valid; parola necesită minim 6 caractere și cel puțin o cifră, cu un mesaj de eroare personalizat via title.
- Testare Încarcă formularul într-un browser și încearcă să-l trimiți cu date invalide pentru a vedea mesajele de eroare afișate automat.
Validarea HTML este rapidă, dar pentru securitate sporită, combin-o cu validare server-side pentru a preveni manipularea datelor.