Formularios HTML

Descubra cómo utilizar formularios en HTML y todas las etiquetas de elementos de formulario

Los formularios son la forma en que puede interactuar con una página o una aplicación, construida con tecnologías web.

Tiene un conjunto de controles, y cuando envía el formulario, ya sea con un clic en el botón "enviar" o mediante programación, el navegador enviará los datos al servidor.

De forma predeterminada, este envío de datos hace que la página se recargue después de que se envían los datos, pero usando JavaScript puede alterar este comportamiento (no explicaremos cómo en este libro).

Se crea un formulario utilizando elformetiqueta:

<form>
	...
</form>

Por defecto, los formularios se envían mediante el método GET HTTP. Lo cual tiene sus inconvenientes y, por lo general, desea utilizar POST.

Puede configurar el formulario para utilizar POST cuando se envía mediante elmethodatributo:

<form method="POST">
	...
</form>

El formulario se envía, ya sea mediante GET o POST, a la misma URL donde reside.

Entonces, si el formulario está en elhttps://flaviocopes.com/contactspágina, presionando el botón "enviar" hará una solicitud a esa misma URL.

Lo que puede resultar en que no ocurra nada.

Necesita algo del lado del servidor para manejar la solicitud y, por lo general, "escucha" esos eventos de envío de formularios en una URL dedicada.

Puede especificar la URL a través de laactionparámetro:

<form action="/new-contact" method="POST">
	...
</form>

Esto hará que el navegador envíe los datos del formulario mediante POST al/new-contactURL en el mismo origen.

Si el origen (protocolo + dominio + puerto) eshttps://flaviocopes.com(el puerto 80 es el predeterminado), esto significa que los datos del formulario se enviarán ahttps://flaviocopes.com/new-contact.

Hablé de datos. ¿Qué datos?

Los datos son proporcionados por los usuarios a través del conjunto de controles que están disponibles en la plataforma Web:

  • cuadros de entrada (texto de una sola línea)
  • áreas de texto (texto de varias líneas)
  • seleccionar cuadros (elija una opción de un menú desplegable)
  • botones de radio (elija una opción de una lista siempre visible)
  • casillas de verificación (elija cero, una o más opciones)
  • cargas de archivos
  • ¡y más!

Presentemos cada uno de ellos en la siguiente descripción general de los campos del formulario.

losinputetiqueta

losinputfield es uno de los elementos de formulario más utilizados. También es un elemento muy versátil y puede cambiar completamente el comportamiento en función de latypeatributo.

El comportamiento predeterminado es ser un control de entrada de texto de una sola línea:

<input />

Equivalente a usar:

<input type="text" />

Al igual que con todos los demás campos que siguen, debe asignar un nombre al campo para que su contenido se envíe al servidor cuando se envíe el formulario:

<input type="text" name="username" />

losplaceholderEl atributo se usa para que aparezca un texto, en gris claro, cuando el campo está vacío. Útil para agregar una pista al usuario de lo que debe escribir:

<input type="text" name="username" placeholder="Your username" />

Correo electrónico

Usandotype="email"validará en el lado del cliente (en el navegador) un correo electrónico para verificar que sea correcto (corrección semántica, sin garantizar que la dirección de correo electrónico exista) antes de enviarlo.

<input type="email" name="email" placeholder="Your email" />

Contraseña

Usandotype="password"hará que cada clave ingresada aparezca como un asterisco (*) o un punto, útil para los campos que albergan una contraseña.

<input type="password" name="password" placeholder="Your password" />

Números

Puede hacer que un elemento de entrada acepte solo números:

<input type="number" name="age" placeholder="Your age" />

Puede especificar un valor mínimo y máximo aceptado:

<input type="number" name="age" placeholder="Your age" min="18" max="110" />

losstepEl atributo ayuda a identificar los pasos entre diferentes valores. Por ejemplo, esto acepta un valor entre 10 y 50, en pasos de 5:

<input type="number" name="a-number"  min="10" max="50" step="5" />

Campo escondido

Los campos se pueden ocultar al usuario. Todavía se enviarán al servidor al enviar el formulario:

<input type="hidden" name="some-hidden-field" value="some-value" />

Esto se usa comúnmente para almacenar valores como un token CSRF, usado para seguridad e identificación de usuarios, o incluso para detectar robots que envían spam, usando técnicas especiales.

También se puede utilizar para identificar una forma y su acción.

Establecer un valor predeterminado

Todos esos campos aceptan un valor predefinido. Si el usuario no lo cambia, este será el valor enviado al servidor:

<input type="number" name="age" value="18" />

Si establece un marcador de posición, ese valor aparecerá si el usuario borra el valor del campo de entrada:

<input type="number" name="age" placeholder="Your age" value="18" />

Enviar formulario

lostype="submit"El campo es un botón que, una vez presionado por el usuario, envía el formulario:

<input type="submit">

losvalueatributo establece el texto en el botón, que si falta muestra el texto "Enviar":

<input type="submit" value="Click me">

Validación de formularios

Los navegadores proporcionan la funcionalidad de validación del lado del cliente a los formularios.

Puede configurar los campos según sea necesario, asegurándose de que estén llenos y aplicar un formato específico para la entrada de cada campo.

Veamos ambas opciones.

Establecer campos según sea necesario

losrequiredEl atributo le ayuda con la validación. Si el campo no está configurado, la validación del lado del cliente falla y el navegador no envía el formulario:

<input type="text" name="username" required />

Aplicar un formato específico

Describí eltype="email"campo de arriba. Valida automáticamente la dirección de correo electrónico de acuerdo con un formato establecido en la especificación.

En eltype="number"campo, mencioné elminymaxatributo para limitar los valores introducidos en un intervalo.

Puedes hacer más.

Puede aplicar un formato específico en cualquier campo.

lospatternEl atributo le brinda la posibilidad de establecer una expresión regular para validar el valor.

Recomiendo leer mi Guía de expresiones regulares enflaviocopes.com/javascript-regular-expressions/.

patrón = "https: //.*"

<input type="text" name="username" pattern="[a-zA-Z]{8}" />

Otros campos

Cargas de archivos

Puede cargar archivos desde su computadora local y enviarlos al servidor usando untype="file"elemento de entrada:

<input type="file" name="secret-documents">

Puede adjuntar varios archivos:

<input type="file" name="secret-documents" multiple>

Puede especificar uno o más tipos de archivos permitidos mediante elacceptatributo. Esto acepta imágenes:

<input type="file" name="secret-documents" accept="image/*">

Puede utilizar un tipo MIME específico, comoapplication/jsono establecer una extensión de archivo como.pdf. O configure múltiples extensiones de archivos, como este:

<input type="file" name="secret-documents" accept=".jpg, .jpeg, .png">

Botones

lostype="button"Los campos de entrada se pueden usar para agregar botones adicionales al formulario, que no son botones de envío:

<input type="button" value="Click me">

Se utilizan para hacer algo mediante programación, utilizando JavaScript.

Hay un campo especial representado como un botón, cuya acción especial es borrar todo el formulario y devolver el estado de los campos al inicial:

<input type="reset">

Botones de radio

Los botones de opción se utilizan para crear un conjunto de opciones, de las cuales se presiona una y todas las demás se desactivan.

El nombre proviene de radios de automóviles antiguos que tenían este tipo de interfaz.

Usted define un conjunto detype="radio"entradas, todas con el mismonameatributo, y diferentevalueatributo:

<input type="radio" name="color" value="yellow">
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="blue">

Una vez enviado el formulario, elcolorLa propiedad de datos tendrá un solo valor.

Siempre hay un elemento marcado. El primer elemento es el que está marcado por defecto.

Puede establecer el valor que está preseleccionado utilizando elcheckedatributo. Puede usarlo solo una vez por grupo de entradas de radio.

Casillas de verificación

Similar a las cajas de radio, pero permiten elegir múltiples valores, o ninguno en absoluto.

Usted define un conjunto detype="checkbox"entradas, todas con el mismonameatributo, y diferentevalueatributo:

<input type="checkbox" name="color" value="yellow">
<input type="checkbox" name="color" value="red">
<input type="checkbox" name="color" value="blue">

Todas esas casillas de verificación estarán desmarcadas de forma predeterminada. Utilizar elcheckedatributo para habilitarlos en la carga de la página.

Dado que este campo de entrada permite múltiples valores, al enviar el formulario, los valores se enviarán al servidor como una matriz.

Fecha y hora

Tenemos algunos tipos de entrada para aceptar valores de fecha.

lostype="date"El campo de entrada permite al usuario ingresar una fecha y muestra un selector de fecha si es necesario:

<input type="date" name="birthday">

lostype="time"El campo de entrada permite al usuario ingresar una hora y muestra un selector de hora si es necesario:

<input type="time" name="time-to-pickup">

lostype="month"El campo de entrada permite al usuario ingresar un mes y un año:

<input type="month" name="choose-release-month">

lostype="week"El campo de entrada permite al usuario ingresar una semana y un año:

<input type="week" name="choose-week">

Todos esos campos permiten limitar el rango y el paso entre cada valor. Recomiendo consultar MDN para conocer los pequeños detalles sobre su uso.

lostype="datetime-local"El campo le permite elegir una fecha y una hora.

<input type="datetime-local" name="date-and-time">

Aquí hay una página para probarlos todos:https://codepen.io/flaviocopes/pen/ZdWQPm

Selector de color

Puede permitir que los usuarios elijan un color usando eltype="color"elemento:

<input type="color" name="car-color">

Establece un valor predeterminado utilizando elvalueatributo:

<input type="color" name="car-color" value="#000000">

El navegador se encargará de mostrarle un selector de color al usuario.

Abarcar

Este elemento de entrada muestra un elemento deslizante. Las personas pueden usarlo para pasar de un valor inicial a un valor final:

<input type="range" name="age" min="0" max="100" value="30">

Puede proporcionar un paso opcional:

<input type="range" name="age" min="0" max="100" value="30" step="10">

Teléfono

lostype="tel"El campo de entrada se usa para ingresar un número de teléfono:

<input type="tel" name="telephone-number">

El principal punto de venta para usartelsobretextestá en el móvil, donde el dispositivo puede elegir mostrar un teclado numérico.

Especifique unpatternatributo para validación adicional:

<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number">

URL

lostype="url"El campo se usa para ingresar una URL.

<input type="url" name="website">

Puedes validarlo usando elpatternatributo:

<input type="url" name="website"  pattern="https://.*">

lostextareaetiqueta

lostextareaEl elemento permite a los usuarios ingresar texto de varias líneas. Comparado coninput, requiere una etiqueta final:

<textarea></textarea>

Puede establecer las dimensiones usando CSS, pero también usando elrowsycolsatributos:

<textarea rows="20" cols="10"></textarea>

Al igual que con las otras etiquetas de formulario, elnameatributo determina el nombre en los datos enviados al servidor:

<textarea name="article"></textarea>

losselectetiqueta

Esta etiqueta se utiliza para crear un menú desplegable.

El usuario puede elegir una de las opciones disponibles.

Cada opción se crea utilizando eloptionetiqueta. Agrega un nombre a la selección y un valor a cada opción:

<select name="color">
	<option value="red">Red</option>
	<option value="yellow">Yellow</option>
</select>

Puede configurar una opción deshabilitada:

<select name="color">
	<option value="red" disabled>Red</option>
	<option value="yellow">Yellow</option>
</select>

Puede tener una opción vacía:

<select name="color">
	<option value="">None</option>
	<option value="red">Red</option>
	<option value="yellow">Yellow</option>
</select>

Las opciones se pueden agrupar utilizando eloptgroupetiqueta. Cada grupo de opciones tiene unlabelatributo:

<select name="color">
	<optgroup label="Primary">
		<option value="red">Red</option>
		<option value="yellow">Yellow</option>
		<option value="blue">Blue</option>
	</optgroup>
	<optgroup label="Others">
		<option value="green">Green</option>
		<option value="pink">Pink</option>
	</optgroup>
</select>

Descarga mi gratisManual HTML


Más tutoriales de HTML: