En este artículo aprenderás los conceptos básicos sobre la creación de formularios con HTML, conocerás las etiquetas form, input y label, y la manera en la que se envía esa información al backend de una aplicación.
La creación de formularios en una página web es clave, porque así las personas que visitan nuestros proyectos podrán interactuar con los contenidos que les ofrecemos, y así, podemos solicitarles información necesaria que sirve para mejorar la experiencia, completar un registro o concretar ventas en nuestro sitio.
Crear formularios web es una responsabilidad muy grande, porque si ofrecemos un formulario muy largo y complejo, las personas no lo diligencian; entonces, lo más importante es tener muy claro qué campos son realmente necesarios, y cómo los vamos a captar.
Generalmente a las personas no les gusta diligenciar formularios, los formularios son aburridos y si no sabemos crearlos y diseñarlos, son mucho peor.
El punto clave del éxito de los formularios HTML es que sean pensados y diseñados para las personas, es decir, reducir lo más que se pueda la responsabilidad que tienen a la hora de diligenciarlos.
Por ahí dicen…
“El mejor formulario, es cuando no lo hay”.
Sin más preámbulos, en este artículo conocerás las etiquetas: form, label e input; sabrás qué hay varios tipos de “inputs”, como debes incrustarlos en la página web y la funcionalidad que cumplen.
Etiqueta HTML form
La etiqueta form es una etiqueta semántica, indica al navegador web, que las etiquetas HTML que se encuentran adentro son de tipo formulario, y que captará información que debe ir hacia una base de datos de nuestra aplicación.
La forma correcta de escribir esta etiqueta es: <form></form>.
Atributos de la etiqueta form
action. Dentro de este atributo se agrega la URL hacia dónde se dirige la información que ha sido captada en el formulario. A esta URL también se le denomina técnicamente End Point. En este artículo no manipularemos este atributo.
Ejemplo de la etiqueta form
<form action=”url_destino_end_point”></form>Etiqueta HTML label
Dentro de la etiqueta label se incrusta la etiqueta input, la veremos más adelante. La manera correcta de incrustarla es: <label></label>.
Atributos de la etiqueta label
for. Dentro de esta etiqueta indicamos el texto del id de la etiqueta input.
Ejemplo de la etiqueta label
<label for=”id_input”></label>Etiqueta HTML input
Esta etiqueta es donde las personas depositan los datos que deseamos captar. Existen varios tipos de “inputs” que se determinan a través de los atributos.
La manera correcta de escribir la etiqueta input en HTML es: <input />.
Como puedes observar, esta etiqueta se cierra así misma.
Atributos de la etiqueta HTML input
type
Este atributo es el que indica qué tipo de input estamos captando; puede tener los siguientes valores:
1. text. Indica que la información que va a contener el input es de tipo texto
2. password. Indica que la información que contiene el input es de tipo contraseña y así evitar que sea visible en el navegador mientras se escribe su contenido.
3. date. Este valor, le indica al formulario que el contenido del campo input es de tipo fecha; además habilitará un calendario como ayuda visual que facilita el diligenciamiento del campo.
4. time. Este valor permite habilitar una ayuda visual para diligenciar en este campo una hora y minutos.
5. day. Este valor habilita un calendario como ayuda vidual para diligenciar en este campo un día.
6. week. Este valor habilita un calendario como ayuda visual que muestra el mes y permite seleccionar la semana de ese mes.
7. month. Este valor habilita un calendario como ayuda visual que muestra los meses del año para ser seleccionados.
9. submit. Este valor en el atributo type genera un botón que ejecuta la acción de enviar la información del formulario hacia la base de datos de la aplicación.
id
Este atributo indica el id del input, este id debe ser único e irrepetible de todos los demás “inputs” del formulario.
name
Este atributo es para indicar el nombre del campo input, no debe repetirse, y es importantísimo diligenciarlo con el nombre descrito en el atributo for del label y también debe ser igual al id del input; esto garantiza que la información del formulario se adjunte en la URL o end point del atributo action de la etiqueta form.
placeholder
Este atributo brinda a las personas que diligencian el formulario una ayuda visual que les indica de qué trata ese campo en específico. Por ejemplo, para el campo nombre, se puede indicar el siguiente texto de ayuda: “Por favor ingresa tu nombre”.
Ejemplo completo de la creación de un formulario utilizando las etiquetas HTML form, label, input
<form action="url_destino"> <label for="nombre"> <span>Ingresa tu nombre por favor</span> <input type="text" id="nombre" name="nombre" placeholder="Ingresa tu nombre por favor" /> </label> <label for="nacimiento"> <span>Ingresa tu fecha de nacimiento por favor</span> <input type="date" id="nacimiento" name="nacimiento" placeholder="Ingresa tu fecha de nacimiento por favor" /> </label> <label for="contrasenna"> <span>Ingresa tu contraseña por favor</span> <input type="password" id="contrasenna" name="contrasenna" /> </label> <input type="submit" /> </form>Como puedes observar, ingresamos una etiqueta llamada `<span></span>. Esta etiqueta es para ingresar el valor en texto que se muestra en pantalla al solicitar diligenciar el campo.
En resumen
El atributo name es fundamental para que puedas enviar al Backend de tu aplicación la información la información captada en cada input. Esta información se envía a través del atributo action de la etiqueta form.
Haciendo clic aquí puedes conocer todos los demás atributos que puede tener la etiqueta input.