{"id":620,"date":"2023-11-13T18:01:52","date_gmt":"2023-11-13T21:01:52","guid":{"rendered":"https:\/\/stackcodelab.com\/blog\/?p=620"},"modified":"2023-11-13T18:02:42","modified_gmt":"2023-11-13T21:02:42","slug":"gestion-de-formularios-y-validacion","status":"publish","type":"post","link":"https:\/\/stackcodelab.com\/blog\/gestion-de-formularios-y-validacion\/","title":{"rendered":"Gesti\u00f3n de Formularios y Validaci\u00f3n"},"content":{"rendered":"\n

Trabajo con formularios HTML<\/em><\/p>\n\n\n\n

Formularios en HTML<\/strong> Los formularios son una parte esencial de muchas aplicaciones web. En HTML, los formularios se crean usando elementos como <form><\/code>, <input><\/code>, <textarea><\/code>, y <button><\/code>. Los usuarios pueden ingresar datos que luego se env\u00edan al servidor para su procesamiento.<\/p>\n\n\n\n

Ejemplo de un formulario HTML b\u00e1sico:<\/p>\n\n\n\n

<form>
<label for=\u00bbnombre\u00bb>Nombre:<\/label>
<input type=\u00bbtext\u00bb id=\u00bbnombre\u00bb name=\u00bbnombre\u00bb>

<label for=\u00bbemail\u00bb>Email:<\/label>
<input type=\u00bbemail\u00bb id=\u00bbemail\u00bb name=\u00bbemail\u00bb>

<button type=\u00bbsubmit\u00bb>Enviar<\/button>
<\/form>
<\/p>\n\n\n\n

Validaci\u00f3n de datos de usuario<\/em><\/p>\n\n\n\n

Validaci\u00f3n de datos en formularios<\/strong> La validaci\u00f3n de datos de usuario es crucial para garantizar que los datos ingresados en un formulario sean correctos y seguros. Puedes realizar validaciones en el lado del cliente (en el navegador) y en el lado del servidor (en el servidor web).<\/p>\n\n\n\n

Validaci\u00f3n en el lado del cliente<\/strong> En el lado del cliente, JavaScript se utiliza para realizar validaciones en tiempo real, proporcionando retroalimentaci\u00f3n al usuario cuando ingresan datos incorrectos. Esto mejora la experiencia del usuario y reduce la carga en el servidor.<\/p>\n\n\n\n

Ejemplo de validaci\u00f3n en el lado del cliente:<\/p>\n\n\n\n

<form>
<label for=\u00bbemail\u00bb>Email:<\/label>
<input type=\u00bbemail\u00bb id=\u00bbemail\u00bb name=\u00bbemail\u00bb required>
<span id=\u00bbmensaje-error\u00bb style=\u00bbcolor: red;\u00bb><\/span>

<button type=\u00bbsubmit\u00bb>Enviar<\/button>
<\/form>
<script>
let emailInput = document.getElementById(\u00abemail\u00bb);
let errorMessage = document.getElementById(\u00abmensaje-error\u00bb);

emailInput.addEventListener(\u00abinput\u00bb, function() {
if (!emailInput.checkValidity()) {
errorMessage.textContent = \u00abPor favor, ingresa un email v\u00e1lido.\u00bb;
} else {
errorMessage.textContent = \u00ab\u00bb;
}
});
<\/script>

<\/p>\n\n\n\n

Ejercicios Pr\u00e1cticos: Creaci\u00f3n de un formulario de registro<\/em><\/p>\n\n\n\n

Ejercicio 1: Crea un formulario de registro que solicite al usuario su nombre, email y contrase\u00f1a. Agrega validaci\u00f3n en el lado del cliente para asegurarte de que el email tenga un formato v\u00e1lido y de que la contrase\u00f1a tenga al menos 8 caracteres.<\/p>\n\n\n\n

<form id=\"registro-form\">\r\n  <label for=\"nombre\">Nombre:<\/label>\r\n  <input type=\"text\" id=\"nombre\" name=\"nombre\" required>\r\n  \r\n  <label for=\"email\">Email:<\/label>\r\n  <input type=\"email\" id=\"email\" name=\"email\" required>\r\n  <span id=\"email-error\" style=\"color: red;\"><\/span>\r\n  \r\n  <label for=\"contrasena\">Contrase\u00f1a:<\/label>\r\n  <input type=\"password\" id=\"contrasena\" name=\"contrasena\" required>\r\n  <span id=\"contrasena-error\" style=\"color: red;\"><\/span>\r\n  \r\n  <button type=\"submit\">Registrarse<\/button>\r\n<\/form>\r\n<script>\r\n  let registroForm = document.getElementById(\"registro-form\");\r\n  let emailInput = document.getElementById(\"email\");\r\n  let emailError = document.getElementById(\"email-error\");\r\n  let contrasenaInput = document.getElementById(\"contrasena\");\r\n  let contrasenaError = document.getElementById(\"contrasena-error\");\r\n\r\n  emailInput.addEventListener(\"input\", function() {\r\n    if (!emailInput.checkValidity()) {\r\n      emailError.textContent = \"Por favor, ingresa un email v\u00e1lido.\";\r\n    } else {\r\n      emailError.textContent = \"\";\r\n    }\r\n  });\r\n\r\n  contrasenaInput.addEventListener(\"input\", function() {\r\n    if (contrasenaInput.value.length < 8) {\r\n      contrasenaError.textContent = \"La contrase\u00f1a debe tener al menos 8 caracteres.\";\r\n    } else {\r\n      contrasenaError.textContent = \"\";\r\n    }\r\n  });\r\n\r\n  registroForm.addEventListener(\"submit\", function(event) {\r\n    if (!emailInput.checkValidity() || contrasenaInput.value.length < 8) {\r\n      event.preventDefault();\r\n    }\r\n  });\r\n<\/script>\r\n<\/code><\/pre>\n\n\n\n
Este ejercicio pr\u00e1ctico permite a los lectores aplicar y consolidar lo que han aprendido sobre formularios HTML y validaci\u00f3n en el lado del cliente. Tambi\u00e9n es un buen ejemplo de c\u00f3mo mejorar la interacci\u00f3n del usuario en una p\u00e1gina web.<\/p>\n\n\n\n
<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"
Trabajo con formularios HTML Formularios en HTML Los formularios son una parte esencial de muchas aplicaciones web. En HTML, los formularios se crean usando elementos como <form>, <input>, <textarea>, y <button>. Los usuarios pueden ingresar datos que luego se env\u00edan al servidor para su procesamiento. Ejemplo de un formulario HTML b\u00e1sico: <form> <label for=\u00bbnombre\u00bb>Nombre:<\/label> <input type=\u00bbtext\u00bb id=\u00bbnombre\u00bb name=\u00bbnombre\u00bb> <label for=\u00bbemail\u00bb>Email:<\/label> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[33],"tags":[],"class_list":["post-620","post","type-post","status-publish","format-standard","hentry","category-javascript-y-otras-hierbas"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"arquitecto","author_link":"https:\/\/stackcodelab.com\/blog\/author\/arquitecto\/"},"uagb_comment_info":1,"uagb_excerpt":"Trabajo con formularios HTML Formularios en HTML Los formularios son una parte esencial de muchas aplicaciones web. En HTML, los formularios se crean usando elementos como <form>, <input>, <textarea>, y <button>. Los usuarios pueden ingresar datos que luego se env\u00edan al servidor para su procesamiento. Ejemplo de un formulario HTML b\u00e1sico: <form> <label for=\u00bbnombre\u00bb>Nombre:<\/label> <input type=\u00bbtext\u00bb id=\u00bbnombre\u00bb name=\u00bbnombre\u00bb> <label for=\u00bbemail\u00bb>Email:<\/label>…","_links":{"self":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/comments?post=620"}],"version-history":[{"count":1,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":621,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/posts\/620\/revisions\/621"}],"wp:attachment":[{"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/media?parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/categories?post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stackcodelab.com\/blog\/wp-json\/wp\/v2\/tags?post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}