Etiqueta FORM

Cada vez que utilizas un motor de búsqueda, realiza un pedido o te unes a una lista de correo electrónico, utilizas un formulario. Un formulario es un elemento HTML que contiene y organiza objetos llamados controles de formulario, incluidos cuadros de texto, casillas de verificación y botones, que pueden aceptar información de los visitantes del sitio web.

Por ejemplo, es posible que hayas usado el formulario de búsqueda de Google (https://www.google.com/) muchas veces, pero nunca pensaste en cómo funciona. La forma es bastante simple; contiene solo tres controles de formulario: el cuadro de texto que acepta las palabras clave utilizadas en la búsqueda y dos botones de búsqueda. El botón “Buscar con Google” envía el formulario e invoca un proceso para buscar en las bases de datos de Google y mostrar una página de resultados. El caprichoso botón “Me siento con suerte” envía el formulario y muestra la página superior de tus palabras clave.

El elemento <form>

Ahora que tienes una comprensión básica de lo que hacen los formularios, concentrémonos en el código HTML para crear un formulario. El elemento o etiqueta form contiene un formulario en una página web. La etiqueta <form> especifica el comienzo de un área de formulario. La etiqueta de cierre </form> especifica el final de un área de formulario. Puede haber múltiples formularios en una página web, pero no pueden estar anidados uno dentro de otro.

El elemento form se puede configurar con atributos que especifican qué programa o archivo del lado del servidor procesará el formulario, cómo se enviará la información del formulario al servidor y el nombre del formulario. Estos atributos se enumeran en la siguiente Tabla:

Por ejemplo, para configurar un formulario con el atributo name establecido en el valor “orden“, usando el método post e invocando un script llamado demo.php en tu servidor web, el código es:

<form name="order" method="post" id="order" action="demo.php">
. . . los controles de formulario van aquí. . .
</form>

Controles de form

El propósito de un formulario es recopilar información de un visitante de la página web. Los controles de formulario son los objetos que aceptan la información. Los tipos de controles de formulario incluyen cuadros de texto, cuadros de texto de desplazamiento, listas de selección, botones de opción, cuadros de verificación y botones.

HTML5 ofrece nuevos controles de formulario, incluidos los que están personalizados para direcciones de correo electrónico, URL, fechas, horas, números e incluso la selección de fechas. Los elementos HTML que configuran los controles de formulario se introducirán más adelante.

El elemento <imput>

El elemento input es una etiqueta independiente o nula que se utiliza para configurar varios tipos diferentes de controles de formulario. El elemento input no está codificado como un par de etiquetas de apertura y cierre. Utiliza el atributo type para especificar el tipo de control de formulario que debe mostrar el navegador.

Caja de Texto o Text Box (<input type=”text”)

La etiqueta <input> con type = "text" configura un control de formulario de cuadro de texto. El control de formulario del cuadro de texto acepta información numérica o de texto, como nombres, direcciones de correo electrónico, números de teléfono y otros textos.

E-mail: <input type="text" name="email" id="email">

Los atributos comunes del elemento input para los cuadros de texto se enumeran en la siguiente Tabla:

Varios atributos son nuevos en HTML5. El nuevo atributo required es emocionante porque hará que los navegadores compatibles realicen la validación de formularios. Los navegadores que admiten el atributo required de HTML5 verificarán automáticamente que se haya ingresado información en el cuadro de texto y mostrarán un mensaje de error cuando no se cumpla la condición. Un ejemplo de código es:

E-mail: <input type="text" name="email" id="email"
required="required">

Botones de envío o Submit Button (<input type=”submit”>)

El control de formulario Submit Button se utiliza para enviar el formulario. Cuando se hace clic, activa el método action en el elemento de formulario y hace que el navegador envíe los datos del formulario (los pares de name y value para cada control de formulario) al servidor web. El servidor web invocará el programa de procesamiento del lado del servidor o el script listado en la propiedad actiondel formulario.

El elemento input con type = "submit" configura un botón de envío. Por ejemplo,

<input type="submit">

Botón de borrado o Reset Button (<input type=”reset”>)

El control de formulario Reset Button se usa para restablecer los campos del formulario a sus valores iniciales. Un botón de reinicio no envía el formulario.

El elemento input con type = "reset" configura un botón de reinicio. Por ejemplo,

<h1>Suscríbete a nuestro boletín</h1>
<form method="get">
E-mail: <input type="text" name="email" id="email" >
<br>
<br>
<input type="submit" value="Inscríbeme!"> <input type="reset">
</form>

Los atributos comunes para los botones de envío (submit) y los botones de reinicio (reset) se enumeran en la siguiente Tabla:

Cuadro de verificación o Check Box (<input type=”checkbox”>)

El control de formulario de casilla de verificación permite al usuario seleccionar uno o más de un grupo de elementos predeterminados. El elemento input con type = "checkbox" configura una casilla de verificación.

El siguiente código  muestra un ejemplo con varias casillas de verificación. Ten en cuenta que el usuario puede seleccionar más de una casilla de verificación. El HTML es:

Elige los navegadores que usas: <br>
<input type="checkbox" name="IE" id="IE" value="yes">
Internet Explorer<br>
<input type="checkbox" name="Firefox" id="Firefox"
value="yes"> Firefox<br>
<input type="checkbox" name="Opera" id="Opera"
value="yes"> Opera<br>

Los atributos comunes de las casillas de verificación se enumeran en la siguiente Tabla:

Botón de opción o Radio Button (<input type=”radio”>)

El control de formulario de botón de opción/radio permite al usuario seleccionar exactamente una opción (y solo una) de un grupo de elementos predeterminados. Cada botón de opción de un grupo recibe el mismo atributo name y un atributo value único. Debido a que el atributo name es el mismo, los elementos se identifican como parte de un grupo en los navegadores y solo se puede seleccionar uno.

El elemento input con type = "radio" configura un botón de radio. El siguiente código muestra un ejemplo con un grupo de botones de radio. Ten en cuenta que el usuario solo puede seleccionar un botón de opción a la vez.

Selecciona tu navegador favorito:<br>
<input type="radio" name="favbrowser" id="favIE" value="IE"> Internet
Explorer<br>
<input type="radio" name="favbrowser" id="favFirefox" value="Firefox">
Firefox<br>
<input type="radio" name="favbrowser" id="favOpera" value="Opera">
Opera<br>

Los atributos comunes de los botones de radio se enumeran en la siguiente Tabla:

Campo Oculto o Hidden (<input type=”hidden”>)

El control de entrada hidden no almacena información numérica o de texto, pero no está visible en la ventana del navegador. Se puede acceder a los controles ocultos mediante secuencias de comandos del lado del cliente y procesamiento del lado del servidor.

El elemento input con type = "hidden" configura un control de entrada oculto. El HTML para crear un control de entrada oculto con el atributo name establecido en "sendto" y el atributo value establecido en una dirección de correo electrónico es:

<input type="hidden" name="sendto" id="sendto" value="hola@htmldesdecero.es">

Los atributos comunes para los controles de entrada ocultos se enumeran en la siguiente Tabla:

Casilla de contraseña o Password Box (<input type=”password”>)

El control de formulario del cuadro de contraseña es similar al cuadro de texto, pero se usa para aceptar información que debe estar oculta a medida que se ingresa, como una contraseña.

El elemento input con type = "password" configura un cuadro de contraseña. Cuando el usuario escribe información en un cuadro de contraseña, se muestran asteriscos (u otro símbolo, según el navegador) en lugar de los caracteres que se han escrito. Esto oculta la información de alguien que mira por encima del hombro de la persona que escribe. Los caracteres reales escritos se envían al servidor y la información no es realmente secreta u oculta.

Contraseña: <input type="password" name="pword" id="pword">

Área de texto con barras de desplazamiento (Scrolling Text Box)

Elemento Textarea

El control de formulario del cuadro de texto desplazable acepta comentarios, preguntas o descripciones de forma libre. El elemento textarea configura un cuadro de texto de desplazamiento. La etiqueta <textarea> denota el comienzo del cuadro de texto de desplazamiento.

La etiqueta de cierre </textarea> denota el final del cuadro de texto de desplazamiento. El texto contenido entre las etiquetas se mostrará en el área de cuadro de texto de desplazamiento. En el siguiente código se muestra un cuadro de texto de desplazamiento de muestra.

Comentarios:<br>
<textarea name="comments" id="comments" cols="40" rows="2"> Introduce tus 
comentarios aquí</textarea>

Los atributos comunes para los cuadros de texto de desplazamiento se enumeran en la siguiente Tabla:

Listas de selección

Elemento Select

El elemento select contiene y configura el control de formulario de lista de selección. La etiqueta <select> denota el comienzo de la lista de selección. La etiqueta de cierre </select> denota el final de la lista de selección. Los atributos configuran el número de opciones para mostrar y si se puede seleccionar más de un elemento de opción. Los atributos comunes para elementos seleccionados se enumeran en la siguiente Tabla:

Elemento Option

El elemento option contiene y configura un elemento de opción que se muestra en el control de formulario de lista de selección. La etiqueta <option> denota el comienzo del elemento de opción. La etiqueta de cierre </option> denota el final del elemento de opción. Los atributos configuran el valor de la opción y si están preseleccionados. Los atributos comunes para los elementos de opción se enumeran en la siguiente Tabla:

Ejemplos:

<p>Una lista de selección con tamaño establecido en 1 funciona como 
un cuadro desplegable cuando se hace clic en la flecha</p>
<select size="1" name="favbrowser" id="favbrowser">
<option>Selecciona tu navegador favorito</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Opera">Opera</option>
</select>
<br>
<p>Debido a que hay más de cuatro opciones, 
el navegador muestra una barra de desplazamiento</p>
<select size="4" name="jumpmenu" id="jumpmenu">
<option value="index.html">Inicio</option>
<option value="products.html">Productos</option>
<option value="services.html">Servicios</option>
<option value="about.html">Sobre</option>
<option value="contact.html">Contacto</option>
</select>

Botones de imagen y el elemento Button

Como has trabajado con los formularios, puedes haber notado que el botón de envío estándar es un poco simple. Puedes hacer que el control de formulario que los visitantes seleccionen para enviar el formulario sea un poco más atractivo y visualmente interesante de dos maneras:

1. Configurar una imagen con el elemento input
2. Crear una imagen personalizada que esté configurada con el elemento button

Botón imagen o Image Button

Cuando una imagen es utilizada en lugar del botón de envío estándar, se le llama image button. Cuando se hace clic o se toca un botón de imagen, se envía el formulario. El botón de imagen se codifica utilizando la etiqueta <input> junto con type = "image" y un atributo src con el valor del nombre del archivo de imagen. Por ejemplo:

<input type="image" src="login.gif" alt="Botón Iniciar Sesión">

Elemento Button

Otra forma de agregar más interés a un formulario es usar el elemento button, que se puede usar para configurar no solo las imágenes, sino también los bloques de texto como el área seleccionable que puede enviar o restablecer un formulario.

<button type="submit">
<img src="signup.gif" width="80" height="28" alt="Regístrate para recibir 
el boletín gratuito"><br>Regístrate para recibir el boletín gratuito
</button>

Cualquier contenido de la página web que se encuentre entre las etiquetas <button> y </button> está configurado para ser parte del botón. Los atributos comunes para los elementos de botón se enumeran en la siguiente Tabla:

Accesibilidad en formularios HTML

En esta sección, explorará técnicas para aumentar la accesibilidad de los controles de formulario, incluidos el elemento label, el elemento fieldset, el elemento legend, el atributo tabindex y el atributo accesskey, que facilita que las personas con problemas de visión y movilidad utilicen tus páginas de formularios.

El uso de elementos label, fieldset y legend puede aumentar la legibilidad y facilidad de uso del formulario web para todos los visitantes.

Elemento Label

El elemento label es una etiqueta contenedora que asocia una descripción de texto con un control de formulario. Esto es útil para personas con problemas visuales que utilizan tecnología de asistencia, como un lector de pantalla, para hacer coincidir las descripciones de texto en los formularios con sus controles de formulario correspondientes.

El elemento label también beneficia a las personas que tienen dificultades con el control de motricidad fina. Al hacer clic en cualquier lugar en un control de formulario o en su etiqueta de texto asociada, el cursor se centrará en el control de formulario. La etiqueta <label> especifica el comienzo de la etiqueta. La etiqueta de cierre </label> especifica el final de la etiqueta.

Hay dos métodos diferentes para asociar una etiqueta con un control de formulario:

• El primer método coloca el elemento label como un contenedor alrededor de la descripción del texto y el elemento de formulario HTML. El código es:

<label>E-mail: <input type="text" name="email" id="email"></label>

• El segundo método utiliza el atributo for para asociar el label con un elemento de formulario HTML en particular. El código es:

<label for="email">E-mail: </label>
<input type="text" name="email" id="email">

Observa que el valor del atributo for en el elemento label es el mismo que el valor del atributo id en el elemento input. El elemento input utiliza los atributos name e id para diferentes propósitos. El atributo name puede ser utilizado por los scripts del lado del cliente y el procesamiento del lado del servidor. El atributo id crea un identificador que puede ser utilizado por el elemento label, el elemento anchor y los selectores de CSS.

Elementos Fieldset y Legend

Una técnica que se puede utilizar para crear un formulario más agradable visualmente es agrupar elementos de un propósito similar utilizando el elemento fieldset, lo que hará que el navegador muestre una señal visual, como un contorno o un borde, alrededor de los elementos de formulario agrupados dentro del campo. La etiqueta <fieldset> indica el comienzo de la agrupación. La etiqueta de cierre </fieldset> denota el final de la agrupación.

El elemento legend proporciona una descripción de texto para la agrupación de fieldset. La etiqueta <legend> denota el comienzo de la descripción del texto. La etiqueta de cierre </legend> denota el final de la descripción del texto. El código de ejemplo HTML para crear agrupación es:

<fieldset>
<legend>Dirección de Envio</legend>
<label>Calle: <input type="text" name="street" id="street"
size="54"></label><br><br>
<label>Ciudad: <input type="text" name="city" id="city"></label>
<label>Estado: <input type="text" name="state" id="state" maxlength="2"
size="5"></label>
<label>Zip: <input type="text" name="zip" id="zip" maxlength="5"
size="5"></label>
</fieldset>

Atributo tabindex

Algunos de los visitantes de tu sitio web pueden tener dificultades para usar el mouse y accederán a tu formulario con un teclado. La tecla Tabulador se puede usar para moverse de un control de formulario a otro. La acción predeterminada para la tecla Tabulador dentro de un formulario es moverse al siguiente control de formulario en el orden en que los controles de formulario están codificados en el documento de la página web. Esto suele ser apropiado. Sin embargo, si el orden de tabulación debe cambiarse para un formulario, usa el atributo tabindex en cada control de formulario.

Para cada etiqueta de formulario (<input>, <select> y <textarea>), codifica un atributo tabindex con un valor numérico, comenzando con 1, 2, 3, y así sucesivamente en orden numérico. El código HTML para configurar el cuadro de texto del correo electrónico del cliente como la posición inicial del cursor es:

<input type="text" name="Email" id="Email" tabindex="1">

Si configuras un control de formulario con tabindex = "0", se visitará después de todos los otros controles de formulario a los que se asigna un atributo tabindex. Si se asignan dos controles de formulario el mismo valor de índice de tabulación, se visitará primero el que esté codificado primero en el HTML.

Atributo accesskey

Otra técnica que puede hacer que tu formulario sea compatible con el teclado es el uso del atributo accesskey en los controles de formulario. También puedes configurar el atributo accesskey en una etiqueta anchor (o anclaje). Asignar el atributo accesskey al valor de uno de los caracteres (una letra o un número) en el teclado creará una tecla de acceso rápido que el visitante de tu sitio web puede presionar para mover el cursor inmediatamente a un control de formulario o hipervínculo.

El método utilizado para acceder a esta tecla de acceso directo varía según el sistema operativo. Los usuarios de Windows presionarán la tecla Tab y la tecla de caracteres. Los usuarios de Mac presionarán la tecla Ctrl y la tecla de carácter. El código HTML para esto es:

Ten en cuenta que no puedes confiar en el navegador para indicar que un carácter es una clave de acceso, también llamada tecla de acceso rápido. Tendrás que codificar manualmente la información sobre la tecla de acceso rápido. Una señal visual puede ser útil, como mostrar la tecla de acceso rápido en negrita o colocar un mensaje como (Alt + E) después de un control de formulario o hipervínculo que usa una tecla de acceso rápido. Al elegir los valores de la tecla de acceso, evita las combinaciones que ya utiliza el sistema operativo (como Alt + F para mostrar el menú Archivo). Probar las teclas de acceso rápido es crucial.

Controles de formulario HTML5

HTML5 ofrece una variedad de nuevos controles de formulario para desarrolladores web que brindan una mayor facilidad de uso para los visitantes de páginas web que utilizan navegadores modernos. Por ejemplo, algunos controles de formulario nuevos ofrecen ediciones y validación integradas en el navegador. Los futuros diseñadores web probablemente tomarán estas características por sentado algún día, pero está justo en medio de este gran avance en la codificación de páginas web, por lo que ahora es un buen momento para familiarizarse con los nuevos controles de formulario.

La visualización y el soporte de los nuevos controles de formulario HTML5 variarán según el navegador, ¡pero puedes usarlos ahora mismo! Los navegadores que no admiten los nuevos tipos de entrada los mostrarán como cuadros de texto e ignorarán los atributos o elementos no compatibles. En esta sección, explorarás la nueva dirección de correo electrónico HTML5, URL, número de teléfono, campo de búsqueda, lista de datos, control deslizante, control de giro, calendario y color.

Input type email

El control de formulario de entrada de dirección de correo electrónico es similar al cuadro de texto. Su propósito es aceptar información que debe estar en formato de correo electrónico, como “aprenderdesde0@gmail.com”. El elemento input con type="email" configura un control de formulario de entrada de dirección de correo electrónico.

Solo los navegadores que admiten el valor del atributo HTML5 email verifican el formato de la información. Otros navegadores tratarán este control de formulario como un cuadro de texto.

<label for="myEmail">E-mail:</label>
<input type="email" name="myEmail" id="myEmail">

Input type url

El control de formulario de entrada de URL es similar al cuadro de texto. Está destinado a aceptar cualquier tipo de URL o URI válido, como “https://aprenderdesdecero.online”. El elemento El elemento input con type="url" configura un control de formulario de entrada de URL.

Solo los navegadores que admiten el valor del atributo url HTML5 verificarán el formato de la información. Otros navegadores representan este control de formulario como un cuadro de texto. 

Input type tel

El control de formulario de entrada de número de teléfono es similar al cuadro de texto. Su finalidad es aceptar un número de teléfono. El elemento input con type="tel" configura un control de formulario de entrada de número de teléfono.

Los navegadores que no admiten type="tel" representarán este control de formulario como un cuadro de texto.

<label for="mobile">Número de Teléfono:</label>
<input type="tel" name="mobile" id="mobile">

Input type search

El campo de búsqueda es similar al cuadro de texto y se utiliza para aceptar un término de búsqueda. El elemento input con type="search" configura un control de formulario de entrada de campo de búsqueda.

Los navegadores que no admiten type="search" mostrarán este control de formulario como un cuadro de texto.

<label for="keyword">Buscar:</label>
<input type="search" name="keyword" id="keyword">

Formulario con datalist

El siguiente código muestra el control de formulario datalist en acción.

<label for="color">Color favorito:</label>
<input type="text" name="color" id="color" list="colors">
<datalist id="colors">
<option value="rojo" label="Rojo">
<option value="verde" label="Verde">
<option value="azul" label="Azul">
<option value="amarillo" label="Amarillo">
<option value="rosa" label="Rosa">
<option value="negro" label="Negro">
</datalist>

Observa cómo se ofrece al usuario una selección de opciones junto con un cuadro de texto para la entrada. El control de formulario datalist es una manera conveniente de ofrecer opciones y proporcionar flexibilidad en el formulario. El datalist se configura utilizando tres elementos: un elemento input, el elemento datalist y uno o más elementos option. Solo los navegadores que admiten el elemento de datalist HTML5 mostrarán y procesarán los elementos de datalist.

Control de formulario Slider

El control de forma deslizante proporciona una interfaz de usuario visual e interactiva que acepta información numérica. El elemento input con type="range" configura un control deslizante en el que se elige un número dentro de un rango específico. El rango predeterminado es de 1 a 100. Solo los navegadores que admiten el valor del atributo range HTML5 mostrarán el control deslizante interactivo.

<label for="myChoice">Elige un número entre 1 y 100.:</label><br>
Bajo <input type="range" name="myChoice" id="myChoice" min="1"
max="100"> Alto

El control deslizante acepta los atributos enumerados en las siguiente Tabla:

Los atributos min, max y step son nuevos. Utiliza el atributo min para configurar el valor de rango mínimo. Utiliza el atributo max para configurar el valor de rango máximo. Los controles deslizantes establecen valores numéricos en incrementos, o step, de 1. Usa el atributo step para configurar un valor para que los step incrementales entre los valores sean distintos de 1.

Control de formulario Spinner

El control de formulario de tuerca muestra una interfaz que acepta información numérica y proporciona comentarios al usuario. El elemento input con type="number" configura un control de giro en el que el usuario puede escribir un número en el cuadro de texto o seleccionar un número de un rango específico.

Solo los navegadores que admiten el valor del atributo de número HTML5 mostrarán el control de giro interactivo. Otros navegadores representan este control de formulario como un cuadro de texto.

<label for="myChoice">Elige un número entre 1 y 10:</label>
<input type="number" name="myChoice" id="myChoice" min="1" max="10">

Control de formulario Calendario

HTML5 proporciona una variedad de controles de formulario de calendario para aceptar información relacionada con la fecha y la hora. Usa el elemento input y configure el atributo type para especificar un control de fecha u hora. La siguiente Tabla enumera los controles de fecha y hora del calendario HTML5:

<label for="myDate">Elige una fecha</label>
<input type="date" name="myDate" id="myDate">

Control de formulario Color

El control de formulario de color ofrece una interfaz de selector de color al usuario. El elemento dinput con type="color" configura un control con el que el usuario puede elegir un color. Solo los navegadores que admiten el valor del atributo de color HTML5 mostrarán una interfaz de selección de color. Otros navegadores representan este control de formulario como un cuadro de texto.

<label for="myColor">Elige un color:</label>
<input type="color" name="myColor" id="myColor">

Aprende más acerca de los formularios en este artículo de casos de uso. ¡Deja tus dudas en los comentarios!