Table of Contents
Un formulario en HTML es una colección de elementos llamados campos que nos sirven para poder recolectar información de los visitantes en tu sitio web, Por ejemplo, cuando te registras o inicias sesión en alguna aplicación como Facebook o Netflix, seguramente escribes información como tu nombre, email o contraseña dentro de un formulario.
Formularios en HTML
Lo primero que debemos de conocer cuando empezamos a trabajar con formularios en HTML es que existe una etiqueta FORM, esta etiqueta FORM envuelve todos los elementos del formulario, desde los campos hasta los botones. Ejemplo
<form action="#" method="POST">
</form>Es importante mencionar que los formularios en HTML son la fuente de entrada de datos para su posterior procesamiento, sin embargo, mediante HTML no podemos procesar esos datos, ya que necesitamos un lenguaje del lado del servidor para poder procesarlos.
Existen distintos lenguajes del lado del servidor, sin embargo, probablemente los más conocidos son PHP, Python, Ruby o NodeJS por mencionar algunos, Si quieres aprender PHP, te invito a revisar el artículo Curso De PHP Desde CERO Gratis: Instalación De XAMPP.
Continuando con los formularios en HTML, como podrás observar, la etiqueta form cuenta con dos atributos, el primero es el atributo acción que indica cual será la página a la que redireccionaremos cuando se envie el formulario y el segundo atributo es el método, existen diferentes tipos de métodos pero comúnmente se utiliza el método POST.
Después de conocer sus atributos, entonces, lo más relevante de esto sería aprender a agregar campos de acuerdo a su tipo o su función.
¿Qué es un Input en HTML?
Los campos inputs son los comúnmente utilizados dentro de los formularios en HTML, ya que por defecto nos añaden un campo de texto en donde se puede escribir información como por ejemplo un correo electrónico o una contraseña.
También es importante mencionarte que al igual que las etiquetas meta o las etiquetas img, el campo input no tiene etiqueta de cierre.
Una vez que ya sabemos que existe el campo input, lo siguiente es conocer que tiene un atributo denominado type, el cual indica cual es el tipo de input que queremos utilizar. Si le damos como valor text dentro del atributo type, le estamos indicando que queremos utilizar un campo de texto, sin embargo, existen otros tipos como: email, tel, password, date, por mencionar algunos.
Otro atributo bastante utilizado dentro de los inputs es el placeholder, el cual funciona como sugerencia o instrucción antes de escribir algún valor en el formulario, probablemente habrás visto que hay campos que dicen: Escribe tu nombre y al escribir se borra la leyenda, esa es la función del Placeholder.
Te dejo un ejemplo de los tipos de campos que podemos utilizar dentro de los formularios en HTML
<input type="text" name="texto">
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
<input type="password" name="contrasena">
<input type="number" name="numero">
<input type="date" name="fecha">
<input type="time" name="hora">
<input type="checkbox" name="lista">
<input type="radio" name="genero" value="M">
<input type="color" name="colorElegido">
<input type="range" name="rango">
<input type="hidden" name="nombre" value="pepito">Como puedes observar, el campo input es el más desarrollado dentro de los formularios en HTML, ya que permite establecer qué tipo de campo vamos a ocupar y con base en ello definir la interfaz del usuario, Sin embargo, input no es el único campo o etiqueta que podemos ocupar dentro de form, veamos algunos más
¿Qué funcion tiene label HTML?
La etiqueta Label define la instrucción o leyenda que le queremos dar al elemento de los formularios en HTML y se puede complementar mediante el atributo placeholder del input, además también ayuda a dar clic en áreas o regiones difíciles dentro de la interfaz gráfica ya que cuenta con un atributo for que deberá ser igual al atributo id del input para poder enlazarlos, ejemplo:
<label for="nombre">Nombre</label>
<input type="text" id="nombre" placeholder="Escribe aquí tu Nombre" />¿Cómo poner un textarea en HTML?
Algunas veces una sola línea de texto no basta y es por eso que existe la etiqueta textarea, para poder darles a los visitantes un espacio más grande de texto para poder profundizar en su escritura, por ejemplo, cuando dejan algún comentario.
Los atributos del textarea son el id, el name, cols, y rows, adicional del placeholder como en el input text por ejemplo:
<textarea id="comments" name="comments" placeholder="Escribe tu comentario"></textarea>Le puedes permitir al textarea múltiples líneas, adicional a que tiene una propiedad por defecto resize la cual permite redimensionar el textarea en ancho y alto.
¿Para qué sirve select HTML?
En ocasiones, cuando creamos formularios en HTML, no queremos que el usuario pueda escribir, es por ello que le podemos preestablecer una serie de opciones para que el pueda seleccionar, en este punto, toma sentido el campo select.
una vez que tienes tu lista de opciones, simplemente las tendrás que agregar al campo, la recomendación es que intentes que la lista no sea tan extensa, para no cansar con el scroll a tu usuario.
La etiqueta select al igual que las Listas Ordenadas o Desordenadas, deben de contener dentro de ellas etiquetas option que serán los elementos a desplegar dentro del select, ejemplo:
<select id="cursos" name="cursos">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="mysql">MySQL</option>
<option value="javascript">Javascript</option>
</select>En resumen
Como puedes observar, existen múltiples campos que podemos ocupar de acuerdo a nuestras necesidades y adicional a los campos de texto, es por ello que te invito a revisar que funciones tiene cada uno para dar un panorama más claro y sobre todo funcional de las actividades con los formularios en HTML.
Si te ha gustado este artículo te pido me sigas en mis redes sociales:
🖥️ Youtube: https://www.youtube.com/@eightdev?sub_confirmation=1
🎵 Tik Tok: https://www.tiktok.com/@8devmx
✅ Facebook: https://www.facebook.com/8devmx/
📸 Instagram: https://www.instagram.com/8devmx/
Sin más, ¡nos vemos la próxima!
