Quando gli sviluppatori Web creano moduli in qualsiasi applicazione Internet, è necessario applicare la convalida. La convalida dei moduli è un processo cruciale in qualsiasi processo di sviluppo di applicazioni perché aiuta a prevenire minacce alla sicurezza o dati spazzatura nel database. L’applicazione delle convalide sul lato server può essere eseguita comodamente tramite un framework o strumenti di sviluppo utilizzati nel back-end. Sul front-end, tuttavia, a volte è doloroso per gli sviluppatori convalidare i moduli poiché richiede molti sforzi. È inoltre necessario utilizzare molte librerie JavaScript anche per le convalide dei moduli HTML, aumentando le conoscenze e gli sforzi necessari.

Per superare questo problema, HTML5 ci offre una serie di funzionalità per convalidare i moduli. Queste funzionalità possono gestire la maggior parte delle tue esigenze di convalida senza richiedere alcun codice JavaScript. HTML5 semplifica anche il controllo dello stile con i CSS. Inoltre, fornisce anche funzionalità di convalida integrate attraverso l’uso di attributi speciali e nuovi tipi di input.

Leggi: Introduzione ai moduli HTML5

Tipi di input e attributi HTML5

Di seguito è riportato un elenco di alcuni dei nuovi tipi di input e degli attributi associati presenti in HTML5:

• numero
• e-mail
• ricerca
• telefono
• URL
• gamma
• colore
• Data
• mese
• settimana
• tempo

I nuovi attributi introdotti in HTML5 includono:

• necessario
• messa a fuoco automatica
• completamento automatico
• segnaposto
• lunghezza minima
• sola lettura
• modello
• elenco

Esempio di convalida del modulo HTML5

Conoscere i nuovi tipi e attributi di input HTML5 è necessario per convalidare i moduli. Copriamo questo processo nella nostra prossima sezione.

L’attributo ‘richiesto’ in HTML5

Aggiungendo semplicemente il necessario attribuire a qualsiasi , </strong>, o <strong><seleziona></strong> elemento, dici al browser che è richiesto un valore in questo campo:</p> <pre><span style="font-weight: 400;"><form>            </span> <span style="font-weight: 400;"><span>Name</span></span> <span style="font-weight: 400;"><input type="text" name="name" required></span> <span style="font-weight: 400;"></form> </span></pre> <p></p> <p>Quando un utente tenta di inviare questo modulo senza inserire il campo richiesto, mostrerà un messaggio di avviso o semplicemente impedirà l’invio del modulo.</p> <p>Puoi anche usare il <b>necessario </b>attributo su caselle di controllo, pulsanti di opzione e menu a discesa di selezione. Con quello applicato a un campo modulo, non è possibile inviare un controllo modulo con un valore vuoto.</p> <p><strong>Leggi: </strong><a href="https://www.htmlgoodies.com/html/build-web-forms-html/" target="_blank" rel="noopener">Come costruire un modulo web con HTML</a></p> <h3>Limita i valori numerici sui moduli HTML5</h3> <p>Con HTML5, ora puoi impostare i limiti sui valori massimo e minimo per i numeri. Ad esempio, questo metodo impedisce l’immissione di qualsiasi stringa più lunga del limite massimo del campo. Se si tenta di incollare una stringa che supera il limite del campo, il modulo taglierà la stringa di conseguenza.</p> <p>Se stai usando un campo di testo o <strong>area di testo</strong>, quindi è necessario utilizzare il <b>lunghezza massima</b> attributo invece:</p> <form> <pre><span style="font-weight: 400;"><form>            </span> <span style="font-weight: 400;"><span>Age</span></span> <span style="font-weight: 400;"><input type="number" name="age" min="18" max="90" required></span> <span style="font-weight: 400;"></form></span></pre> </form> <h3><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11239" src="https://www.htmlgoodies.com/wp-content/uploads/2021/11/input-validation-HTML5.png" alt="Convalida input HTML5" width="172" height="91"/></h3> <h3>L’attributo pattern in HTML5</h3> <p>Il <b>modelli</b> attributo consente agli sviluppatori web di utilizzare <i>espressioni regolari</i>. Quando questo attributo viene applicato, indica al browser di confrontare il valore di <i>regex</i> con l’input fornito dall’utente; se corrisponde, sarà possibile inviare solo il modulo. Le espressioni regolari vengono utilizzate principalmente per filtrare i dati e forniscono un ottimo controllo sull’input inserito nei moduli web.</p> <p>Il seguente frammento di codice mostra come utilizzare le espressioni regolari nei moduli HTML5:</p> <pre><span style="font-weight: 400;"><input type="password" required pattern="^(?=.*d)[0-9a-zA-Z]{6,}$" title="Password should be a minimum of 6 character long and must contain at least one number"></span></pre> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11238" src="https://www.htmlgoodies.com/wp-content/uploads/2021/11/HTML5-input-limits.png" alt="Limiti di input HTML5" width="638" height="161" srcset="https://www.htmlgoodies.com/wp-content/uploads/2021/11/HTML5-input-limits.png 638w, https://www.htmlgoodies.com/wp-content/uploads/2021/11/HTML5-input-limits-300x76.png 300w" sizes="(max-width: 638px) 100vw, 638px"/></p> <p>In questo esempio, viene applicata un’espressione regolare a un campo password, che indica al browser di accettare solo la password che contiene almeno 6 caratteri, con almeno un valore numerico. Ecco come <b>modello</b> attributo utilizza espressioni regolari per filtrare i dati.</p> <h2>Stile con CSS in HTML5</h2> <p>I CSS3 sono dotati di pratiche pseudo-classi che ci permettono di dare uno stile a qualsiasi campo del form a seconda del suo stato. Queste classi sono le seguenti:</p> <ul> <li><strong>:valido</strong></li> <li><strong>:non valido</strong></li> <li><strong>:necessario</strong></li> <li><strong>:opzionale</strong></li> <li><strong>:in-range</strong></li> <li><strong>:fuori dal limite</strong></li> <li><strong>:sola lettura</strong></li> <li><strong>:leggere scrivere</strong></li> </ul> <p>Per capire come funzionano queste pseudo-classi CSS, considera il seguente esempio di codice:</p> <pre><span style="font-weight: 400;"><form>            </span> <span style="font-weight: 400;"><span>Age</span></span> <span style="font-weight: 400;"><input type="number" name="age" min="18" required></span> <span style="font-weight: 400;"></form></span></pre> <form>La seguente serie di stili può essere utilizzata per contrassegnare la casella di input come non valida colorando il bordo di rosso. Si applica all’input che ha una condizione che non è stata ancora soddisfatta. Ad esempio, nel “<b>Età</b>campo “, se inserisci un valore inferiore a <b>18</b>, il colore del bordo diventa rosso, contrassegnandolo come un campo errato.<br /> </form> <pre><span style="font-weight: 400;"><style type="text/css"></span> <span style="font-weight: 400;"> input:focus:invalid</span> <span style="font-weight: 400;">        {</span> <span style="font-weight: 400;">            border:1px solid #F5192F;</span> <span style="font-weight: 400;">            box-shadow:0 0 4px #F5192F;</span> <span style="font-weight: 400;">        }</span> <span style="font-weight: 400;"></style></span></pre> <p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11237" src="https://www.htmlgoodies.com/wp-content/uploads/2021/11/Form-validation-HTML5-examples.png" alt="Convalida del modulo HTML5" width="117" height="86" srcset="https://www.htmlgoodies.com/wp-content/uploads/2021/11/Form-validation-HTML5-examples.png 117w, https://www.htmlgoodies.com/wp-content/uploads/2021/11/Form-validation-HTML5-examples-80x60.png 80w" sizes="(max-width: 117px) 100vw, 117px"/></p> <p>Per un input valido, puoi utilizzare i seguenti stili:</p> <pre><span style="font-weight: 400;"><style type="text/css"></span> <span style="font-weight: 400;">        input:focus:valid,</span> <span style="font-weight: 400;">        {</span> <span style="font-weight: 400;">            border: 1px solid #64C364;</span> <span style="font-weight: 400;">            box-shadow: 0 0 4px #64C364;</span> <span style="font-weight: 400;">        }</span> <span style="font-weight: 400;"></style></span></pre> <h2><img decoding="async" loading="lazy" class="alignnone size-full wp-image-11236" src="https://www.htmlgoodies.com/wp-content/uploads/2021/11/validating-HTML5-forms.png" alt="Convalida moduli HTML5" width="127" height="86"/></h2> <p><strong>Leggi:</strong> <a href="https://www.htmlgoodies.com/css/style-radio-buttons-checkboxes-css/" target="_blank" rel="noopener">Disegnare pulsanti di opzione e caselle di controllo nei moduli HTML</a></p> <h2>Altri tipi di input HTML5</h2> <p>HTML5 ha introdotto alcuni nuovi tipi di input. Questi tipi di input sono facili da usare e funzionano perfettamente su browser basati su dispositivi mobili e browser basati su desktop. Sono stati inventati per accettare solo dati specificati. Ecco l’elenco di alcuni tipi di input HTML5 utilizzati di frequente:</p> <ul> <li><strong>URL</strong></li> <li><strong>colore</strong></li> <li><strong>Data</strong></li> <li><strong>ricerca</strong></li> <li><strong>telefono</strong></li> <li><strong>tempo</strong></li> </ul> <p>Per utilizzare uno di questi tipi di input, puoi includerli come valore dell’attributo type. Ad esempio, dai un’occhiata al seguente frammento di codice:</p> <pre><span style="font-weight: 400;"><input type="url" placeholder="Enter your Website" required></span></pre> <p>Nota che alcuni dei campi di input, come “<b>telefono</b>” e “<b>e-mail</b>” si comportano diversamente su un dispositivo mobile. Faranno sì che un dispositivo mobile apra una tastiera specifica con un numero limitato di tasti e non il pieno <b>QWERTY</b> tastiera del computer. Un’altra cosa da tenere presente è che se un tipo di input specifico non è supportato su un browser, si comporterà semplicemente come un normale campo di input di testo su quel browser.</p> <p>Speriamo che questo post ti abbia aiutato ad aggiornarti con la convalida dei moduli HTML5. Grazie per aver letto!</p> </div> <p><a href="https://www.htmlgoodies.com/html5/validations-in-html5-forms/">Source link </a><br /></p> <div class="post-share"> <div class="post-share-icons cf"> <a href="https://www.facebook.com/sharer.php?u=https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/convalide-nei-moduli-html5-www-htmlgoodies-com/" class="link facebook" target="_blank" > <i class="fab fa-facebook"></i></a> <a href="http://twitter.com/share?url=https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/convalide-nei-moduli-html5-www-htmlgoodies-com/&text=Convalide%20nei%20moduli%20HTML5%20%7C%20%20www.HTMLGoodies.com" class="link twitter" target="_blank"> <i class="fab fa-twitter"></i></a> <a href="mailto:?subject=Convalide%20nei%20moduli%20HTML5%20|%20%20www.HTMLGoodies.com&body=https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/convalide-nei-moduli-html5-www-htmlgoodies-com/" class="link email" target="_blank" > <i class="fas fa-envelope"></i></a> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/convalide-nei-moduli-html5-www-htmlgoodies-com/&title=Convalide%20nei%20moduli%20HTML5%20%7C%20%20www.HTMLGoodies.com" class="link linkedin" target="_blank" > <i class="fab fa-linkedin"></i></a> <a href="https://telegram.me/share/url?url=https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/convalide-nei-moduli-html5-www-htmlgoodies-com/&text&title=Convalide%20nei%20moduli%20HTML5%20%7C%20%20www.HTMLGoodies.com" class="link telegram" target="_blank" > <i class="fab fa-telegram"></i></a> <a href="javascript:pinIt();" class="link pinterest"><i class="fab fa-pinterest"></i></a> </div> </div> <div class="clearfix mb-3"></div> <nav class="navigation post-navigation" aria-label="Articoli"> <h2 class="screen-reader-text">Navigazione articoli</h2> <div class="nav-links"><div class="nav-previous"><a href="https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/un-tema-di-blocco-sperimentale-gratuito-woocommerce-wp-tavern/" rel="prev">Prev <div class="fas fa-angle-double-right"></div><span></span></a></div><div class="nav-next"><a href="https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/human-presence-vs-akismet-vs-google-recaptcha-per-wordpress-spam/" rel="next"><div class="fas fa-angle-double-left"></div><span></span> Next</a></div></div> </nav> </article> </div> <div class="media mg-info-author-block"> <a class="mg-author-pic" href="https://blog.serrasimone.it/author/simone/"><img alt='' src='https://blog.serrasimone.it/wp-content/uploads/2019/10/2013-09-21-17.57.30-1-sepia-501x557-1-150x150.jpg' srcset='https://blog.serrasimone.it/wp-content/uploads/2019/10/2013-09-21-17.57.30-1-sepia-501x557-1-300x300.jpg 2x' class='avatar avatar-150 photo' height='150' width='150' loading='lazy' decoding='async'/></a> <div class="media-body"> <h4 class="media-heading">Di <a href ="https://blog.serrasimone.it/author/simone/">Simone Serra</a></h4> <p>Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.</p> </div> </div> <div class="mg-featured-slider p-3 mb-4"> <!--Start mg-realated-slider --> <div class="mg-sec-title"> <!-- mg-sec-title --> <h4>Articoli correlati</h4> </div> <!-- // mg-sec-title --> <div class="row"> <!-- featured_post --> <!-- blog --> <div class="col-md-4"> <div class="mg-blog-post-3 minh back-img" style="background-image: url('https://blog.serrasimone.it/wp-content/uploads/2024/04/how-to-display-most-popular-tags-in-wordpress-facebook.png');" > <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://blog.serrasimone.it/category/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/" alt="Visualizza tutti gli articoli in News Sviluppo Realizzazione Siti Web Wordpress Serra Simone"> News Sviluppo Realizzazione Siti Web Wordpress Serra Simone </a> </div> <h4 class="title"> <a href="https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/come-visualizzare-i-tag-piu-popolari-in-wordpress-2-metodi-semplici/" title="Permalink to: Come visualizzare i tag più popolari in WordPress (2 metodi semplici)"> Come visualizzare i tag più popolari in WordPress (2 metodi semplici)</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> Apr 18, 2024</span> <a href="https://blog.serrasimone.it/author/simone/"> <i class="fas fa-user-circle"></i> Simone Serra</a> </div> </div> </div> </div> <!-- blog --> <!-- blog --> <div class="col-md-4"> <div class="mg-blog-post-3 minh back-img" style="background-image: url('https://blog.serrasimone.it/wp-content/uploads/2024/04/make-money-of-passive-income-every-month-og.png');" > <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://blog.serrasimone.it/category/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/" alt="Visualizza tutti gli articoli in News Sviluppo Realizzazione Siti Web Wordpress Serra Simone"> News Sviluppo Realizzazione Siti Web Wordpress Serra Simone </a> </div> <h4 class="title"> <a href="https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/come-guadagnare-5000-di-reddito-passivo-ogni-mese-in-wordpress/" title="Permalink to: Come guadagnare $ 5000 di reddito passivo ogni mese in WordPress"> Come guadagnare $ 5000 di reddito passivo ogni mese in WordPress</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> Apr 18, 2024</span> <a href="https://blog.serrasimone.it/author/simone/"> <i class="fas fa-user-circle"></i> Simone Serra</a> </div> </div> </div> </div> <!-- blog --> <!-- blog --> <div class="col-md-4"> <div class="mg-blog-post-3 minh back-img" style="background-image: url('https://blog.serrasimone.it/wp-content/uploads/2024/04/how-to-limit-comment-length-in-wordpress-facebook.png');" > <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://blog.serrasimone.it/category/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/" alt="Visualizza tutti gli articoli in News Sviluppo Realizzazione Siti Web Wordpress Serra Simone"> News Sviluppo Realizzazione Siti Web Wordpress Serra Simone </a> </div> <h4 class="title"> <a href="https://blog.serrasimone.it/news-sviluppo-realizzazione-siti-web-wordpress-serra-simone/come-limitare-la-lunghezza-dei-commenti-in-wordpress-tutorial-semplice/" title="Permalink to: Come limitare la lunghezza dei commenti in WordPress (tutorial semplice)"> Come limitare la lunghezza dei commenti in WordPress (tutorial semplice)</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> Apr 16, 2024</span> <a href="https://blog.serrasimone.it/author/simone/"> <i class="fas fa-user-circle"></i> Simone Serra</a> </div> </div> </div> </div> <!-- blog --> </div> </div> <!--End mg-realated-slider --> </div> <style> @media (min-width: 768px) { .col-md-9 { -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; display: grid; margin: 0 auto; } } </style> </div> </div> </main> <!--==================== FOOTER AREA ====================--> <footer> <div class="overlay" style="background-color: #111111;"> <!--Start mg-footer-widget-area--> <!--End mg-footer-widget-area--> <!--Start mg-footer-widget-area--> <div class="mg-footer-bottom-area"> <div class="container-fluid"> <div class="divide-line"></div> <div class="row align-items-center"> <!--col-md-4--> <div class="col-md-6"> <a href="https://blog.serrasimone.it/" class="navbar-brand" rel="home"><img src="https://blog.serrasimone.it/wp-content/uploads/2021/12/logo-nuovo-verde.svg" class="custom-logo" alt="realizzazione siti web" decoding="async" /></a> <div class="site-branding-text"> <h1 class="site-title-footer"> <a href="https://blog.serrasimone.it/" rel="home">Serra Simone Web Developer</a></h1> <p class="site-description-footer">Realizzazione Siti Web Wordpress</p> </div> </div> </div> <!--/row--> </div> <!--/container--> </div> <!--End mg-footer-widget-area--> <div class="mg-footer-copyright"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 text-xs"> <p> <a href="https://serrasimone.it" rel="designer">Serra Simone Web Developer</a> </p> </div> <div class="col-md-6 text-right text-xs"> <ul id="menu-main-menu" class="info-right"><li id="menu-item-372556" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-372556"><a class="nav-link" title="Cookie Policy (UE)" href="https://blog.serrasimone.it/cookie-policy-ue/">Cookie Policy (UE)</a></li> <li id="menu-item-372557" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-372557"><a class="nav-link" title="Privacy Policy" href="https://www.iubenda.com/privacy-policy/79567847/legal">Privacy Policy</a></li> </ul> </div> </div> </div> </div> </div> <!--/overlay--> </footer> <!--/footer--> </div> </div> <!--/wrapper--> <!--Scroll To Top--> <a href="#" class="ta_upscr bounceInup animated"><i class="fas fa-angle-up"></i></a> <!--/Scroll To Top--> <!-- /Scroll To Top --> <script src="https://blog.serrasimone.it/wp-content/cache/min/1/eb3862dfd300bef1ab746ff6aeb18f38.js" data-minify="1"></script></body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me - Debug: cached@1713466861 -->