In questo articolo, impareremo come creare un modulo di iscrizione reattivo in HTML e CSS. Vedremo anche come aggiungere una semplice convalida della password utilizzando javascript.
Per qualsiasi tipo di sito web, un modulo di iscrizione è essenziale. I clienti avranno un modo semplice per saperne di più sulla tua organizzazione se hai un modulo di iscrizione sul tuo sito web. Ancora più importante, stai consentendo alla tua azienda di accedere al giusto tipo di abbonati e ai loro dati (con il loro permesso, ovviamente).
Il codice per questo modello di modulo di iscrizione è semplice e facile da capire. Per nostra comodità, abbiamo incluso lo stile e il codice javascript all’interno del file HTML principale. abbiamo usato il modulo HTML per dare una struttura di base al modulo di iscrizione. Abbiamo cercato di creare un design neumorfico per questa forma.
Per la convalida della password, abbiamo utilizzato la corrispondenza dei pattern regex utilizzando javascript. Per saperne di più visita-Espressioni regolari. Per questo particolare design, abbiamo impostato il modello di password in modo tale che dovrebbe essere alfanumerico con 8-15 caratteri. Se la password immessa dall’utente non segue lo schema, il bordo del campo di immissione della password diventa rosso e se corrisponde diventa verde. Simile è anche per confermare la password. Inoltre, il modulo controlla anche se la password inserita nel campo Conferma password corrisponde o meno alla password inserita in precedenza.
Di seguito è riportato il codice sorgente per il modulo di iscrizione HTML. Ti consigliamo di guardare il video incorporato qui sotto insieme al codice.
CODICE:
È possibile scaricare il codice HTML del modulo di iscrizione da questo link.
Leggi anche:
- Come creare una pagina di accesso trasparente reattiva in HTML e CSS ?
- Come creare un modello di pagina di contatto reattivo utilizzando HTML e CSS?
- Come creare un modulo di accesso di base e un modulo di registrazione utilizzando HTML e CSS?
- Come rendere la pagina 404 reattiva non trovata in HTML e CSS?