Tutorial HTML: Formularios (form, input, select, textarea, button)

Dentro de las muchas etiquetas que HTML proporciona, las relacionadas con los formularios son fundamentales para recoger datos del usuario. Las principales etiquetas relacionadas con formularios son: form, input, select, textarea y button.

Form (Formulario)

El elemento form en HTML actúa como un contenedor para todos los elementos de control de un formulario, tales como campos de texto, botones, casillas de verificación, etc. Los datos ingresados en el formulario pueden ser enviados a un servidor para su procesamiento. Un formulario se define utilizando la etiqueta <form> y puede contener uno o varios elementos de control.

Un ejemplo de un formulario simple sería:

<form action="/submit" method="post">
  <input type="text" name="nombre" placeholder="Nombre">
  <input type="submit" value="Enviar">
</form>

En este caso, action es el atributo que determina a qué URL se enviarán los datos del formulario cuando se haga clic en el botón de envío, mientras que method define cómo se enviarán los datos.

Input (Entrada)

El elemento input es una de las etiquetas más usadas en HTML para recoger datos del usuario. Es muy versátil y puede crear varios tipos diferentes de campos de entrada al definir el atributo type.

Por ejemplo, un campo de entrada de texto se puede crear de la siguiente manera:

<input type="text" name="nombre" placeholder="Nombre">

En este caso, type="text" indica que este campo aceptará texto. name se utiliza para identificar el campo de entrada, y placeholder proporciona un texto de ayuda que se muestra en el campo de entrada antes de que el usuario ingrese algo.

Select (Selección)

El elemento select se utiliza para crear un menú desplegable de opciones. El usuario puede seleccionar una opción de la lista. Cada opción dentro de un elemento select se define con la etiqueta option.

Un ejemplo de un elemento select sería:

<select name="pais">
  <option value="usa">Estados Unidos</option>
  <option value="esp">España</option>
  <option value="mex">México</option>
</select>

Textarea (Área de texto)

El elemento textarea se utiliza para crear un área de entrada de texto multilínea. A diferencia del elemento input de tipo texto que permite una sola línea de texto, textarea permite a los usuarios escribir textos más largos, como descripciones o comentarios.

Un ejemplo de un elemento textarea sería:

<textarea name="comentario" rows="5" cols="30">
Escribe aquí tu comentario...
</textarea>

Button (Botón)

El elemento button se utiliza para crear un botón clickeable. Dependiendo del contexto, puede usarse para enviar formularios, activar scripts de JavaScript, entre otras cosas.

Un ejemplo de un elemento button sería:

<button type="submit">Enviar</button>

En este caso, el botón tiene el tipo "submit", lo que significa que, cuando se hace clic en él, enviará el formulario en el que se encuentra.