required pattern min max e maxlength
Aggiungere vincoli di convalida integrati agli input dei moduli
required pattern min max e maxlength è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Validazione dei moduli HTML5
HTML5 ha introdotto la validazione integrata dei moduli: non è necessario JavaScript:
- I browser verificano i vincoli prima dell'invio
- I messaggi di errore nativi vengono visualizzati automaticamente
- Funziona con le pseudo-classi CSS
:valid/:invalid
required
L'attributo required impedisce l'invio se il campo è vuoto:
<label for="email">Email (required)</label>
<input type="email" id="email" name="email" required>
<!-- Empty on submit → browser shows "Please fill in this field" -->
<!-- Also: field is :invalid until filled -->pattern
L'attributo pattern verifica il testo rispetto a un'espressione regolare:
<label for="username">Username (letters and numbers only)</label>
<input
type="text"
id="username"
name="username"
pattern="[a-zA-Z0-9]{3,20}"
title="3-20 letters and numbers"
>
<!-- pattern anchored at both ends automatically -->
<!-- title provides the error message hint -->Esempi di pattern comuni
Pattern regex utili per i campi dei moduli:
<!-- Phone: digits, spaces, hyphens -->
<input type="tel" pattern="[0-9 ()+-]{7,20}">
<!-- Postal code: US zip code -->
<input type="text" pattern="[0-9]{5}(-[0-9]{4})?">
<!-- Password: min 8 chars, one uppercase, one digit -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">
<!-- Twitter handle: -->
<input type="text" pattern="@?[A-Za-z0-9_]{1,15}">min e max
Limitare i valori degli input numerici, di data e di intervallo:
<!-- Number range -->
<input type="number" name="qty" min="1" max="100">
<!-- Date range -->
<input type="date" name="checkin" min="2025-01-01" max="2025-12-31">
<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">
<!-- Time -->
<input type="time" name="meeting" min="09:00" max="17:00">maxlength e minlength
Controllare la lunghezza dell'input di testo:
<input type="text" name="username" minlength="3" maxlength="20">
<!-- minlength: minimum number of characters required -->
<!-- maxlength: maximum characters allowed (browser enforces hard stop) -->
<textarea name="bio" minlength="50" maxlength="500"></textarea>
<!-- Same attributes work on textarea -->step
L'attributo step definisce gli incrementi validi per gli input number e range:
<input type="number" name="price" min="0" step="0.01">
<!-- Accepts decimal prices: 0.00, 0.01, 4.99, etc. -->
<input type="number" name="qty" min="0" step="5">
<!-- Only multiples of 5: 0, 5, 10, 15... -->
<input type="range" min="0" max="100" step="10">
<!-- Snaps to: 0, 10, 20, ..., 100 -->CSS :valid e :invalid
Applicare stili ai campi in base al loro stato di validazione:
input:valid {
border-color: #22c55e; /* green when valid */
}
input:invalid {
border-color: #ef4444; /* red when invalid */
}
/* Avoid showing :invalid on page load (before user interaction): */
input:not(:placeholder-shown):invalid {
border-color: #ef4444;
}
/* Only show invalid style after user has typed something */title per messaggi di errore personalizzati
L'attributo title fornisce un suggerimento nell'errore di validazione del browser:
<input
type="text"
pattern="[A-Za-z]{2,3}"
title="Enter a 2 or 3 letter country code (e.g. US, GB, DEU)"
name="country-code"
>
<!-- Browser shows the title text alongside the default error message -->Combinazione dei vincoli
Più attributi di validazione possono essere usati insieme:
<input
type="text"
name="username"
required
minlength="3"
maxlength="20"
pattern="[a-z][a-z0-9_]*"
title="Lowercase letters, numbers, underscores. Must start with a letter."
>
<!-- All constraints must pass for the field to be :valid -->novalidate e tempistica della validazione
Per impostazione predefinita, la validazione viene eseguita al momento dell'invio. Per eseguirla a ogni evento input:
<input type="email" id="email">
<script>
const input = document.getElementById('email');
input.addEventListener('blur', () => {
// Check validity on blur (when user leaves field):
if (!input.validity.valid) {
input.reportValidity();
}
});
</script>Riepilogo delle pseudo-classi di validazione
Pseudo-classi CSS per la validazione dei moduli:
:valid— la validazione dei vincoli è stata superata:invalid— uno o più vincoli non sono stati soddisfatti:required— l'attributo required è presente:optional— l'attributo required non è presente:in-range— il valore rientra nei limiti min/max:out-of-range— il valore è esterno ai limiti min/max
Verifica rapida
Quale attributo limita il numero massimo di caratteri in un input di testo?
Riepilogo: attributi di validazione
Elementi essenziali della validazione HTML5:
required— il campo deve essere compilatopattern— verifica rispetto a una regexmin/max— limiti del valore per number/date/rangemaxlength/minlength— limiti del numero di caratteristep— incrementi validi:valid/:invalidin CSS per applicare stili
Domande Frequenti
La lezione «required pattern min max e maxlength» è gratuita?
Sì — il testo completo di «required pattern min max e maxlength» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «required pattern min max e maxlength»?
Aggiungere vincoli di convalida integrati agli input dei moduli Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «required pattern min max e maxlength»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- required pattern min max e maxlength
- L’attributo novalidate
- Nozioni di base sulla Constraint Validation API
- Convalida HTML5 e JavaScript a confronto