Curso HTML5: Manejo de Formularios

Formularios HTML

Se utiliza un formulario HTML para recopilar la entrada del usuario. La entrada del usuario se envía con mayor frecuencia a un servidor para su procesamiento.

El elemento HTML <input> es el elemento de formulario más utilizado.

Un elemento <input> se puede mostrar de muchas formas, según el atributo de tipo.

Aquí hay unos ejemplos:

• <input type="text">            Muestra un campo de entrada de texto de una sola línea

• <input type="radio">          Muestra un botón de radio (para seleccionar una de muchas opciones)

• <input type="checkbox"> Muestra una casilla de verificación (para seleccionar cero o más de muchas opciones)

• <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

Atributos de formulario HTML

El atributo action

El atributo action define la acción que se realizará cuando se envíe el formulario.

Por lo general, los datos del formulario se envían a un archivo en el servidor cuando el usuario hace clic en el botón Enviar.

En el siguiente ejemplo, los datos del formulario se envían a un archivo llamado "action_page.php". Este archivo contiene un script del lado del servidor que maneja los datos del formulario.

El atributo method

El atributo method especifica el método HTTP que se utilizará al enviar los datos del formulario.

Los datos del formulario se pueden enviar como variables de URL (con method="get") o como transacción de publicación HTTP (con method="post").

El método HTTP predeterminado al enviar datos de formulario es GET.

Notas sobre GET:

• Agrega los datos del formulario a la URL, en pares de nombre/valor

• ¡NUNCA use GET para enviar datos confidenciales! (¡Los datos del formulario enviado son visibles en la URL!)

• La longitud de una URL es limitada (2048 caracteres)

• Útil para envíos de formularios en los que un usuario desea marcar el resultado

• GET es bueno para datos no seguros, como cadenas de consulta en Google

Notas sobre POST:

• Agrega los datos del formulario dentro del cuerpo de la solicitud HTTP (los datos del formulario enviado no se muestran en la URL)

• POST no tiene limitaciones de tamaño y se puede utilizar para enviar grandes cantidades de datos.

• Los envíos de formularios con POST no se pueden marcar

El atributo de autocomplete

El atributo de autocompletar especifica si un formulario debe tener la opción de autocompletar activada o desactivada.

Cuando la función de autocompletar está activada, el navegador completa automáticamente los valores en función de los valores que el usuario ha ingresado anteriormente.

Elementos de formulario HTML

Los elementos HTML <form>

El elemento HTML <form> puede contener uno o más de los siguientes elementos de formulario:

• <input>

• <label>

• <select>

• <textarea>

• <button>

• <fieldset>

• <legend>

• <datalist>

Tipos de entrada HTML

Estos son los diferentes tipos de entrada que puede usar en HTML:

• <input type="button">

• <input type="checkbox">

• <input type="color">

• <input type="date">

• <input type="datetime-local">

• <input type="email">

• <input type="file">

• <input type="hidden">

• <input type="image">

• <input type="month">

• <input type="number">

• <input type="password">

• <input type="radio">

• <input type="range">

• <input type="reset">

• <input type="search">

• <input type="submit">

• <input type="tel">

• <input type="text">

• <input type="time">

• <input type="url">

• <input type="week">