huellitas

FORMULARIO

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>

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.

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


Curso creado con para alumnos de UPIICSA