Definición
Un formulario en HTML se utiliza para recopilar datos de los usuarios. Los datos se envían al servidor cuando el usuario hace clic en el botón de enviar.
Este es un ejemplo de un formulario básico:
<form action="URL_DEL_SERVIDOR" method="POST">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" required>
<label for="email">Correo electronico</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Enviar">
</form>
![](ImagenesHtml/formulario-de-contacto.png)
Elementos básicos de un formulario
form
Esta etiqueta define un formulario y admite algunos atributos específicos para determinar el comportamiento del mismo. Los dos atributos que normalmente se especifican son: action y method.
- action:define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.
- method:define con qué método HTTP se envían los datos (generalmente get o post).
input
Es el elemento de formulario más utilizado y se puede usar de diferentes maneras dependiendo el atributo que lo acompañe.
Estos los atributos más utilizados dentro de la etiqueta <input>:
Atributo | Descripción |
---|---|
<input type="text"> | Comienza a reproducir el video automáticamente. |
<input type="radio"> | Muestra un botón de opción para seleccionar una de muchas alternativas |
<input type="checkbox"> | Muestra una casilla de verificación |
<input type="submit"> | Muestra un botón de envío para enviar el formulario |
<input type="button"> | Muestra un botón en el que se puede hacer clic |
label
Se utiliza para crear una asociación entre una etiqueta de texto (como "Nombre" o "Correo electrónico") y un control de formulario (como un campo de texto, una casilla de verificación, etc.).
Es importante mencionar que el atributo for de la etiqueta <label> debe ser igual al id atributo del elemento <input> para unirlos.
<form action="URL_DEL_SERVIDOR" method="POST">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" required>
</form>
textarea
Se utiliza para crear un área de texto en la que los usuarios pueden escribir múltiples líneas de texto. Esto lo podemos aplicar cuando deseamos hacer o tener comentarios, descripciones, mensajes largos,etc.
Estos son los atributos más utilizados dentro de esta etiqueta:
Atributo | Descripción |
---|---|
<textarea type="rows"> | Número de filas visibles (altura) en el área de texto. |
<textarea type="cols"> | Número de columnas visibles (ancho) en el área de texto. |
<textarea type="placeholder"> | Texto que aparece dentro del área de texto como sugerencia hasta que el usuario comienza a escribir. |
<textarea type="wrap"> | Controla cómo se maneja el texto cuando es más largo que el ancho del área de texto |
Tenemos el siguente ejemplo:
HTML
<textarea>
Por defecto, este elemento contiene este texto
</textarea>>
Resultado