Esta página, realmente es un articulo, muy completo, sobre la importancía que tienen los formularios, en las web, los tipos que hay, todos los campos y etiquetas que incluyen, y como funcionán. Al final, hay, un ejemplo sencillo, para aprender a construirlos, uno mismo.

Pero entonces, porqué la incluyo, en la sección de temas javascript, pues si empiezas, a leer el articulo, verás que el menu de contenido, de al lado, cambia de posición, y te acompañara, sirviendote de menu de navegación, y esto esta implementado, con un poco de javascript.

Los formularios son una de las partes más importantes de la web. Sin ellos, no habría una forma fácil de recoger datos, buscar recursos o inscribirse para recibir información valiosa.

Los formularios se incrustan en los sitios web con el elemento <form></form> de HTML. Dentro del elemento formulario se anidán varias entradas. Estas entradas también se conocen como controles de formulario.

En este tutorial, exploraremos el elemento form de HTML, los distintos tipos de entrada que admite y cómo crear un botón de envío con el que se envían los datos.

Espero que al final, sepas más de cómo funcionan los formularios y puedas hacerlos e incluirlos en tus web, con confianza.

Para incluir un formulario de cualquier tipo, en una web, no necesitariamos nada más que lo que vemos abajo:

<form action="ejemplo.php" method="POST"> <!--Las entradas (input) de cualquier tipo y áreas de texto van aquí--> </form>

Cada vez que utilizas un motor de búsqueda, realizas un pedido o te unes a una lista de correo electrónico, utilizas un formulario. Un formulario es un elemento HTML que contiene y organiza objetos llamados controles de formulario, incluidos cuadros de texto, casillas de verificación y botones, que pueden aceptar información de los visitantes del sitio web.

Como introducción en la etiqueta de apertura en action se especifica el servidor, al que se enviarán los datos, que luego generalmente se tratan con PHP y se incluyen en bases de datos, y el method, que es el protocolo HTTP (Hypertext Transfer Protocol), por el que se envian dichos datos, dependiendo de la importancia y privacidad de estos datos.

Puede haber múltiples formularios en una página web, pero no pueden estar anidados uno dentro de otro.

La etiqueta <input> se utiliza para crear varios controles de formulario en HTML. Es un elemento en línea, que no tiene etiqueta de cierre, y toma atributos como type, name, minlength, maxlength, placeholder, etc. Cada uno de los atributos tiene sus valores específicos.

El atributo placeholder es importante ya que ayuda al usuario a entender el propósito del campo de entrada antes de que escriba algo.

Hay 20 tipos de entrada diferentes, y vamos a verlas una a una.

Este tipo de entrada toma un valor de “text”, configura un control de formulario de cuadro de texto, de una sola línea. El control de formulario del cuadro de texto acepta información numérica o de texto, como nombres, direcciones de correo electrónico, números de teléfono y otros textos.

<input type="text" placeholder="Ingresa tu nombre" />

Ejemplo de entrada tipo Text en HTML.

Como su nombre indica, una entrada con un tipo password crea una contraseña. Es automáticamente invisible para el usuario, a menos que sea manipulada por JavaScript.

<input type="password" placeholder="Ingresa tu contraseña"/>

Ejemplo de entrada tipo Password en HTML.

Cualquier entrada con el tipo email define un campo para introducir una dirección de correo electrónico.

<input type="email" placeholder="Ingresa tu correo"/>

Ejemplo de entrada tipo Email en HTML.

Este tipo de entrada permite al usuario insertar sólo números.

<input type="number" placeholder="Ingresa un número"/>

Ejemplo de entrada de tipo Number en HTML.

A veces, los usuarios tendrán que elegir solo una de las opciones. Un campo de entrada con el atributo de tipo “radio” le permite hacer esto.

Cada botón de opción de un grupo recibe el mismo atributo name y un atributo value único. Debido a que el atributo name es el mismo, los elementos se identifican como parte de un grupo en los navegadores y solo se puede seleccionar uno.

<input type="radio"/>

Ejemplo de un input radio en HTML.
Un ejemplo más completo:

<!DOCTYPE html> <html> <head> <title>Ejemplo</title> </head> <body> <h3>Ejemplo de Botones Radio</h3> <form> <b>SELECCIONA GÉNERO</b> <br> <input type="radio" name="genero" id="hombre"> <label for="hombre">Masculino</label><br> <input type="radio" name="genero" id="mujer"> <label for="mujer">Femenino</label> </form> </body> </html>

Así, con un tipo de entrada de radio, los usuarios podrán elegir una de las opciones. ¿Qué pasa si quieres que puedan elegir más de una opción? Eso es lo que hace una entrada con atributo de tipo checkbox.

<input type="checkbox"/>

Ejemplo de un imput checkbox en HTML.
Un ejemplo más completo:

<!DOCTYPE html> <html> <head> <title>Ejemplo</title> </head> <body> <h3>Ejemplo de Checkboxes HTML</h3> <form> <b>SELECCIONA MATERIAS</b><br> <input type="checkbox" name="asignaturas" id="mates"> <label for="mates">Matemáticas</label> <input type="checkbox" name="asignaturas" id="ciencias"> <label for="ciencias">Ciencias</label> <input type="checkbox" name="asignaturas" id="idiomas"> <label for = "idiomas">Idiomas</label> </form> </body> </html>

Este tipo se utiliza para añadir un botón de envío a los formularios. Cuando un usuario hace clic en él, se envía automáticamente el formulario. Toma un atributo de valor, que define el texto que aparece dentro del botón.

<input type="submit" value="Enviar datos"/>

Ejemplo de input type submit en HTML.

El control de formulario Submit Button se utiliza para enviar el formulario. Cuando se hace clic, activa el método action en el elemento de formulario y hace que el navegador envíe los datos del formulario (los pares de name y value para cada control de formulario) al servidor web. El servidor web invocará el programa de procesamiento del lado del servidor o el script listado en la propiedad action del formulario.

Un control de formulario Reset Button se usa para restablecer los campos del formulario a sus valores iniciales. Un botón de reinicio no envía el formulario.

El elemento input con type="reset" configura un botón de reinicio.

Una entrada con un tipo establecido como button crea un botón, que puede ser manipulado por el tipo de oyente de eventos onClick de JavaScript. Crea un botón igual que una entrada de tipo submit, pero con la excepción de que el valor está vacío por defecto, por lo que hay que especificarlo.

<input type="button" value="Enviar"/>

Ejemplo de input type button en HTML.

Define un campo para el envío de archivos. Cuando el usuario hace clic en él, se le abrira el explorador de archivos de su sistema, para que seleccione el archivo deseado, que puede ser una imagen, un PDF, un archivo de documento, etc.

<input type="file"/>

Ejemplo de input type file en HTML.

Se trata de un tipo de entrada elegante introducido por HTML5. Con él, el usuario puede enviar su color favorito, por ejemplo. El negro: #000000 es el valor por defecto, pero se puede anular, estableciendo el valor a un color deseado.

Muchos desarrolladores lo han utilizado como truco para conseguir seleccionar diferentes tonos de color disponibles en formatos RGB, HSL y hexadecimal.

<input type="color"/>

Ejemplo de input type color en HTML.

La entrada con el tipo search define un campo de texto al igual que un tipo de entrada de texto. Pero, esta vez tiene el único propósito de buscar información. Se diferencia del tipo text en que, una vez que el usuario comienza a escribir, aparece un botón de cancelación.

<input type="search"/>

Ejemplo de input type search en HTML.

Cuando el atributo type de una etiqueta de entrada se establece como url, muestra un campo donde los usuarios pueden introducir una URL.

<input type = "url"/>

Ejemplo de input type URL en HTML.

Un tipo de entrada tel te permite recoger los números de teléfono de los usuarios.

<input type="tel"/>

Ejemplo de Type Tel en HTML.

Es posible que te hayas registrado en un sitio web en el que hayas solicitado la fecha de un determinado evento. El sitio probablemente utilizó una entrada con el valor de tipo establecido en date para lograr esto.

<input type="date"/>

Ejemplo de Type Date en HTML.

Esto funciona como el tipo de entrada date, pero también permite al usuario elegir una fecha con una hora determinada.

<input type="datetime-local"/>

Ejemplo de Type Datetime-local en HTML.

El tipo de entrada week permite al usuario seleccionar una semana específica.

<input type="week"/>

Ejemplo de Type Week en HTML.

La entrada con el tipo month rellena los meses para que el usuario los elija al hacer clic.

<input type="month"/>

Ejemplo de Type Month en HTML.

Hay ocasiones en las que un usuario necesitará rellenar múltiples líneas de texto que no serían adecuadas en un tipo de entrada de texto (ya que especifica un campo de texto de una línea).

textarea permite al usuario hacer esto ya que define múltiples líneas de entrada de texto. Toma sus propios atributos como –cols– para el número de columnas, y –rows– para el número de filas.

Por defecto los navegadores, colocan al elemento textarea, un control para que el usuario, pueda redimensionarlo, generalmente en la esquina inferior derecha. Si no te interesa esta carácteristica para tus diseños, tienes que añadir esta línea de código a tu CSS: textarea {resize: none;}, que es el único toque extra de css, que le he dado yo, a los estilos que el navegador aplica por defecto a un textarea, pues no me interesaba en este diseño.

<textarea cols="50" rows="20"></textarea>

Ejemplo de Textarea en HTML.

Es como un botón de radio y una casilla de verificación en un solo paquete. Está incrustado en la página con dos elementos: un elemento de selección select y una opción option, que siempre está anidada dentro de la selección.

Por defecto, el usuario sólo puede elegir una de las opciones. Pero, con los atributos múltiples, puedes permitir que el usuario seleccione más de una de las opciones.

<select> <option value="HTML">Selecciona un Lenguaje</option> <option value="HTML">HTML</option> <option value="CSS">CSS</option> <option value="JavaScript">JavaScript</option> <option value="React">Java</option> </select>

Arriba tienes un ejemplo de select en HTML.

Asignar etiquetas a los controles de formulario es importante, a nivel de accesibilidad y para programación. Cuando están correctamente conectadas el elemento label a través de su atributo for y el atributo id del input, es más fácil para el usuario utilizarlas, ya que puede hacer click en la propia etiqueta para acceder a la entrada.

<label for="nombre">Nombre</label> <input type="text" id="nombre"/><br/> <label for="check">Aceptar las condiciones</label> <input type="checkbox" id="check"/>

Ejemplo de label en input HTML.

Observa que el valor del atributo for en el elemento label es el mismo que el valor del atributo id en el elemento input. El elemento input utiliza los atributos name e id para diferentes propósitos. El atributo name puede ser utilizado por los scripts del lado del cliente y el procesamiento del lado del servidor. El atributo id crea un identificador que puede ser utilizado por el elemento label, el elemento anchor y los selectores de CSS.

Cuando un usuario rellena un formulario y lo envía con el botón de envío submit, los datos de los controles del formulario se envían al servidor a través de los métodos de petición HTTP GET o POST.

¿Cómo se indica al servidor? El elemento form toma un atributo action, cuyo valor debe ser la URL del servidor. También toma un atributo method, donde se especifica el método HTTP que utiliza para transmitir los valores al servidor.

Con el método GET, los valores introducidos por el usuario son visibles en la URL cuando se envían los datos, con POST, los valores se envían en las cabeceras HTTP, por lo que esos valores no son visibles en la URL.

Si no se utiliza un atributo de método en el formulario, se asume automáticamente que el usuario quiere utilizar el método GET, porque es el predeterminado.

Entonces, ¿Cuándo debe utilizar el método GET ó POST?

Utiliza el método GET para enviar datos no sensibles o recuperar datos de un servidor (por ejemplo, durante las búsquedas).

Utiliza POST para enviar archivos o datos sensibles.

Tomemos lo que hemos aprendido sobre los formularios y utilicémoslo para hacer un simple formulario de contacto. También introduciré algunos conceptos nuevos a medida que avancemos para redondearlo todo.

Aquí está el HTML:

<form action="ejemplo-servidor.com"> <fieldset> <legend>Contacto</legend> <div class="control"> <label for="name">Nombre</label> <input type="text" id="name" placeholder="Ingresa tu nombre" required/> </div> <div class="control"> <label for="email">Email</label> <input type="email" id="email" placeholder="Ingresa tu correo" required/> </div> <div class="control"> <label for="message">Mensaje</label> <textarea id="message" cols="30" rows="10" placeholder="Ingresa tu mensaje" required/> </textarea> </div> <input type="submit" value="Enviar" class="submit-btn"/> </fieldset> </form>

En primer lugar, un elemento form está envolviendo a todos los demás elementos. Tiene una acción establecida para “ejemplo-servidor.com“, un servidor ficticio donde se recibirán los datos del formulario. El metodo de envio, como no esta especificado, sera el GET, pues es el que se usa por defecto.

Después del elemento form, todos los demás elementos están también rodeados por un elemento fieldset con una etiqueta legend justo debajo.

Utilizamos el elemento fieldset para agrupar las inputs relacionadas, y la etiqueta legend contiene una leyenda que transmite de qué trata el formulario.

Las inputs name, email y textarea están todas en un <div> con un class="control". Así que se comportan como un elemento de bloque, con el fin de hacer más fácil darle estilo con CSS.

También se validan con el atributo required, por lo que el formulario no se envía cuando esos campos están vacíos o cuando el usuario no escribe los valores en el formato adecuado.

Varios atributos son nuevos en HTML5. El nuevo atributo required es emocionante porque hará que los navegadores compatibles realicen la validación de formularios antes de su envio al servidor. Los navegadores que admiten el atributo required de HTML5 verificarán automáticamente que se haya ingresado información en el cuadro de texto y mostrarán un mensaje de error cuando no se cumpla la condición.

Después de todo esto, tendremos el resultado que puedes ver debajo:

Ejemplo de Formulario de Contacto en HTML.

Pero así se ve feo, ¿no? Le aplicare un poco de estilo con CSS.

Aquí está el CSS:

body { display: flex; align-items: center; justify-content: center; height: 100vh; font-family: cursive; } input, textarea { width: 100%; padding: 5px; outline: none; } label { line-height: 1.9rem; } input [type="submit"] { transform: translate(2.2%); padding: 3px; margin-top: 0.6rem; font-family: cursive; font-weight: bold; } fieldset { padding: 20px 40px; }

Centramos todo en el cuerpo horizontalmente con Flexbox, y verticalmente con una altura de vista del 100%, que le da el valor de 100vh. Usamos un font-family de cursiva.

Le dimos a las inputs y al textarea un ancho de 100% para que se extiendan a lo largo de toda la página. Las etiquetas tienen una altura de línea mínima de 1,9rem (30,4px), para que no queden demasiado cerca de sus respectivas entradas.

Específicamente estilizamos el botón (tipo de entrada button) con la propiedad transform para empujarlo al centro ya que estaba un poco descentrado. Le dimos un padding de 3px para tener más espacio alrededor. Luego seleccionamos una fuente cursiva con un peso de negrita (bold).

Como el botón estaba demasiado cerca del textarea, le pusimos un margin-top de 0.6rem para empujarlo un poco hacia abajo.

Le dimos a nuestro elemento fieldset un padding de 20px en la parte superior e inferior, con 40px a la izquierda y a la derecha para apartar el borde que crea alrededor de los elementos del formulario en el que está envuelto.

Al final de todo, tenemos el hermoso formulario de abajo:

Formulario de contacto con HTML y CSS

Espero que este tutorial te haya ayudado a entender cómo funcionan los formularios. Ahora deberías tener el conocimiento que necesitas para integrar formularios en tus sitios web para que puedas empezar a recoger datos.

Tengo que decir, que el único ejemplo al que le he aplicado CSS, es el de construir un formulario de contacto, el resto tienen el estilo que le asigna el navegador por defecto.

Para ir acabando os recomiendo lo de siempre, si os gusta algo de la página, ya sabeis, click derecho para inspeccionarla con la herramienta dev tools del navegador o para ver el código fuente.

Gracias por leer, y sigue codificando.