Descubra cómo utilizar formularios en HTML y todas las etiquetas de elementos de formulario
Los formularios son la forma en que puedes interactuar con una página o una aplicación creada con tecnologías web.
Tienes un conjunto de controles y cuando envías 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 vuelva a cargar después de enviarlos, pero usando JavaScript puedes alterar este comportamiento (no voy a explicar cómo en este libro).
Se crea un formulario utilizando la form
etiqueta:
form.../form
De forma predeterminada, los formularios se envían mediante el método HTTP GET, que tiene sus inconvenientes y, por lo general, conviene utilizar POST.
Puede configurar el formulario para que utilice POST cuando se envíe utilizando el method
atributo:
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 la https://flaviocopes.com/contacts
página, al presionar el botón “enviar” se realizará una solicitud a esa misma URL.
Lo cual podría provocar que no ocurra nada.
Necesita algo del lado del servidor para manejar la solicitud y, normalmente, “escucha” esos eventos de envío de formulario en una URL dedicada.
Puede especificar la URL a través del action
parámetro:
form action="/new-contact" method="POST".../form
Esto hará que el navegador envíe los datos del formulario mediante POST a la /new-contact
URL en el mismo origen.
Si el origen (protocolo + dominio + puerto) es https://flaviocopes.com
(el puerto 80 es el predeterminado), esto significa que los datos del formulario se enviarán a https://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 multilineal)
- cuadros de selección (elija una opción de un menú desplegable)
- Botones de opción (elige una opción de una lista siempre visible)
- casillas de verificación (elija cero, una o más opciones)
- carga de archivos
- ¡y mucho más!
Presentaremos cada uno de ellos en la siguiente descripción general de los campos del formulario.
La inputetiqueta
El input
campo es uno de los elementos de formulario más utilizados. También es un elemento muy versátil y puede cambiar completamente su comportamiento en función del type
atributo.
El comportamiento predeterminado es ser un control de entrada de texto de una sola línea:
input /
Equivalente a utilizar:
input type="text" /
Al igual que con todos los demás campos que siguen, es necesario darle un nombre al campo para que su contenido se envíe al servidor cuando se envíe el formulario:
input type="text" name="username" /
El placeholder
atributo se utiliza para que aparezca un texto, en gris claro, cuando el campo está vacío. Resulta útil para agregar una pista al usuario sobre lo que debe escribir:
input type="text" name="username" placeholder="Your username" /
Correo electrónico
El uso type="email"
validará en el lado del cliente (en el navegador) un correo electrónico para verificar su exactitud (corrección semántica, no para garantizar que la dirección de correo electrónico existe) antes de enviarlo.
input type="email" name="email" placeholder="Your email" /
Contraseña
El uso type="password"
hará que cada tecla 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" /
El step
atributo ayuda a identificar los pasos entre distintos valores. Por ejemplo, acepta un valor entre 10 y 50, en pasos de 5:
input type="number" name="a-number" min="10" max="50" step="5" /
Campo oculto
Los campos se pueden ocultar al usuario, pero se envían 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, utilizado para seguridad e identificación de usuarios, o incluso para detectar robots que envían spam, utilizando técnicas especiales.
También se puede utilizar simplemente para identificar una forma y su acción.
Establecer un valor predeterminado
Todos estos campos aceptan un valor predefinido. Si el usuario no lo modifica, este será el valor que se enviará 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
El type="submit"
campo es un botón que, una vez presionado por el usuario, envía el formulario:
input type="submit"
El value
atributo establece el texto del botón, que si falta muestra el texto “Enviar”:
input type="submit" value="Click me"
Validación de formulario
Los navegadores proporcionan funcionalidad de validación del lado del cliente a los formularios.
Puede establecer campos como obligatorios, garantizar que se completen y aplicar un formato específico para la entrada de cada campo.
Veamos ambas opciones.
Establezca los campos como obligatorios
El required
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 /
Imponer un formato específico
Describí el type="email"
campo anteriormente. Valida automáticamente la dirección de correo electrónico según un formato establecido en la específica.
En el type="number"
campo, mencioné el atributo min
y max
para limitar los valores ingresados a un intervalo.
Puedes hacer más
Puede aplicar un formato específico en cualquier campo.
El pattern
atributo le brinda la posibilidad de establecer una expresión regular para validar el valor.
Te recomiendo leer mi Guía de expresiones regulares en flaviocopes.com/javascript-regular-expressions/.
patrón=“ https://.* “
input type="text" name="username" pattern="[a-zA-Z]{8}" /
Otros campos
Subidas de archivos
Puede cargar archivos desde su computadora local y enviarlos al servidor mediante un type="file"
elemento de entrada: Todo sobre Apple, Mac e Iphone
input type="file" name="secret-documents"
Puedes adjuntar varios archivos:
input type="file" name="secret-documents" multiple
Puede especificar uno o más tipos de archivos permitidos mediante el accept
atributo. Esto acepta imágenes:
input type="file" name="secret-documents" accept="image/*"
Puedes usar un tipo MIME específico, como .mtl application/json
o configurar una extensión de archivo como .pdf
.mtl o configurar múltiples extensiones de archivo, como esto:
input type="file" name="secret-documents" accept=".jpg, .jpeg, .png"
Botones
Los type="button"
campos de entrada se pueden utilizar para agregar botones adicionales al formulario, que no sean botones de envío:
input type="button" value="Click me"
Se utilizan para hacer algo programáticamente, 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 una se presiona y todas las demás se deshabilitan.
El nombre proviene de las antiguas radios de coche que tenían este tipo de interfaz.
Define un conjunto de type="radio"
entradas, todas con el mismo name
atributo y value
atributos diferentes:
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, la color
propiedad de datos tendrá un único valor.
Siempre hay un elemento seleccionado. El primer elemento es el seleccionado de forma predeterminada.
Puedes configurar el valor preseleccionado mediante el checked
atributo. Puedes usarlo solo una vez por grupo de entradas de radio.
Casillas de verificación
Similares a los cuadros de radio, pero permiten elegir múltiples valores o ninguno.
Define un conjunto de type="checkbox"
entradas, todas con el mismo name
atributo y value
atributos diferentes:
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. Utilice el checked
atributo para habilitarlas al cargar 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.
El type="date"
campo de entrada permite al usuario ingresar una fecha y muestra un selector de fecha si es necesario:
input type="date" name="birthday"
El type="time"
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"
El type="month"
campo de entrada permite al usuario ingresar un mes y un año:
input type="month" name="choose-release-month"
El type="week"
campo de entrada permite al usuario ingresar una semana y un año:
input type="week" name="choose-week"
Todos estos campos permiten limitar el rango y el paso entre cada valor. Recomiendo consultar MDN para conocer los detalles de su uso.
El type="datetime-local"
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 utilizando el type="color"
elemento:
input type="color" name="car-color"
Establezca un valor predeterminado utilizando el value
atributo:
input type="color" name="car-color" value="#000000"
El navegador se encargará de mostrar un selector de color al usuario.
Rango
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
El type="tel"
campo de entrada se utiliza para introducir un número de teléfono:
input type="tel" name="telephone-number"
El principal atractivo para usar tel
Over text
es que en el dispositivo se puede elegir mostrar un teclado numérico.
Especifique un pattern
atributo para validación adicional:
input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="telephone-number"
URL
El type="url"
campo se utiliza para ingresar una URL.
input type="url" name="website"
Puedes validarlo usando el pattern
atributo:
input type="url" name="website" pattern="https://.*"
La textareaetiqueta
El textarea
elemento permite a los usuarios introducir texto de varias líneas. A diferencia de input
, requiere una etiqueta de cierre:
textarea/textarea
Puedes configurar las dimensiones usando CSS, pero también usando los atributos rows
y cols
:
textarea rows="20" cols="10"/textarea
Al igual que con las demás etiquetas de formulario, el name
atributo determina el nombre en los datos enviados al servidor:
textarea name="article"/textarea
La selectetiqueta
Esta etiqueta se utiliza para crear un menú desplegable.
El usuario puede elegir una de las opciones disponibles.
Cada opción se crea mediante la option
etiqueta. Se le agrega un nombre a la selección y un valor a cada opción:
select name="color"option value="red"Red/optionoption value="yellow"Yellow/option/select
Puedes configurar una opción como deshabilitada:
select name="color"option value="red" disabledRed/optionoption value="yellow"Yellow/option/select
Puedes tener una opción vacía:
select name="color"option value=""None/optionoption value="red"Red/optionoption value="yellow"Yellow/option/select
Las opciones se pueden agrupar mediante la optgroup
etiqueta. Cada grupo de opciones tiene un label
atributo:
select name="color"optgroup label="Primary"option value="red"Red/optionoption value="yellow"Yellow/optionoption value="blue"Blue/option/optgroupoptgroup label="Others"option value="green"Green/optionoption value="pink"Pink/option/optgroup/select
Tips de HTML
Tal vez te puede interesar:
- La etiqueta HTML `iframe`
- Cómo cargar una imagen en un lienzo HTML
- Cómo utilizar insertAdjacentHTML
- Cómo cambiar la URL de una imagen HTML en modo oscuro
Formularios HTML
La inputetiquetaEnviar formularioValidación de formularioOtros camposLa textareaetiquetaLa selectetiqueta
programar
es
https://aprendeprogramando.es/static/images/programar-formularios-html-2100-0.jpg
2024-11-02
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente