{"id":13949,"date":"2022-11-21T18:07:25","date_gmt":"2022-11-21T16:07:25","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=13949"},"modified":"2022-11-30T12:10:54","modified_gmt":"2022-11-30T10:10:54","slug":"como-hacer-un-formulario-con-html-y-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2022\/11\/como-hacer-un-formulario-con-html-y-css\/","title":{"rendered":"C\u00f3mo hacer un formulario con html y css"},"content":{"rendered":"

C\u00f3mo hacer un formulario mediante el uso de\u00a0 html y <\/strong>css, adem\u00e1s de colocar una validaci\u00f3n con JavaScript<\/strong><\/h2>\n

En este art\u00edculo vamos a ver c\u00f3mo se va a construir un documento de html para dar una estructura con c\u00f3digo, adem\u00e1s de a\u00f1adir un c\u00f3digo css<\/a> para darle formato a nuestro formulario, y adem\u00e1s le vamos a a\u00f1adir un documento de JavaScript para que haga la validaci\u00f3n de los caracteres seg\u00fan se va rellenando el formulario y que nos indique que todo est\u00e1 correcto una vez lo finalizamos.<\/p>\n

Voy a mostrar el contenido para el formulario y la estructura que va a tener este documento.<\/p>\n

C\u00f3digo y estructura html<\/h3>\n
<form action=\"mailto:xxx@gmail.com\" method=\"post\" enctype=\"text\/plain\">\r\n    <fieldset>\r\n         <h2>Rellenar formulario completo:<\/h2>\r\n         <ul>\r\n              <li>\r\n                   <label id=\"Nombre\" for=\"Nombre\">Nombre:<\/label>\r\n                   <input class=\"input\" id=\"Nombre\" type=\"text\"required width=\"300px\">\r\n             <\/li>\r\n             <li>\r\n                   <label id=\"primer\" for=\"primer\">Primer Apellido:<\/label>\r\n                   <input class=\"input\" id=\"primer\" type=\"text\"required width=\"300px\">\r\n             <\/li>\r\n             <li>\r\n                   <label id=\"Segundo\" for=\"Segundo\">Segundo Apellido:<\/label>\r\n                   <input class=\"input\" id=\"Segundo\" type=\"text\" required width=\"300px\">\r\n             <\/li>\r\n             <li>\r\n                   <label id=\"mail\" for=\"mail\">E-mail de contacto:<\/label>\r\n                   <input class=\"input\" id=\"mail\" type=\"text\" name=\"mail\" placeholder=\"xxx@gmail.com\" required \r\n                   pattern=\"^[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$\">\r\n             <\/li>\r\n             <li>\r\n                   <label id=\"Mensaje\" for=\"Mensaje\">Mensaje:<span>*describe tu consulta<\/span><\/label>\r\n                   <textarea class=\"input\" id=\"Mensaje\" name=\"Mensaje\" cols=\"30\" rows=\"10\" placeholder=\"Escribe tu mensaje...\"><\/textarea>\r\n            <\/li>\r\n            <li>\r\n                  <div class=\"checkbox\">\r\n                       <input id=\"check\" type=\"checkbox\" required >\r\n                       <a href=\"#\">He leido y acepto la politica de privacidad<\/a>\r\n                  <\/div>\r\n            <\/li>\r\n            <li>\r\n                  <label for=\"contactar\"><\/label>\r\n                  <button style=\"background-color: rgb(0, 225, 255) ;\" type=\"submit\">CONTACTAR<\/button>\r\n            <\/li>\r\n            <li>\r\n                  <label for=\"reset\"><\/label>\r\n                  <button style=\"background-color: rgb(255, 0, 76) ;\" type=\"submit\">Reiniciar<\/button>\r\n            <\/li>\r\n      <\/ul>\r\n   <\/fieldset>\r\n<\/form>\r\n<script src=\"js\/validacion_formulario.js\"><\/script>\r\n<\/pre>\n
Definici\u00f3n del c\u00f3digo<\/h3>\n
En el documento vemos que tenemos un <h1><\/code> \u00abpara el titulo principal del documento\u00bb<\/em>, y tambi\u00e9n un <h2><\/code> dentro del formulario espec\u00edficamente dentro de la etiqueta <fieldset><\/code>. Al inicio del formulario, le he dado un <fieldset><\/code>, para poder juntar toda la informaci\u00f3n en un mismo bloque.<\/span>
\nTambi\u00e9n se pueden colocar varios <fieldset><\/code> en caso de que quieras remarcar cada apartado del formulario, tambi\u00e9n he de decir que es optativo, en cada caso ser\u00e1 distinto para lo que se requiera.
\nPara que todos los apartados en donde nos indica que introduzcamos informaci\u00f3n de contacto, lo he puesto en una lista desordenada<\/em> <ol><\/code>, lo que hace es que en cada <label><\/code> e input est\u00e9n dentro de un <li><\/code>, para que queden marcados dentro de la lista<\/em>. M\u00e1s adelante se le quitaran los puntos de la lista, para que el formulario quede mejor visualmente.<\/p>\n
Como se puede ver todos los <inputs><\/code> que van desde el <input del nombre ><\/code> hasta el <input del mensaje><\/code> todos tienen una misma <class=\"\"><\/code>, se ha hecho de esta forma para as\u00ed juntarlos todos y ahorrarte hacer diferentes clases para a\u00f1adirlos despu\u00e9s al c\u00f3digo css.<\/p>\n
Implementaci\u00f3n Input checkbox<\/h3>\n
En la siguiente lista vemos que he puesto un <div><\/code>, lo he puesto as\u00ed para poder separarlo de los dem\u00e1s <input><\/code>. De esta manera puedo darle el valor que m\u00e1s se me adecue para ir coloc\u00e1ndolo de otra manera en el css,<\/strong> y que as\u00ed tenga una <class=\"\"><\/code><\/strong> diferente a los dem\u00e1s. Adem\u00e1s de que lo acompa\u00f1o con un <a href=\"#\"><\/code> en el que pongo los t\u00e9rminos y la pol\u00edtica de privacidad, en este caso el link esta vac\u00edo<\/em><\/span>, pero en el caso de que quieras utilizarlo para tu empresa, all\u00ed se pondr\u00e1 el link que requieras para poder visualizar la pol\u00edtica de privacidad.<\/p>\n
 <\/p>\n
En las dos siguientes listas, podemos ver el bot\u00f3n de contactar y el de reiniciar, en este caso se ha hecho de esta manera con un <label><\/code> y con un <button><\/code>, tambi\u00e9n se puede hacer de otra manera que es utilizar <input type=\u201dsubmit\u201d><\/code> o <input type=\u201dreset\u201d><\/code>, las dos formas son v\u00e1lidas, la segunda es m\u00e1s simple, pero en este caso utilizaremos la primera opci\u00f3n que est\u00e1 marcada.<\/p>\n
 <\/p>\n
C\u00f3digo CSS<\/h2>\n
\/*FORMULARIO CON LA UL Y LAS LI*\/\r\nform, form ul{display: flex;\r\nflex-direction: column;\r\njustify-content: center;\r\nalign-items: center;padding: 25px 0px 0px;gap: 28px;}\r\nform ul {display: flex;flex-direction: column;\r\njustify-content: center;align-items: center;gap: 28px;}\r\nform li {display: flex;flex-direction: column;justify-content: center;gap:12px}\r\n\r\n\/*CLASS INPUT*\/\r\n.input{width: 400px;background-color: rgb(199, 189, 189);}\r\n\r\n\/*CLASS CHECKBOX*\/\r\n.checkbox{display: flex;justify-content: start;gap: 12px;}\r\n\r\n\/*MENSAJE DEL TEXTAREA*\/\r\ntextarea{width: 400px;height: 200px;background-color: rgb(199, 189, 189);}\r\n\r\n\/*FIELDSET Y EL SPAN*\/\r\nfieldset{border: 4px solid orangered;background: chartreuse;}\r\nspan{color: blueviolet;}<\/pre>\n
 <\/p>\n
 <\/p>\n
Por cada zona que queremos incluir parte del c\u00f3digo le ponemos un \/*comentario*\/<\/strong> y le pondremos\u00a0 las especificaciones para esa parte de c\u00f3digo. Cada uno lo har\u00e1 de su manera, es m\u00e1s f\u00e1cil hacerlo de esta forma, porque a la hora de retocar el c\u00f3digo, ya sabes por donde hay que ir y as\u00ed te ahorras mirar todo el c\u00f3digo para encontrar lo que quieras modificar o quieras poner alg\u00fan extra o cambio.<\/p>\n
As\u00ed quedar\u00eda el formulario completo desde la web:<\/h3>\n
 <\/p>\n
\"Formulario<\/a><\/p>\n
El formulario no hace falta que este con fondo de color, depende de qui\u00e9n o para que lo necesite se le puede poner el color de fondo o tambi\u00e9n se le puede poner una imagen con transparencia para darle m\u00e1s vida al documento o sino dejarlo con el color predeterminado blanco.<\/p>\n
 <\/p>\n
Como se puede hacer la validaci\u00f3n del formulario mediante el uso de JAVASCRIPT\/JS?<\/strong><\/h2>\n
 <\/p>\n
Para poder hacer la validaci\u00f3n de un formulario, usaremos funciones de JS<\/strong>, en los cuales indicaremos que es lo que queremos que verifique<\/em> a la hora de rellenar el formulario.<\/p>\n
Este es el c\u00f3digo para hacer la validaci\u00f3n:<\/p>\n
\n
function validar_formulario(){\r\n\r\n\u00a0 \u00a0 if(document.getElementById('Nombre').value.length < 2 ){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 todo_correcto = false;\r\n\r\n\u00a0 \u00a0 if(document.getElementById('Primer Apellido').value.length < 3 ){\r\n\r\n\u00a0 \u00a0 todo_correcto = false;\r\n\r\n\u00a0 \u00a0 if(document.getElementById('Segundo Apellido').value.length < 3 ){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 todo_correcto = false;\r\n\r\n}\r\n\r\nvar expresion = [a-zA-Z0-9];\r\n\r\nvar mail = document.form.email.value;\r\n\r\n\u00a0 \u00a0 if (!expresion.test(mail)){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 todo_correcto = false;\r\n\r\n}\r\n\r\nvar texto = document.getElementById('Mensaje').value;\r\n\r\n\u00a0 \u00a0 if(texto==''){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 alert(\"El textarea no puede estar vac\u00edo\")\r\n\r\n}\r\n\r\nvar checkbox = document.getElementById('check');\r\n\r\n\u00a0 \u00a0 checkbox.addEventListener(\"change\", validaCheckbox, false);\r\n\r\nfunction validaCheckbox(){\r\n\r\n\u00a0 \u00a0 var checked = checkbox.checked;\r\n\r\n\u00a0 \u00a0 if(checked){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 alert('checkbox esta seleccionado');\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 if(!document.getElementById('contactar').checked){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 todo_correcto = false;\r\n\r\n\u00a0 \u00a0 if(!todo_correcto){\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 alert('Algunos campos no est\u00e1n correctos, revisa los que te quedan');\r\n\r\n\u00a0 \u00a0 }\r\n\r\n\r\n\r\n\r\n\u00a0 \u00a0 return todo_correcto;\r\n\r\n}}}}}\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n