Vamos a revisar cómo diseñar formularios en HTML, abordando las etiquetas para crear campos y los atributos correspondientes para añadir funcionalidades y características. Además, examinaremos ejemplos prácticos de formularios realizados en HTML.
¡Excelente! Ahora te enseñaré a crear formularios. Es más sencillo de lo que imaginas, ¡te lo aseguro!
Los formularios son elementos cruciales y muy útiles para recopilar información de los usuarios a través de una página web. Por esta razón, considero vital dedicar una lección exclusiva a su desarrollo.
Cómo crear Formularios en HTML
Diseñar un formulario en HTML implica la construcción de campos de información, que pueden incluir campos de texto, campos numéricos, selectores, listas desplegables, casillas de verificación y otros elementos.
Como es conocido, en HTML se utilizan etiquetas para crear los diversos elementos disponibles, y los formularios no son una excepción. Para crear los componentes del formulario en HTML, también emplearemos una variedad de etiquetas y atributos, los cuales exploraremos a continuación.
Etiqueta <form>
Utilizaremos la etiqueta <form> para indicar al navegador que el elemento será un formulario.
<form> se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción, registro, login, encuesta, etc.
Etiqueta <input>
Crear los campos en el formulario es tan sencillo como utilizar la etiqueta antecedida de lo que deseas obtener. Por ejemplo:
Veremos:
Si queremos crear una casilla de verificación, un campo de número o cualquier otro tipo de campo en un formulario HTML, no siempre utilizaremos la etiqueta <input>. Existen varios tipos de campos para formularios HTML y debemos especificar el tipo de campo que es cada elemento del formulario. Para ello, aprenderemos a utilizar el atributo type.
Vamos a continuar aprendiendo sobre los diferentes tipos de campos y cómo especificarlos utilizando el atributo type.
Atributo type
El atributo type va dentro de la etiqueta y su valor indicará que tipo de campo se está creando. Veamos algunos valores que puede tomar el atributo type en un formulario HTML:
Valores de atributo type en formularios HTML
- Text: para campos de texto
- Password: para campos de contraseña
- Checkbox: para casillas de verificación
- Radio: para casillas de selección
- Submit: para botones de envío
- Reset: para botones de resetear
- File: para campos de selección de archivo
Ejemplo de formulario html con atributo type
En el siguiente ejemplo crearemos un formulario empleando los diversos tipos de campo que aprendimos anteriormente y para organizar y diferenciar mejor cada campo, emplearemos la etiqueta de salto de linea <br/>, veamos:
Veremos:
Si observas el anterior ejemplo te darás cuenta de que todos los campos están construidos con la etiqueta html <input>. Pero existen otros campos que no utilizan <input>, sino etiquetas específicas como la etiqueta <select> y <textarea>, conozcamos de que se tratan.
Crear una desplegable con opciones HTML
Ahora aprenderemos a realizar desplegables en formularios, seguramente viste esos campos en las que existe un desplegable con varias opciones dentro para seleccionar una de ellas, pues ahora aprenderás a hacerlo.
Etiqueta <select>
Utilizaremos la etiqueta para crear un campo desplegable, este tipo de campos en HTML permiten seleccionar una opción del desplegable y además son muy útiles en esas ocasiones en las que buscamos buena presentación de espacio en el formulario.
Etiqueta <option>
Utilizaremos la etiqueta dentro de la etiqueta . contiene una opción del desplegable y podemos implementar la cantidad de opciones que deseemos.
Ejemplo de un campo desplegable en formularios HTML
El ejemplo a continuación trata de un desplegable con 5 opciones de colores para elegir, veamos:
Por defecto estará seleccionada la primera opción, además es necesario pasar el cursor y clic para desplegar las opciones, una vez seleccionada la opción, esta regresa a su estado inicial pero con la opción seleccionada.
Atributos para etiqueta <select> en formularios html
- size: Utiliza el atributo size para determinar la cantidad de opciones a mostrar y su valor en números.
- multiple:– Utiliza el atributo multiple con valor también multiple para permitir que el desplegable sea de múltiple selección de tal manera que permita seleccionar varias opciones.
Crear un campo de texto grande en formularios HTML
Un campo de texto con varias lineas disponible en el formulario puede ser necesario para permitir a nuestros usuarios enviar extensos textos y para ello haremos uso de la etiqueta <textarea>.
Etiqueta <textarea>
La etiqueta <textarea> se utilizara para crear un área de texto de varias líneas, puede servirnos por ejemplo para un capo de mensaje, veamos un ejemplo concreto:
Veremos:
Si observamos, el campo de texto multilinea posee en la esquina inferior derecha un asistente que permite ampliar el campo con el cursor.
Atributo action
El valor del atributo action será la URL de la página que queremos que cargue después de que se envíe la información de un formulario. Este atributo va dentro de la etiqueta y lo podemos utilizar si deseamos.
Atributo method
El atributo method puede tomar como valores a GET o POST y esto indica el método http que será utilizado cuando se envíe la información.
- Cuando se usa el valor get, los datos del formulario podrán ser vistos en la dirección de la página.
- Cuando se usa el valor post los datos enviados no serán visibles en la dirección de la página.
Por seguridad se recomienda utilizar usar el valor post, para datos sensibles.
Atributo name
Utiliza el atributo name para ponerle un nombre al formulario
Para que el formulario funcione correctamente utilizaremos el atributo name para cada campo del formulario, así será posible recibir correctamente los datos enviados.
Veremos:
El atributo name será necesario ara procesar la información de cada campo y que estas lleguen a su destino correctamente.
Hemos aprendido a crear un formulario estático en HTML junto con muchos detalles importantes. Sin embargo, aún no podemos enviar ni recibir información a través de él. Para lograr eso, necesitamos que los datos se envíen a un servidor y sean procesados allí. Esto se logra utilizando otro lenguaje de programación, como PHP, y aprenderemos sobre eso en su respectivo curso. Por ahora, lo que hemos aprendido es más que suficiente para entender el proceso básico de creación de formularios en HTML.