La mayoría de los sitios y las aplicaciones incluyen un formulario web. Los sitios de chistes, como DoWebsites<form>.
El elemento HTML <form> identifica un punto de referencia de documento que contiene
controles interactivos para enviar información. Anidados en un <form>, encontrarás todas las funciones interactivas (y no interactivas)
los controles de formulario que lo componen.
HTML es poderoso. Esta sección se centra en el poder de HTML y abarca lo que HTML puede hacer sin agregar JavaScript. El uso de datos de formulario del lado del cliente para actualizar la IU de alguna manera suele implicar CSS o JavaScript, lo que no se analiza aquí. Hay un curso completo de Formularios de aprendizaje. No duplicaremos esta sección aquí, pero presentaremos varios controles de formularios y los atributos HTML que los potencian.
Con los formularios, puedes permitir que los usuarios interactúen con tu sitio web o aplicación, validar la información ingresada y enviar el formulario.
los datos a un servidor. Los atributos HTML pueden permitir que el usuario deba seleccionar controles del formulario o ingresar un valor. HTML
pueden definir criterios específicos con los que el valor debe coincidir para ser válido. Cuando el usuario intente enviar el formulario,
Todos los valores de los controles del formulario deben pasar por la validación de restricciones del cliente y pueden evitar el envío.
hasta que los datos coincidan con los criterios requeridos. todo sin JavaScript. También puedes desactivar esta función si configuras el novalidate.
en el <form> o, con mayor frecuencia, formnovalidate en un botón, y se guardan los datos del formulario para completarlos más tarde.
impide la validación.
Cómo enviar formularios
Los formularios se envían cuando el usuario activa un botón de envío anidado en él. Cuando usas <input> para los botones, la
'valor' [value] es la etiqueta del botón y se muestra en el botón. Cuando se usa <button>, la etiqueta es el texto que se encuentra entre la apertura
y cerrar <button> etiquetas. Un botón de envío se puede escribir de dos maneras:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Para un formulario muy simple, necesitas un elemento <form>, con algunas entradas del formulario adentro y un botón de envío. Sin embargo, hay
más que eso al enviar un formulario.
Los atributos del elemento <form> establecen el método HTTP mediante
la dirección a la que se envía el formulario y la URL que procesa el envío del formulario. Sí, los formularios se pueden enviar, procesar y
se puede cargar una nueva página sin JavaScript. El elemento <form> es muy potente.
action y method del elemento <form>
Estos atributos definen la URL que procesa los datos del formulario y el método HTTP utilizado para enviar los datos, respectivamente.
De forma predeterminada, los datos del formulario se envían a la página actual. De lo contrario, configura el atributo action con la URL a la que se deben enviar los datos.
Los datos enviados se componen de pares nombre/valor de los diversos controles de formularios del formulario. De forma predeterminada, esto incluye todos los datos
controles anidados dentro del formulario que tienen un name. Sin embargo, con el atributo form, es posible incluir controles de formularios.
fuera de <form> y omitir los controles de formularios anidados dentro de <form>. Es compatible con los controles de formulario y <fieldset>,
El atributo form toma como su valor el id de la forma del control con el que está asociado, no necesariamente la forma con la que está asociado.
está anidada. Esto significa que los controles de formularios no necesitan estar anidados físicamente en una <form>.
El atributo method define el protocolo HTTP de la solicitud: por lo general, GET o POST. Con GET, los datos del formulario se envían como un
string de parámetros de pares name=value, anexada a la URL de action.
Con POST, los datos se agregan al cuerpo de la solicitud HTTP. Cuando envíes datos seguros, como contraseñas y tarjetas de crédito
información, siempre usa POST.
También existe un método DIALOG. Si un <form method="dialog"> está dentro de una <dialog>, el envío del formulario cerrará el diálogo.
hay un evento de envío, aunque los datos no se borran ni se envían. De nuevo, sin JavaScript. Esto se analiza en
la sección de diálogo. Ten en cuenta que, como no envías el formulario, probablemente te convenga
Incluye formmethod="dialog" y formnovalidate en el botón Enviar.
Los botones del formulario pueden tener más de los atributos descritos al comienzo de esta sección. Si el botón incluye un formaction,
Los atributos formenctype, formmethod, formnovalidate o formtarget, que son los valores establecidos en el botón que activa el formulario
envío tienen prioridad sobre action, enctype, method y target
establecer en el <form>. La validación de restricciones ocurre antes del envío del formulario, pero solo si no hay
formnovalidate en el botón de envío activado ni novalidate en <form>.
Para saber qué botón se usó para enviar un formulario, otorga
el botón name. Los botones sin nombre o valor no se envían con los datos del formulario cuando se envía el formulario.
Después de enviar el formulario
Cuando el usuario envía un formulario en línea completado, se envían los nombres y valores de los controles correspondientes. El nombre es el valor del atributo name. Los valores provienen del contenido del atributo value o del valor ingresado o seleccionado por el usuario. El valor de un <textarea> es su texto interno.
El valor de un <select> es el value de la <option> seleccionada o, si la <option> no incluye un atributo value, el valor es el texto interno de la opción seleccionada.
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
Seleccionando "Hoover Sukhdeep" (o no hacer nada, mientras el navegador muestra y, por lo tanto, selecciona el primer valor de la opción de forma predeterminada) Luego, haz clic en el botón Enviar para volver a cargar esta página y se configurará la URL como:
https://web.dev/learn/html/forms?student=hoover
Como la segunda opción no tiene un atributo value, el texto interno se envía como el valor. Seleccionando "Smoothan Smooth"
y, si haces clic en el botón Enviar, se volverá a cargar la página y se configurará la URL de la siguiente manera:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Cuando se envía un formulario, la información enviada incluye los nombres y valores de todos los controles de formularios con nombre que tienen un name
excepto las casillas de verificación no seleccionadas, los botones de selección no seleccionados y los nombres y valores de cualquier botón distinto del que
envió el formulario. Para todos los demás controles de formularios, si el control de formulario tiene nombre, pero no se ingresó ningún valor ni se estableció de forma predeterminada,
name del control de formulario se envía con un valor vacío.
Hay 22 tipos de entrada, por lo que no podemos abarcarlos todos.
Ten en cuenta que incluir un valor es opcional y, a menudo, no es una buena idea cuando deseas que el usuario ingrese información.
Para los elementos <input> en los que el usuario no puede editar el valor, siempre debes incluir un valor, incluso para la entrada
elementos con un tipo de hidden, radio, checkbox, submit, button y reset.
El uso de name únicos para los controles de formularios facilita el procesamiento de datos del servidor y se recomienda, ya que incluye casillas de verificación y
son excepciones a esta regla.
Botones de selección
Si alguna vez has notado que cuando seleccionas un botón de selección dentro de un grupo de botones de selección, solo uno se puede seleccionar al
una vez, esto se debe al atributo name. Para crear este efecto que se puede seleccionar, cada botón de selección
de un grupo el mismo name.
Un name debe ser único para el grupo. Si accidentalmente usas el mismo name para dos grupos separados, selecciona una radio.
del segundo grupo anulará la selección de cualquier selección realizada en el primer grupo con el mismo name.
Los elementos name y value del botón de selección que se seleccionó se envían junto con el formulario. Asegúrate de que cada botón de selección tenga
un objeto value relevante (y, por lo general, único) Los valores de los botones de selección no seleccionados no se envían.
Puedes tener tantos grupos de botones de selección en una página como desees, y cada grupo trabajará independientemente, siempre que cada uno tenga un
name únicas para el grupo.
Si quieres cargar la página con uno de los botones de selección en un grupo con el mismo nombre, incluye el atributo checked.
Este botón de selección coincidirá con la seudoclase :default de CSS.
incluso si el usuario
selecciona una radio diferente. El botón de selección que está seleccionado actualmente coincide con el elemento :checked
seudoclase.
Si el usuario debe elegir un control de selección de un grupo de botones de selección, agrega el atributo required a, al menos, uno.
de los controles. Si incluyes required en un botón de selección en un grupo, se requerirá una selección para el envío de formularios, pero
no tiene que ser la radio con el atributo que se selecciona como válido. Además, indícalo claramente en el <legend>
que el control de formulario es obligatorio. Se describe el etiquetado de grupos de botones de selección junto con cada botón individual.
más adelante.
Casillas de verificación
Es válido para que todas las casillas de verificación de un grupo tengan el mismo name. Solo las casillas de verificación seleccionadas tienen sus respectivos valores de name y value.
enviados con el formulario. Si tienes varias casillas de verificación con el mismo nombre seleccionado, se enviará el mismo nombre con
(con suerte) diferentes valores. Si tiene varios controles de formulario con el mismo nombre, incluso si no son todas las casillas de verificación
se envían todos separados por signos et.
Si no incluyes un value en una casilla de verificación, el valor predeterminado de las casillas seleccionadas será on, que probablemente no sea el único.
útil. Si tienes tres casillas de verificación denominadas chk y están todas marcadas, no se podrá descifrar el envío del formulario:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Para que la casilla de verificación sea obligatoria, agrega el atributo required. Informa siempre al usuario cuándo se debe marcar una casilla de verificación
se requiere cualquier control de formulario. Agregar required a una casilla de verificación solo hace que esa casilla de verificación sea obligatoria. no afecta a otras
casillas de verificación con el mismo nombre.
Etiquetas y conjuntos de campos
Para que los usuarios sepan cómo completar un formulario, este debe ser accesible. Cada control de formulario debe tener una etiqueta.
También quieres etiquetar grupos de controles de formularios. Mientras que las áreas de entrada, selección y texto individuales están etiquetadas con <label>,
grupos de controles de formulario están etiquetados según el contenido de <legend> de
la <fieldset> que las agrupa.
En los ejemplos anteriores, es posible que hayas notado que cada control de formulario, excepto el botón de envío, tenía una <label>. Etiquetas
proporcionar controles de formularios con nombres de accesibilidad. Los botones obtienen su nombre accesible de su contenido o valor. Todos los demás
los controles de formulario requieren una <label> asociada. Si no hay una etiqueta asociada, el navegador seguirá procesando los controles del formulario,
pero los usuarios no sabrán
qué información se espera.
Para asociar de forma explícita un control de formulario con un <label>, incluye el atributo for en el <label>: el valor es el
id del control de formulario con el que está asociado.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Asociar etiquetas con controles de formularios tiene varios beneficios. Las etiquetas permiten que los usuarios de lectores de pantalla accedan a los controles de los formularios lo que le proporciona un nombre accesible. Las etiquetas también son “áreas de impacto”. hacen que el sitio sea más utilizable para los usuarios con problemas de destreza aumentando el área. Si usas un mouse, intenta hacer clic en cualquier parte de la etiqueta "Tu nombre". Hacer la entrada se enfoca.
Para proporcionar etiquetas implícitas, incluye el control de formulario entre las etiquetas <label> de apertura y cierre. Esto equivale a
accesible desde la perspectiva de un dispositivo apuntador y de un lector de pantalla, pero no brinda un contenido atractivo como el explícito
etiqueta.
<label>Your name
<input type="text" name="name">
</label>
Como las etiquetas son “áreas de impacto”, no incluyas elementos interactivos dentro de una etiqueta explícita ni ningún otro componente interactivo. diferente del control de formulario etiquetado en una etiqueta implícita. Por ejemplo, si incluyes un vínculo en una etiqueta, mientras el navegador el código HTML, los usuarios se confundirán si hacen clic en la etiqueta para ingresar a un control de formulario, pero se los redirecciona a una nueva página.
Por lo general, <label> aparece antes del control de formulario, excepto en el caso de los botones de selección y las casillas de verificación. Esto no es obligatorio.
Es solo el patrón común de UX. La serie de Formularios de aprendizaje contiene información sobre el diseño de formularios.
Para los grupos de botones de selección y casillas de verificación, la etiqueta proporciona el nombre accesible del control de formulario al que está asociada;
pero el grupo de controles y sus etiquetas también necesitan una etiqueta. Para etiquetar el grupo, agrupa todos los elementos en una
<fieldset>, donde <legend> proporciona la etiqueta del grupo.
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
En este ejemplo, las <label> implícitas cada etiqueta es un botón de selección y <legend> proporciona la etiqueta para el grupo de botones de selección.
Anidar una <fieldset> dentro de otra <fieldset> es una práctica estándar. Por ejemplo, si un formulario es una encuesta de muchas preguntas
dividida en grupos de preguntas relacionadas, el «estudiante favorito» <fieldset> puede estar anidado en otro <fieldset> etiquetado como
“Tus favoritos”:
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
La función de estos elementos las apariencias predeterminadas dieron lugar a su uso infrautilizado, pero <legend> y <fieldset> se pueden diseñar con CSS.
Además de todos los atributos globales, <fieldset> también admite los atributos name, disabled y form.
Cuando inhabilitas un conjunto de campos, se inhabilitan todos los controles de formularios anidados. Ni los atributos name ni form tienen
muy útil en <fieldset>. Se puede usar name para acceder al conjunto de campos con JavaScript, pero este
No está incluido en los datos enviados (se incluyen los controles de formularios con nombre anidados).
Tipos de entrada y teclado dinámico
Como se mencionó antes, hay 22 tipos diferentes de entradas.
En algunos casos, cuando un usuario utiliza un dispositivo con un teclado dinámico que muestra solo la información necesaria, como un teléfono, la entrada
type usada determina el tipo de teclado que se muestra. El teclado predeterminado que se muestra se puede optimizar para el tipo de entrada requerido.
Por ejemplo, al escribir tel, se mostrará un teclado optimizado para ingresar números de teléfono. email incluye @ y .. y las
El teclado dinámico de url incluye dos puntos y el símbolo de barra diagonal. Lamentablemente, el iPhone sigue sin incluir : en
el teclado dinámico predeterminado para los tipos de entrada url.
Teclados para <input type="tel"> en iPhone y dos teléfonos Android diferentes:
Teclados para <input type="email"> en iPhone y dos teléfonos Android diferentes:
Cómo acceder al micrófono y a la cámara
El tipo de entrada de archivo <input type="file"> permite subir archivos a través de formularios. Los archivos pueden ser de cualquier tipo, definidos y limitados
por el atributo accept La lista de los tipos de archivo aceptables puede ser una lista separada por comas de extensiones de archivo, un tipo global,
o una combinación de tipos
y extensiones globales. Por ejemplo, accept="video/*, .gif" acepta cualquier archivo de video o GIF animado.
Usar "audio/*" para archivos de sonido, "video/*" para archivos de video y "image/*" para archivos de imagen.
El atributo capture enumerado, definido en el
especificación de captura de contenido multimedia (se puede usar si se trata de un nuevo contenido multimedia)
se debe crear con la cámara o el micrófono del usuario. Puedes establecer el valor en user para los dispositivos de entrada para el usuario.
o environment para el micrófono o la cámara posterior del teléfono. Por lo general, el uso de capture, sin un valor, funciona porque el usuario
elegirá qué dispositivo de entrada quiere usar.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Validación integrada
Recuerda que sin incluir JavaScript, el código HTML puede impedir que se envíen formularios con valores no válidos.
Hay algunos selectores CSS que coinciden con los controles de formularios en función de la presencia de atributos HTML, como :required
y :optional si el valor booleano required
está configurada o no; :default si checked
está hard-coded; y :enabled o :disabled
dependiendo de si el elemento es interactivo y si la disabled
está presente. La pseudoclase :read-write hace coincidir los elementos con
contenteditable establece y
controles de formulario que se pueden editar de forma predeterminada, como los tipos de entrada number, password y text (pero no con casillas de verificación,
botones de selección o el tipo hidden, entre otros). Si un elemento que normalmente se puede escribir tiene el elemento readonly
de atributos establecido, coincidirá con :read-only en su lugar.
A medida que el usuario ingresa información en los controles del formulario, los selectores de la IU de CSS, incluido :valid,
:invalid, :in-range y
:out-of-range se activará y desactivará según el estado. Cuando el usuario
sale de un control de formulario, ya sea el :user-invalid aún no compatible o
La seudoclase :user-valid coincidirá.
Puedes usar CSS para proporcionar indicaciones sobre si los controles de los formularios son obligatorios y válidos cuando el usuario interactúa con él. Incluso puedes usar CSS para evitar que los usuarios hagan clic en el botón Enviar hasta que el formulario sea válido:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Este fragmento de CSS es un antipatrón. Si bien la IU puede parecer intuitiva y clara, muchos usuarios intentan enviar un formulario a habilitar los mensajes de error. Hacer que un botón de envío aparezca inhabilitado de esta manera no permite la validación de restricciones, una función en la que confían muchos usuarios.
El CSS aplicado se actualiza continuamente en función del estado actual de la IU. Por ejemplo, si incluyes tipos de entrada con
restricciones, como email, number, url y tipos de fecha, si el valor no es nulo (no está vacío) y el valor actual
no es un correo electrónico, un número, una URL, una hora o una fecha válidos, la pseudoclase :invalid de CSS coincidirá. Esta constante
la actualización es diferente de la validación integrada de restricciones HTML, que solo ocurre cuando el usuario intenta enviar el formulario.
La validación de restricciones integrada solo es relevante para las restricciones establecidas con atributos HTML. Si bien puedes aplicar diseño a un elemento
en las pseudoclases :required y :valid/:invalid, el navegador proporcionó mensajes de error derivados de errores basados en
los atributos required, pattern, min, max y hasta type vienen cuando se envían formularios.
Cuando intentamos enviar el formulario sin seleccionar al estudiante favorito requerido, la validación de restricciones impide el envío del formulario
debido a un error validityState.valueMissing.
Si alguna de las propiedades de validityState muestra true, se bloquea el envío y el navegador muestra un mensaje de error.
en el primer control de formato incorrecto, lo que le da el foco. Cuando el usuario activa el envío de un formulario y hay valores no válidos,
El primer control de formulario no válido mostrará un mensaje de error y recibirá el foco. Si un control obligatorio no tiene un valor establecido, si un
El valor numérico está fuera del rango o, si un valor no es del tipo requerido por el atributo type, no se validará el formulario.
no se enviará y aparecerá un mensaje de error.
Si el valor de number, hora o fecha es inferior al mínimo de min establecido o superior al valor máximo de max establecido, el control será :out-of-range (y :invalid).
se le informará al usuario sobre valididityState.rangeUnderflow,
validityState.rangeOverflow cuando
intenta enviar el formulario. Si el valor está desfasado con el
step, ya sea establecido explícitamente o establecido de forma predeterminada en 1, el control será :out-of-range (y :invalid), y habrá una
Error validityState.stepMismatch. El error aparece como un cuadro y, de forma predeterminada, proporciona información útil para corregirlo.
Hay atributos similares para la longitud de los valores: minlength.
y los atributos maxlength alertarán al usuario sobre un error
con el validityState.tooLong o
validityState.tooShort después del envío.
maxlength también evita que el usuario ingrese demasiados caracteres.
El uso del atributo maxlength puede perjudicar la experiencia del usuario. En general, es una mejor experiencia para permitir que el usuario
para ingresar una longitud de caracteres superior a la permitida y proporcionar un contador, opcionalmente en forma de
<output>, que no se envía con el formulario,
lo que les permite editar el texto hasta que el resultado muestre que no se superó la longitud máxima permitida. El maxlength
se pueden incluir en tu código HTML. como todo lo que dijimos, funciona sin JavaScript. Luego, durante la carga, el valor de
el atributo maxlength se puede utilizar para crear este contador de caracteres en JavaScript.
Algunos tipos de entrada parecen tener restricciones predeterminadas, pero no las tienen. Por ejemplo, el tipo de entrada tel proporciona una entrada numérica
teclado telefónico en dispositivos con teclados dinámicos, pero no restringe valores válidos. Para este y otros tipos de entrada,
está el atributo pattern. Puedes especificar una expresión regular con la que debe coincidir el valor para que se considere válida.
Si un valor es una cadena vacía y no es obligatorio, no se generará una validityState.patternMismatch
. Si se requiere y está vacío, se mostrará al usuario el mensaje de error predeterminado para validityState.valueMissing, en lugar de
patternMismatch
Para los correos electrónicos, es probable que validityState.typeMismatch sea también
tolerante a tus necesidades. Es probable que quieras incluir pattern.
para que las direcciones de correo electrónico de intranet sin un TLD no se acepten como válidas.
El atributo patrón permite proporcionar una expresión regular con la que el valor debe coincidir. Cuando se requiere una coincidencia de patrones,
lo que se espera de que el usuario lo tenga claro.
Todo esto se puede hacer sin una sola línea de JavaScript, pero como se trata de una API HTML, puedes utilizar JavaScript para incluir mensajes personalizados durante la validación de restricciones. También puedes usar JavaScript para actualizar cuántos caracteres quedan, una barra de progreso para la seguridad de la contraseña o cualquier otra manera de mejorar la finalización de forma dinámica
Ejemplo
Este ejemplo tiene un formulario dentro de una <dialog> con un <form> anidado con tres controles de formulario y dos botones de envío, con
instrucciones y etiquetas claras.
El primer botón de envío cierra el diálogo. Usa formmethod="dialog" para anular el método predeterminado del formulario y cierra la
<dialog> sin enviar ni borrar los datos. También debes incluir formnovalidate; de lo contrario, el navegador
intenta validar que todos los campos obligatorios tengan un valor. El usuario podría querer cerrar el diálogo y el formulario sin
ingresar datos; la validación de contenido evitaría esto. Incluir aria-label="close" porque "X" es una señal visual conocida, pero es
no una etiqueta descriptiva.
Todos los controles de formulario tienen etiquetas implícitas, por lo que no es necesario incluir los atributos id ni for. Los elementos de entrada
tienen el atributo requerido que los hace obligatorios. La entrada numérica tiene step establecido explícitamente para demostrar cómo step es
incluidos. Como el valor predeterminado de step es 1, se puede omitir este atributo.
<select> tiene un valor predeterminado, por lo que el atributo required no es necesario. En lugar de incluir el atributo value
de cada opción, el valor predeterminado es el texto interno.
El botón Enviar al final establece el método de los formularios en POST. Cuando haces clic en esta opción, se verificará la validez de cada valor. Si todas
son válidos, se enviarán los datos del formulario, se cerrará el diálogo y es posible que la página redireccione a thankyou.php,
que es la URL de la acción. Si falta algún valor o si el valor numérico no coincide con los pasos o está fuera del rango, se mostrará una
aparecerá un mensaje de error relevante definido por el navegador, no se enviará el formulario y no se cerrará el cuadro de diálogo.
Los mensajes de error predeterminados se pueden personalizar con el validityState.setCustomValidity('message here').
. Ten en cuenta que si configuras un mensaje personalizado, el mensaje debe establecerse explícitamente en la cadena vacía cuando todo
es válido o no se enviará el formulario.
Otras consideraciones
Hay una sección completa dedicada a ayudar a los usuarios a ingresar los datos correctos en formularios. Para siempre experiencia del usuario, es importante evitar que los usuarios cometan errores incluyendo instrucciones y proporcionando sugerencias según sea necesario. Si bien en esta sección se aborda cómo HTML por sí solo puede proporcionar validación del cliente, la validación debe ser tanto del cliente como del servidor. La validación se puede ofrecer de maneras discretas durante el envío del formulario, por ejemplo, agregando un marca de verificación cuando el valor sea correcto. No obstante, no proporciones mensajes de error antes de que el control del formulario esté completo. Si el usuario comete un error, informa al usuario dónde está el error y qué se equivocó.
Cuando diseñas formularios, es importante que tengas en cuenta que no todos son como tú. Alguien Puede que tenga una sola letra como apellido (o no tenga ningún apellido), que no tenga un código postal o que tenga una dirección de tres líneas. no tenga una dirección. Es posible que esté viendo una versión traducida de tu formulario.
Los controles de formulario, sus etiquetas y los mensajes de error deben ser visibles en la pantalla, y ser precisos y significativos, de manera programática.
determinables y se asocien de manera programática con el elemento o grupo del formulario correspondiente. La autocomplete
pueden y deben usarse para completar más rápido los formularios y mejorar la accesibilidad.
HTML brinda todas las herramientas para que los controles básicos de formulario sean accesibles. Cuanto más interactivo sea un elemento o proceso del formulario, se deberá prestar más atención a la accesibilidad con respecto a la administración del enfoque, el establecimiento y la actualización de los nombres, roles y roles de los ARIA y valores, cuando sea necesario, y anuncios de ARIA en vivo, según sea necesario. Pero, como hemos aprendido aquí, solo con HTML, puedes obtener una mucho camino hacia tu objetivo de accesibilidad y validez sin recurrir a ARIA o JavaScript.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre formularios.
¿Cómo haces que los botones de selección formen parte del mismo grupo?
name.id.¿Qué elemento HTML se usa para indicarle al usuario para qué sirve este campo de formulario?
<h1><title><label>