Master Interactive Forms with HTML5 and JS

Creating a web form may seem like a common task, but its importance is essential in user-server interaction. They are the basis for collecting data, conducting surveys, registering users and more. With HTML5 and JavaScript, forms have been transformed, allowing unprecedented interactivity and dynamism. In this journey, I will guide you step by step to build forms that not only collect information, but also provide an engaging user experience.

Understanding the Structure of an HTML5 Form

HTML5 has introduced a variety of form elements that make it easy to create rich and intuitive forms. Here are some essential elements:

• : The main container where the entire form resides.
• : Provides labels for fields, improving accessibility.
• : The battlefield, with different types such as text, password, email, etc.
• </code>: For multi-line text input.</li> <li><code><button></code>: The action triggers on the form.</li> </ul> <p>Example of basic structure:</p> <pre><code class=""language-html""><form><label for="name">Name:</label><input type="text" id="name" name="user_name"> <label for="email">E-mail:</label><input type="email" id="email" name="user_email"> <button type="submit">Send</button></form></code></pre> <h2><span class="ez-toc-section" id="Enriqueciendo_con_Atributos_HTML5"></span>Enriching with HTML5 Attributes<span class="ez-toc-section-end"></span></h2> <p>HTML5 offers attributes that improve the interactivity of your forms:</p> <ul> <li><code>placeholder</code>: Displays sample text within a field.</li> <li><code>required</code>: Mark a field as required.</li> <li><code>patterns</code>: Validates the data according to a regular expression.</li> <li><code>autofocus</code>: Automatically focuses a field on page load.</li> </ul> <p>Increasing functionality with these attributes:</p> <pre><code class=""language-html""><form><label for="username">User:</label> <input type="text" id="username" name="username" placeholder="Tu nombre de usuario"> <label for="password">Password:</label><input type="password" id="password" name="password"> <button type="submit">Record</button></form></code></pre> <h2><span class="ez-toc-section" id="Validacion_de_Formulario_con_HTML5_y_JS"></span>Form Validation with HTML5 and JS<span class="ez-toc-section-end"></span></h2> <p>Validation is crucial to ensure consistent and complete data. HTML5 does its part well, but with JavaScript we go further. A simple example:</p> <pre><code class=""language-javascript"">document.addEventListener("DOMContentLoaded", function() { const form = document.querySelector("form"); form.addEventListener("submit", function(event) { const username = form.elements.username.value; if ( username.length < 4) { alert("Username must be at least 4 characters"); event.preventDefault(); // Prevent the default action (form submission) } });</code></pre> <h2><span class="ez-toc-section" id="Eventos_y_Dinamismo_en_tu_Formulario"></span>Events and Dynamism in your Form<span class="ez-toc-section-end"></span></h2> <p>By taking advantage of JavaScript events, we can make our form respond in real time to user actions:</p> <ul> <li><code>focus</code> y <code>blur</code>: Activated when entering or leaving a field.</li> <li><code>change</code> y <code>input</code>: Detect changes in input fields.</li> </ul> <p>An example script that changes the background as you type:</p> <pre><code class=""language-javascript"">document.addEventListener("DOMContentLoaded", function() { const inputFields = document.querySelectorAll("input"); inputFields.forEach(function(field) { field.addEventListener("input", function() { field.style.backgroundColor = "#e0f0d9"; }); field.addEventListener("blur", function() { field.style.backgroundColor = ""; });</code></pre> <h2><span class="ez-toc-section" id="Integrando_APIs_y_Datos_Externos"></span>Integrating APIs and External Data<span class="ez-toc-section-end"></span></h2> <p>With HTML5 and JavaScript, we can easily connect our forms with APIs to search for additional information or validate data in real time:</p> <pre><code class=""language-javascript"">const zipCodeField = document.querySelector("#zipcode"); zipCodeField.addEventListener("blur", function() { const zipCode = zipCodeField.value; fetch(`https://api.zippopotam.us/es/${zipCode}`) .then(response => response.json( )) .then(data => { const cityField = document.querySelector("#city"); cityField.value = data.places[0]['place name']; }) .catch(error => { console. error("Error searching for city.", error);</code></pre> <h2><span class="ez-toc-section" id="Estilos_y_Responsividad"></span>Styles and Responsiveness<span class="ez-toc-section-end"></span></h2> <p>Looks also count. CSS3 together with HTML5 allows us to create not only functional but also attractive and adaptive forms:</p> <pre><code class=""language-css"">form { max-width: 500px; margin: self; background-color: #f2f2f2; padding: 20px; border-radius: 5px; } input, button { width: 100%; padding: 10px; margin-top: 5px; border-radius: 5px; }</code></pre> <p>Additionally, by using media queries, we ensure that our forms look good on any device.</p> <h2><span class="ez-toc-section" id="Pruebas_y_Aseguramiento_de_Calidad"></span>Testing and Quality Assurance<span class="ez-toc-section-end"></span></h2> <p>Before releasing your form to the world, check that everything is working correctly. Testing should include cross-browser verification, validating the response on mobile devices, and ensuring that all validations work as intended.</p> <h2><span class="ez-toc-section" id="Conclusion"></span>Conclusion<span class="ez-toc-section-end"></span></h2> <p>The creation of interactive forms with HTML5 and JavaScript is a door to the development of a more dynamic and attractive website. It is not just about collecting data, but about creating experiences marked by usability and design. Make sure you give them that personal touch that makes your users feel comfortable interacting with them.</p> <p>Explore more about web development and how to create impactful user experiences by visiting <a href="https://nelkodev.com/en/">NelkoDev</a>. And if you have a project in mind or need advice for your forms, don't hesitate to <a href="https://nelkodev.com/en/contact/">contact me</a>. Together, we can bring your ideas to life on the web.</p> </div> </div> <div class="elementor-element elementor-element-35c3803e elementor-share-buttons--skin-flat elementor-share-buttons--shape-rounded elementor-grid-4 elementor-grid-mobile-2 elementor-share-buttons--color-custom elementor-share-buttons--view-icon-text elementor-widget elementor-widget-share-buttons" data-id="35c3803e" data-element_type="widget" data-widget_type="share-buttons.default"> <div class="elementor-widget-container"> <div class="elementor-grid"> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_facebook" role="button" tabindex="0" aria-label="Share on facebook" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fab fa-facebook" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Facebook </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_twitter" role="button" tabindex="0" aria-label="Share on twitter" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fab fa-twitter" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Twitter </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_email" role="button" tabindex="0" aria-label="Share on email" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fas fa-envelope" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Email </span> </div> </div> </div> <div class="elementor-grid-item"> <div class="elementor-share-btn elementor-share-btn_print" role="button" tabindex="0" aria-label="Share on print" data-no-translation-aria-label="" > <span class="elementor-share-btn__icon"> <i class="fas fa-print" aria-hidden="true"></i> </span> <div class="elementor-share-btn__text"> <span class="elementor-share-btn__title"> Print </span> </div> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-3d9b9fee elementor-author-box--avatar-yes elementor-author-box--name-yes elementor-author-box--biography-yes elementor-author-box--link-no elementor-widget elementor-widget-author-box" data-id="3d9b9fee" data-element_type="widget" data-widget_type="author-box.default"> <div class="elementor-widget-container"> <div class="elementor-author-box"> <div class="elementor-author-box__avatar"> <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Picture of NelkoDev" loading="lazy" data-src="https://secure.gravatar.com/avatar/4f004709043429b920c90afc7c3c4106?s=300&d=mm&r=g" decoding="async" class="lazyload" data-no-translation-alt=""><noscript><img src="https://secure.gravatar.com/avatar/4f004709043429b920c90afc7c3c4106?s=300&d=mm&r=g" alt="Picture of NelkoDev" loading="lazy" data-eio="l" data-no-translation-alt=""></noscript> </div> <div class="elementor-author-box__text"> <div > <div class="elementor-author-box__name"> NelkoDev </div> </div> <div class="elementor-author-box__bio"> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-b7ef0a1 elementor-widget elementor-widget-post-comments" data-id="b7ef0a1" data-element_type="widget" data-widget_type="post-comments.theme_comments"> <div class="elementor-widget-container"> <section id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h2 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/en/blog/master-interactive-forms-with-html5-and-js/#respond" style="display:none;" data-no-translation="" data-trp-gettext="">Cancel reply</a></small></h2><form action="/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate data-trp-original-action="https://nelkodev.com/wp-comments-post.php"><p class="comment-notes"><span id="email-notes" data-no-translation="" data-trp-gettext="">Your email address will not be published.</span> <span class="required-field-message" data-no-translation="" data-trp-gettext="">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

  Name *

  Email *