{"id":24784,"date":"2024-01-25T19:42:31","date_gmt":"2024-01-25T18:42:31","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-los-formularios-interactivos-con-html5-y-js\/"},"modified":"2024-06-03T17:37:32","modified_gmt":"2024-06-03T16:37:32","slug":"domina-los-formularios-interactivos-con-html5-y-js","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/","title":{"rendered":"Master Interactive Forms with HTML5 and JS"},"content":{"rendered":"<p>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.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/#Comprendiendo_la_Estructura_de_un_Formulario_en_HTML5\" >Understanding the Structure of an HTML5 Form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/#Enriqueciendo_con_Atributos_HTML5\" >Enriching with HTML5 Attributes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/#Validacion_de_Formulario_con_HTML5_y_JS\" >Form Validation with HTML5 and JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/#Eventos_y_Dinamismo_en_tu_Formulario\" >Events and Dynamism in your Form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/#Integrando_APIs_y_Datos_Externos\" >Integrating APIs and External Data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/#Estilos_y_Responsividad\" >Styles and Responsiveness<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/#Pruebas_y_Aseguramiento_de_Calidad\" >Testing and Quality Assurance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-interactive-forms-with-html5-and-js\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Comprendiendo_la_Estructura_de_un_Formulario_en_HTML5\"><\/span>Understanding the Structure of an HTML5 Form<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>HTML5 has introduced a variety of form elements that make it easy to create rich and intuitive forms. Here are some essential elements:<\/p>\n<ul>\n<li><code><form><\/code>: The main container where the entire form resides.<\/li>\n<li><code><label><\/code>: Provides labels for fields, improving accessibility.<\/li>\n<li><code><input><\/code>: The battlefield, with different types such as text, password, email, etc.<\/li>\n<li><code><textarea><\/code>: For multi-line text input.<\/li>\n<li><code><button><\/code>: The action triggers on the form.<\/li>\n<\/ul>\n<p>Example of basic structure:<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><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>\n<h2><span class=\"ez-toc-section\" id=\"Enriqueciendo_con_Atributos_HTML5\"><\/span>Enriching with HTML5 Attributes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>HTML5 offers attributes that improve the interactivity of your forms:<\/p>\n<ul>\n<li><code>placeholder<\/code>: Displays sample text within a field.<\/li>\n<li><code>required<\/code>: Mark a field as required.<\/li>\n<li><code>patterns<\/code>: Validates the data according to a regular expression.<\/li>\n<li><code>autofocus<\/code>: Automatically focuses a field on page load.<\/li>\n<\/ul>\n<p>Increasing functionality with these attributes:<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><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>\n<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>\n<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>\n<pre><code class=\"&quot;language-javascript&quot;\">document.addEventListener(&quot;DOMContentLoaded&quot;, function() { const form = document.querySelector(&quot;form&quot;); form.addEventListener(&quot;submit&quot;, function(event) { const username = form.elements.username.value; if ( username.length &lt; 4) { alert(&quot;Username must be at least 4 characters&quot;); event.preventDefault(); \/\/ Prevent the default action (form submission) } });<\/code><\/pre>\n<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>\n<p>By taking advantage of JavaScript events, we can make our form respond in real time to user actions:<\/p>\n<ul>\n<li><code>focus<\/code> y <code>blur<\/code>: Activated when entering or leaving a field.<\/li>\n<li><code>change<\/code> y <code>input<\/code>: Detect changes in input fields.<\/li>\n<\/ul>\n<p>An example script that changes the background as you type:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.addEventListener(&quot;DOMContentLoaded&quot;, function() { const inputFields = document.querySelectorAll(&quot;input&quot;); inputFields.forEach(function(field) { field.addEventListener(&quot;input&quot;, function() { field.style.backgroundColor = &quot;#e0f0d9&quot;; }); field.addEventListener(&quot;blur&quot;, function() { field.style.backgroundColor = &quot;&quot;; });<\/code><\/pre>\n<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>\n<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>\n<pre><code class=\"&quot;language-javascript&quot;\">const zipCodeField = document.querySelector(&quot;#zipcode&quot;); zipCodeField.addEventListener(&quot;blur&quot;, function() { const zipCode = zipCodeField.value; fetch(`https:\/\/api.zippopotam.us\/es\/${zipCode}`) .then(response =&gt; response.json( )) .then(data =&gt; { const cityField = document.querySelector(&quot;#city&quot;); cityField.value = data.places[0][&#039;place name&#039;]; }) .catch(error =&gt; { console. error(&quot;Error searching for city.&quot;, error);<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Estilos_y_Responsividad\"><\/span>Styles and Responsiveness<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Looks also count. CSS3 together with HTML5 allows us to create not only functional but also attractive and adaptive forms:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">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>\n<p>Additionally, by using media queries, we ensure that our forms look good on any device.<\/p>\n<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>\n<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>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<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>\n<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&#039;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>","protected":false},"excerpt":{"rendered":"<p>Crear un formulario web puede parecer una tarea com\u00fan, pero su importancia es esencial en la interacci\u00f3n usuario-servidor. Son la base para recopilar datos, realizar encuestas, registrar usuarios y m\u00e1s. Con HTML5 y JavaScript, los formularios se han transformado, permitiendo una interactividad y dinamismo sin precedentes. En este recorrido, te guiar\u00e9 paso a paso para [&hellip;]<\/p>","protected":false},"author":1,"featured_media":24785,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,90,1473,492,782,1086,221],"class_list":["post-24784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-con","tag-domina","tag-formularios","tag-html5","tag-interactivos","tag-los"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=24784"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24784\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/24785"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=24784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=24784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=24784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}