Validazione dell'input dei dati

6.1 Attributo required

La validazione dei dati nei form è un aspetto importante dello sviluppo web, che aiuta a garantire la correttezza e l'integrità delle informazioni inserite. HTML offre molti attributi integrati per controllare l'input dei dati, come required, pattern, min, max, oltre agli attributi placeholder e value, che migliorano l'interazione dell'utente con il form.

L'attributo required indica che il campo di input è obbligatorio. Il browser non permette di inviare il form se il campo contrassegnato con required non è compilato.

Sintassi

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

Esempio d'uso

    
      <form action="/" method="post">
        <label for="username">Nome utente:</label>
        <input type="text" id="username" name="username" required>
        <button type="submit">Invia</button>
      </form>
    
  

Spiegazione

Se l'attributo required è specificato, l'utente deve riempire il campo prima di inviare il form. Se il campo è vuoto, il browser mostrerà un messaggio di errore e non invierà il form.

6.2 Attributo pattern

L'attributo pattern permette di specificare un'espressione regolare per controllare l'input dei dati. Se i dati inseriti non corrispondono al pattern specificato, il browser mostrerà un messaggio di errore e non invierà il form.

Sintassi

    
      <input type="text" name="username" pattern="[A-Za-z]{3,}">
    
  

Esempio d'uso

L'attributo pattern specifica un'espressione regolare a cui devono corrispondere i dati inseriti. In questo esempio, il nome utente deve contenere solo lettere e deve essere lungo almeno tre caratteri.

    
      <form action="/" method="post">
        <label for="username">Nome utente (solo lettere, minimo 3 caratteri):</label>
        <input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
        <button type="submit">Invia</button>
      </form>
    
  

6.3 Attributi min e max

Gli attributi min e max vengono utilizzati per impostare i valori minimi e massimi consentiti per i campi numerici e di data.

Sintassi

    
      <input type="number" name="age" min="18" max="99">
    
  

Esempio d'uso

Campo numerico

• min: imposta il valore minimo consentito. In questo esempio, l'età minima è di 18 anni
• max: imposta il valore massimo consentito. In questo esempio, l'età massima è di 99 anni

    
      <form action="/" method="post">
        <label for="birthday">Data di nascita (dal 1900-01-01 al 2024-12-31):</label>
        <input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
        <button type="submit">Invia</button>
      </form>
    
  

6.4 Attributo placeholder

L'attributo placeholder imposta un testo segnaposto che appare all'interno del campo di input finché l'utente non inizia a digitare. Questo attributo aiuta gli utenti a capire quali dati sono attesi nel campo.

Sintassi

    
      <input type="text" name="username" placeholder="Inserisci il nome utente">
    
  

Esempio d'uso

L'attributo placeholder mostra il testo all'interno del campo di input fino a quando l'utente non inizia a digitare. In questo esempio, il testo segnaposto è "Inserisci il nome utente".

    
      <form action="/" method="post">
        <label for="username">Nome utente:</label>
        <input type="text" id="username" name="username" placeholder="Inserisci il nome utente" required>
        <button type="submit">Invia</button>
      </form>
    
  

6.5 Attributo value

L'attributo value imposta il valore iniziale per l'elemento di input. Questo valore sarà mostrato nel campo al caricamento della pagina o al reset del form.

Sintassi

    
      <input type="text" name="username" value="default user">
    
  

Esempio d'uso

L'attributo value imposta il valore iniziale del campo di input. In questo esempio, il nome utente di default è "default user".

    
      <form action="/" method="post">
        <label for="username">Nome utente:</label>
        <input type="text" id="username" name="username" value="default user" required>
        <button type="submit">Invia</button>
      </form>
    
  

1

Sondaggio/quiz

Form in HTML, livello 8, lezione 6

Non disponibile

Form in HTML

Form in HTML

Apri