Validazione del modulo

Questo articolo spiega la validazione del modulo.

Spiega la validazione del modulo in HTML.

YouTube Video

Validazione del modulo HTML

Panoramica della validazione del modulo HTML

• La validazione del modulo HTML è un meccanismo per garantire che i dati soddisfino determinate condizioni prima che un utente li invii. Ciò riduce gli errori lato server e migliora l'esperienza dell'utente.

Attributo required

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" required placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• L'attributo required specifica che i campi di input devono essere compilati prima di inviare il modulo.

Attributo pattern

1<form>
2  <label for="username">Username (letters and numbers only):</label>
3  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]+" required>
4  <button type="submit">Submit</button>
5</form>

• L'attributo pattern viene utilizzato per verificare se l'input del modulo corrisponde a un determinato pattern regex. Ad esempio, questo verifica se il nome utente contiene solo caratteri alfanumerici.

Attributi min e max

1<form>
2    <label for="age">Age:</label>
3    <input type="number" id="age" name="age" min="18" max="99" placeholder="Enter your age">
4    <button type="submit">Submit</button>
5</form>

• Gli attributi <min> e <max> sono utilizzati per specificare i valori minimo e massimo consentiti per un elemento di input. Sono comunemente utilizzati con tipi di input come number, range e date.
• In questo esempio, puoi inserire un numero compreso tra 18 e 99.

Attributi minlength e maxlength

1<form>
2    <label for="username">Username:</label>
3    <input type="text" id="username" name="username" minlength="4" maxlength="12" placeholder="4-12 characters">
4    <button type="submit">Submit</button>
5</form>

• L'attributo minlength specifica il numero minimo di caratteri richiesti per un campo di input, mentre l'attributo maxlength definisce il numero massimo di caratteri consentiti.
• In questo esempio, puoi inserire un testo compreso tra 4 e 12 caratteri.

L'attributo type="email"

1<form>
2    <label for="email">Email:</label>
3    <input type="email" id="email" placeholder="Enter your email">
4    <button type="submit">Submit</button>
5</form>

• L'attributo type="email" viene utilizzato per garantire che l'input sia in un formato valido di indirizzo email. Questo attributo offre una funzionalità di convalida integrata per i campi di input degli indirizzi email.

L'attributo type="url"

1<form>
2    <label for="website">Website:</label>
3    <input type="url" id="website" name="website" placeholder="https://example.com" required>
4    <button type="submit">Submit</button>
5</form>

• <input type="url"> fornisce un campo di input che richiede un formato URL corretto. Il browser verifica automaticamente se l'input è valido come URL.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video