{"id":24772,"date":"2024-04-09T02:16:45","date_gmt":"2024-04-09T01:16:45","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/guia-completa-uso-de-inputtypenumber-en-formularios-html\/"},"modified":"2024-06-03T17:37:28","modified_gmt":"2024-06-03T16:37:28","slug":"guia-completa-uso-de-inputtypenumber-en-formularios-html","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/complete-guide-using-inputtypenumber-in-html-forms\/","title":{"rendered":"Complete Guide: Using input[type=number] in HTML Forms"},"content":{"rendered":"<p>When we are faced with the task of collecting numerical data on a website, it is essential to have tools that facilitate the entry and validation of this type of information. One of them is the element <code>input<\/code> HTML with attribute <code>type<\/code> set to &quot;number&quot;. This resource is essential for web developers looking to offer an optimized user experience free of data entry errors.<\/p>\n<p>He <code>input[type=number]<\/code> is a feature of HTML5 that allows users to enter numerical values using a specific input field that supports the inclusion of numbers. In addition, it offers certain functionalities, such as the ability to increase or decrease values using small buttons known as &quot;stepper arrows&quot; that are part of the control.<\/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\/complete-guide-using-inputtypenumber-in-html-forms\/#Fundamentos_de_inputtypenumber\" >input[type=number] basics<\/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\/complete-guide-using-inputtypenumber-in-html-forms\/#Personalizacion_y_control_del_input\" >Personalization and control of input<\/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\/complete-guide-using-inputtypenumber-in-html-forms\/#Validacion_de_datos_con_inputtypenumber\" >Data validation with input[type=number]<\/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\/complete-guide-using-inputtypenumber-in-html-forms\/#Estilizado_y_compatibilidad\" >Styling and compatibility<\/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\/complete-guide-using-inputtypenumber-in-html-forms\/#Mejoras_con_JavaScript\" >JavaScript improvements<\/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\/complete-guide-using-inputtypenumber-in-html-forms\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Fundamentos_de_inputtypenumber\"><\/span>input[type=number] basics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>When implementing an input field for numeric data, it is essential to start by using the correct syntax. Here I show you how you should do it:<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><label for=\"cantidad\">Amount:<\/label><input type=\"number\" id=\"cantidad\" name=\"cantidad\"><\/code><\/pre>\n<p>This simple HTML markup creates a field where the user can enter a number. The element <code>labels<\/code> improves accessibility and provides descriptive text that is associated with the input field. However, there is much more you can do with <code>input[type=number]<\/code>.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Personalizacion_y_control_del_input\"><\/span>Personalization and control of input<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The element <code>input[type=number]<\/code> can be customized and controlled to improve the user experience and ensure valid data is received. For example, you can specify a range of acceptable values using the attributes <code>min<\/code> y <code>max<\/code>:<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><input type=\"number\" id=\"edad\" name=\"edad\" min=\"18\" max=\"99\"><\/code><\/pre>\n<p>Additionally, you can control the amount that is incremented or decremented when the user uses the stepper arrows with the attribute <code>step<\/code>:<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><input type=\"number\" id=\"cantidad\" name=\"cantidad\" step=\"10\"><\/code><\/pre>\n<p>Another form of control is to use the attributes <code>required<\/code> to ensure that the field is not left empty, and <code>placeholder<\/code> to display example or guide text within the input field before the user starts typing:<\/p>\n<pre><code class=\"&quot;language-html&quot;\"><input type=\"number\" id=\"referencia\" name=\"referencia\" placeholder=\"Introduce tu n\u00famero de referencia\"><\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Validacion_de_datos_con_inputtypenumber\"><\/span>Data validation with input[type=number]<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>One of the greatest advantages of using <code>input[type=number]<\/code> is that the browser can automatically validate that the input is numeric. However, it is always advisable to add an additional layer of validation on the server side to ensure that the data is correct before processing it.<\/p>\n<p>If the user enters a value that is not numeric or is outside the set range, the browser will display an error message and prevent the form from submitting until the error is corrected. This significantly reduces the chances of incorrect data being entered.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Estilizado_y_compatibilidad\"><\/span>Styling and compatibility<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The appearance of <code>input[type=number]<\/code> can vary noticeably between different browsers and operating systems, which can be a challenge in providing a consistent user experience. To customize the appearance of these fields, it is possible to use CSS. Here is an example of how you could do it:<\/p>\n<pre><code class=\"&quot;language-css&quot;\">input[type=number] { border: 1px solid #ccc; padding: 5px; border-radius: 4px; }<\/code><\/pre>\n<p>Browser compatibility is great for <code>input[type=number]<\/code>, since most modern browsers support it. For older browsers that do not recognize the number type, the input field will revert to <code>type=&quot;text&quot;<\/code>, which means they will not benefit from specific validation or numeric control, but will still be able to enter text.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mejoras_con_JavaScript\"><\/span>JavaScript improvements<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Yes ok <code>input[type=number]<\/code> offers many features natively, it is possible to further improve the user experience with JavaScript. For example, you could use JavaScript to perform more complex validations or to manipulate the value of the input field based on business logic.<\/p>\n<p>Here&#039;s a simple example of how you can listen for events on a numeric field and implement additional logic:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">document.getElementById(&#039;quantity&#039;).addEventListener(&#039;change&#039;, function(e){ if(e.target.value &lt; 0) { alert(&#039;Quantity cannot be negative.&#039;); e. target.value = &#039;&#039;; \/\/ Clear the field } });<\/code><\/pre>\n<p>This script ensures that users cannot enter negative values in the input field by displaying an alert and clearing the field if an illegal value is entered.<\/p>\n<p>Remember that implementing JavaScript must be done carefully so as not to interfere with accessibility and the overall user experience.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The use of <code>input[type=number]<\/code> is a valuable resource for any web developer looking to facilitate numerical data entry and validation. Thanks to its native behavior and ease of customization, you can adapt it to the specific needs of your project and ensure that users enter accurate and useful data.<\/p>\n<p>If you need personalized advice on implementing numerical fields or any other component in your forms, do not hesitate to contact us. <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">get in touch<\/a>. I&#039;m here to help you build an effective and efficient online experience on your next web project. <\/p>\n<p>For more guides, tricks and tips on web development, I invite you to explore the various resources available at <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev.com<\/a>, your ally in the world of web development. See you in the next article!<\/p>","protected":false},"excerpt":{"rendered":"<p>When faced with the task of collecting numerical data on a website, it&#039;s essential to have tools that facilitate the entry and validation of this type of information. One of these is the HTML input element with the type attribute set to &quot;number.&quot; This feature is essential for web developers who [\u2026]<\/p>","protected":false},"author":1,"featured_media":24773,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420],"tags":[205,500,492,358,475,1559,512],"class_list":["post-24772","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-blog","tag-completa","tag-formularios","tag-guia","tag-html","tag-inputtypenumber","tag-uso"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24772","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=24772"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/24772\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/24773"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=24772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=24772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=24772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}