{"id":23975,"date":"2024-03-17T11:29:06","date_gmt":"2024-03-17T10:29:06","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/formularios-en-html-todo-lo-que-necesitas-saber-2\/"},"modified":"2024-06-03T18:40:49","modified_gmt":"2024-06-03T17:40:49","slug":"formularios-en-html-todo-lo-que-necesitas-saber-2","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/html-forms-everything-you-need-to-know-2\/","title":{"rendered":"HTML Forms: Everything you need to know"},"content":{"rendered":"<p>In web development, forms are a fundamental part of interacting with users and collecting information. In HTML, we have the tag<form action=\"\"> which allows us to create forms in a simple and efficient way. In this article, we&#039;ll explore everything related to HTML forms, from their basic structure to practical examples.<input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/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\/html-forms-everything-you-need-to-know-2\/#Estructura_basica_de_un_formulario_en_HTML\" >Basic structure of an HTML 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\/html-forms-everything-you-need-to-know-2\/#Campos_de_entrada_y_tipos_de_datos\" >Input fields and data types<\/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\/html-forms-everything-you-need-to-know-2\/#Ejemplos_praticos_de_formularios_en_HTML\" >Practical examples of HTML forms<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-forms-everything-you-need-to-know-2\/#Ejemplo_1_Formulario_de_contacto\" >Example 1: Contact form<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-forms-everything-you-need-to-know-2\/#Ejemplo_2_Formulario_de_suscripcion\" >Example 2: Subscription Form<\/a><\/li><\/ul><\/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\/html-forms-everything-you-need-to-know-2\/#Preguntas_frecuentes_sobre_formularios_en_HTML\" >HTML Forms FAQ<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-forms-everything-you-need-to-know-2\/#%C2%BFQue_es_un_formulario_en_HTML\" >What is an HTML form?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-forms-everything-you-need-to-know-2\/#%C2%BFComo_se_crea_un_formulario_en_HTML\" >How do you create a form in HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-forms-everything-you-need-to-know-2\/#%C2%BFComo_se_estiliza_un_formulario_en_HTML\" >How do you style a form in HTML?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-forms-everything-you-need-to-know-2\/#%C2%BFCual_es_la_diferencia_entre_el_metodo_%22GET%22_y_%22POST%22_en_un_formulario\" >What is the difference between the &quot;GET&quot; and &quot;POST&quot; method on a form?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nelkodev.com\/en\/blog\/html-forms-everything-you-need-to-know-2\/#%C2%BFQue_es_la_validacion_de_formularios_en_HTML\" >What is form validation in HTML?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Estructura_basica_de_un_formulario_en_HTML\"><\/span>Basic structure of an HTML form<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before we get into the details, it&#039;s important to understand the basic structure of an HTML form. A form is made up of different elements, such as input fields, submit buttons, and labels to describe each field. Here is an example of the basic structure of a form:<\/p>\n<pre>\n<form action=\"\/en\/procesar.php\/\" method=\"post\" data-trp-original-action=\"procesar.php\"><label for=\"nombre\">Name:<\/label><input type=\"text\" id=\"nombre\" name=\"nombre\"> <label for=\"email\">E-mail:<\/label><input type=\"email\" id=\"email\" name=\"email\"><input type=\"submit\" value=\"Send\"><input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/pre>\n<p>In this example, we have created a form with two input fields: one for the name and one for the email. Additionally, we have a submit button to submit the data entered by the user.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Campos_de_entrada_y_tipos_de_datos\"><\/span>Input fields and data types<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In HTML, there are different types of input fields that we can use in our forms. Some of the most common types are:<\/p>\n<ul>\n<li><strong>Text:<\/strong> Used to enter text on a single line. It is defined with the &quot;type&quot; attribute with the value &quot;text&quot;.<\/li>\n<li><strong>E-mail:<\/strong> Used to enter valid email addresses. It is defined with the &quot;type&quot; attribute with the value &quot;email&quot;.<\/li>\n<li><strong>Password:<\/strong> It is used to enter passwords by hiding the entered characters. It is defined with the &quot;type&quot; attribute with the value &quot;password&quot;.<\/li>\n<li><strong>Number:<\/strong> It is used to enter numbers. It is defined with the &quot;type&quot; attribute with the value &quot;number&quot;.<\/li>\n<li><strong>Date:<\/strong> Used to enter dates. It is defined with the &quot;type&quot; attribute with the value &quot;date&quot;.<\/li>\n<\/ul>\n<p>These are just a few examples of input fields, but there are many more to suit different needs. You can find a complete list of input field types in the official HTML documentation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ejemplos_praticos_de_formularios_en_HTML\"><\/span>Practical examples of HTML forms<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To better understand how HTML forms work, let&#039;s look at some practical examples:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplo_1_Formulario_de_contacto\"><\/span>Example 1: Contact form<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Suppose we want to add a contact form on our website. We can use HTML to create a form that allows visitors to submit a message. Here is an example of what the code would look like:<\/p>\n<pre>\n<form action=\"\/en\/procesar.php\/\" method=\"post\" data-trp-original-action=\"procesar.php\"><label for=\"nombre\">Name:<\/label><input type=\"text\" id=\"nombre\" name=\"nombre\"> <label for=\"email\">E-mail:<\/label><input type=\"email\" id=\"email\" name=\"email\"> <label for=\"mensaje\">Message:<\/label><textarea id=\"mensaje\" name=\"mensaje\"><\/textarea><input type=\"submit\" value=\"Send\"><input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/pre>\n<p>In this example, we have added an input field of type &quot;textarea&quot; so that users can type their message. Additionally, we use the &quot;for&quot; attribute on tags <label>to associate each tag with its corresponding field.<\/label><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Ejemplo_2_Formulario_de_suscripcion\"><\/span>Example 2: Subscription Form<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Another common case is adding a subscription form to our website. We can use HTML to create a form that allows users to enter their name and email. Here is an example of what the code would look like:<\/p>\n<pre>\n<form action=\"\/en\/suscribir.php\/\" method=\"post\" data-trp-original-action=\"suscribir.php\"><label for=\"nombre\">Name:<\/label><input type=\"text\" id=\"nombre\" name=\"nombre\"> <label for=\"email\">E-mail:<\/label><input type=\"email\" id=\"email\" name=\"email\"><input type=\"submit\" value=\"to subscribe\"><input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n<\/pre>\n<p>In this example, we&#039;ve removed the message field and changed the submit button text to &quot;Subscribe.&quot; This allows us to create a simpler form focused on the action of subscribing.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Preguntas_frecuentes_sobre_formularios_en_HTML\"><\/span>HTML Forms FAQ<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_un_formulario_en_HTML\"><\/span>What is an HTML form?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>An HTML form is a structure that allows us to collect information from users through input fields, such as text boxes, radio buttons and check boxes. HTML forms can be used for various purposes, such as user registration, sending messages, and subscribing to newsletters.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_se_crea_un_formulario_en_HTML\"><\/span>How do you create a form in HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To create a form in HTML, we must use the tag<form action=\"\"> . This tag delimits all the content of the form. Inside the label<form> , the different input fields must be added, such as labels<input> and<textarea> . Additionally, it is important to define the &quot;action&quot; attribute with the URL of the file that will process the data sent by the form.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFComo_se_estiliza_un_formulario_en_HTML\"><\/span>How do you style a form in HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>HTML forms can be styled using CSS. We can apply styles to the different elements of the form, such as input fields, labels and buttons. We can change the colors, sizes, fonts and alignments to adapt the form to the desired appearance. There are also CSS frameworks, such as Bootstrap, that provide predefined styles for forms.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFCual_es_la_diferencia_entre_el_metodo_%22GET%22_y_%22POST%22_en_un_formulario\"><\/span>What is the difference between the &quot;GET&quot; and &quot;POST&quot; method on a form?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The &quot;GET&quot; and &quot;POST&quot; methods are two different ways to submit data from an HTML form. The &quot;GET&quot; method sends the data through the browser&#039;s URL, which means the data is visible in the address bar. The &quot;POST&quot; method sends the data in the background, without displaying it in the address bar. If we are sending sensitive information, such as passwords, it is recommended to use the &quot;POST&quot; method for greater security.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_la_validacion_de_formularios_en_HTML\"><\/span>What is form validation in HTML?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>HTML form validation is the process of ensuring that data entered by users meets certain requirements. We can use different techniques to validate forms, such as requiring required fields, verifying that an email is valid, or validating that a number is within a certain range. Form validation can be performed both on the client side (using JavaScript) and on the server side (using PHP or another programming language).<\/p>\n<p>In conclusion, HTML forms are a powerful tool for interacting with users and collecting information. With a solid understanding of the basic structure of forms and the different types of input fields, you can create efficient and attractive forms for your website. Experiment and have fun creating custom forms according to your needs!<\/p>\n<p>If you have any questions or need help developing your HTML forms, do not hesitate to contact me through my page <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">https:\/\/nelkodev.com\/contacto<\/a>. You can also consult my project portfolio at <a href=\"https:\/\/nelkodev.com\/en\/portfolio\/\">https:\/\/nelkodev.com\/portfolio\/<\/a>. I am here to help you!<\/p><input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/>","protected":false},"excerpt":{"rendered":"<p>En el desarrollo web, los formularios son una parte fundamental para interactuar con los usuarios y recopilar informaci\u00f3n. En HTML, tenemos la etiqueta &lt;form&gt; que nos permite crear formularios de manera sencilla y eficiente. En este art\u00edculo, exploraremos todo lo relacionado con los formularios en HTML, desde su estructura b\u00e1sica hasta ejemplos pr\u00e1cticos. Estructura b\u00e1sica [&hellip;]<\/p>","protected":false},"author":1,"featured_media":23976,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1124,2206],"tags":[31,205,492,475,477,15,75,76],"class_list":["post-23975","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-html","category-php","tag-que","tag-blog","tag-formularios","tag-html","tag-necesitas","tag-php","tag-saber","tag-todo"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23975","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=23975"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/23975\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/23976"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=23975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=23975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=23975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}