A maioria dos sites e aplicativos inclui um formulário da Web. Sites com pegadinhas, como DoWebsites<form>;
O elemento HTML <form> identifica um ponto de referência do documento contendo
controles interativos para o envio de informações. Aninhados em um <form>, você encontrará todos os recursos interativos (e não interativos)
controles de formulário que o compõem.
O HTML é eficiente. Esta seção se concentra no poder do HTML e aborda o que ele pode fazer sem adicionar JavaScript. O uso de dados de formulário do lado do cliente para atualizar a IU de alguma forma geralmente envolve CSS ou JavaScript, o que não é discutido aqui. Existe um curso completo de Aprender sobre formulários. Não vamos duplicar essa seção aqui, mas vamos apresentar vários controles de formulário e os atributos HTML que os capacitam.
Com os formulários, você pode permitir que os usuários interajam com seu site ou aplicativo, validem as informações inseridas e enviem
os dados para um servidor. Os atributos HTML podem permitir que o usuário selecione controles de formulário ou insira um valor. HTML
atributos podem definir critérios específicos aos quais o valor deve corresponder para ser válido. Quando o usuário tenta enviar o formulário,
todos os valores de controle de formulário passam por validação de restrição do lado do cliente e podem impedir o envio
até que os dados correspondam
aos critérios exigidos. tudo sem JavaScript. Você também pode desativar esse recurso ao definir a novalidate.
no atributo <form> ou, mais frequentemente, formnovalidate em um botão, salvando os dados do formulário para preenchimento posterior.
impede a validação.
Como enviar formulários
Os formulários são enviados quando o usuário ativa um botão de envio aninhado no formulário. Ao usar <input> para botões, a
"value" é o rótulo do botão, e é exibido no botão. Ao usar <button>, o rótulo é o texto entre as tags de abertura
e de fechamento das tags <button>. Há duas maneiras de criar um botão de envio:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Para um formulário muito simples, você precisa de um elemento <form>, com algumas entradas de formulário e um botão de envio. No entanto, não há
mais do que isso.
Os atributos do elemento <form> definem o método HTTP da
que o formulário é enviado e o URL que processa esse envio. Sim, os formulários podem ser enviados, processados e
uma nova página pode ser carregada sem qualquer JavaScript. O elemento <form> é muito eficiente.
action e method do elemento <form>
definem o URL que processa os dados do formulário e o método HTTP usado para enviar os dados, respectivamente.
Por padrão, os dados do formulário são enviados para a página atual. Caso contrário, defina o atributo action como o URL para onde os dados precisam ser enviados.
Os dados enviados são compostos por pares de nome/valor dos vários controles de formulário do formulário. Por padrão, isso inclui todos os formulários
controles aninhados no formulário que têm um name. No entanto, com o atributo form, é possível incluir controles de formulários
fora do <form> e para omitir controles de formulários aninhados em <form>. Compatível com controles de formulários e <fieldset>,
o valor do atributo form assume como valor o id na forma do controle ao qual está associado, não necessariamente a forma com que ele está
está aninhado. Isso significa que os controles de formulários não precisam estar fisicamente aninhados em um <form>.
O atributo method define o protocolo HTTP da solicitação: geralmente GET ou POST. Com GET, os dados do formulário são enviados como uma
string de parâmetro de pares name=value, anexada ao URL de action.
Com POST, os dados são anexados ao corpo da solicitação HTTP. Ao enviar dados seguros, como senhas e cartão de crédito
informações, use sempre POST.
Também há um método DIALOG. Se um <form method="dialog"> estiver em uma <dialog>, o envio do formulário vai fechar a caixa de diálogo.
ocorrer um evento de envio, embora os dados não sejam apagados nem enviados. Mais uma vez, sem JavaScript. Isso é discutido em
seção da caixa de diálogo. Observe que, como isso não envia o formulário, convém
inclua formmethod="dialog" e formnovalidate no botão de envio.
Botões de formulário podem ter mais do que os atributos descritos no início desta seção. Se o botão incluir um formaction,
formenctype, formmethod, formnovalidate ou formtarget, os valores definidos no botão que ativa o formulário
o envio tem precedência sobre action, enctype, method e target
definido em <form>. A validação de restrição ocorre antes do envio do formulário, mas somente se não houver
formnovalidate no botão "Enviar" ativado ou um novalidate no <form>.
Para identificar qual botão foi usado para enviar um formulário, forneça
name. Os botões sem nome ou valor não são enviados com os dados do formulário no envio.
Após o envio do formulário
Quando o usuário envia um formulário on-line preenchido, os nomes e valores dos controles do formulário relevantes são enviados. O nome é o valor do atributo name. Os valores vêm do conteúdo do atributo value ou do valor inserido ou escolhido pelo usuário. O valor de uma <textarea> é o texto interno dela.
O valor de uma <select> é o value da <option> selecionada ou, se a <option> não incluir um atributo value, o valor será o texto interno da opção selecionada.
<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>
Selecionando "Hoover Sukhdeep" (ou não fazer nada, enquanto o navegador exibe e seleciona o primeiro valor de opção por padrão) e, em seguida, ao clicar no botão "Enviar", a página será atualizada, definindo o URL como:
https://web.dev/learn/html/forms?student=hoover
Como a segunda opção não tem um atributo value, o texto interno é enviado como o valor. Seleção de "Liquidação Smooth"
e, ao clicar no botão "Enviar", a página será atualizada, definindo o URL como:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Quando um formulário é enviado, as informações enviadas incluem os nomes e valores de todos os controles de formulário nomeados que têm um name.
exceto caixas de seleção não marcadas, botões de opção não selecionados e os nomes e valores de qualquer botão diferente do que
que enviou o formulário. Para todos os outros controles de formulário, se o controle tiver um nome, mas nenhum valor tiver sido inserido ou definido como padrão, o parâmetro
name do controle de formulário é enviado com um valor vazio.
Existem 22 tipos de entrada, então não podemos abranger todos eles.
No entanto, a inclusão de um valor é opcional e, muitas vezes, uma má ideia quando se quer que o usuário insira informações.
Para elementos <input> em que o usuário não pode editar o valor, sempre inclua um valor, inclusive para entrada
elementos com um tipo de hidden, radio, checkbox, submit, button e reset.
O uso de names exclusivos para controles de formulário simplifica o processamento de dados do lado do servidor e é recomendado, com caixas de seleção e
sendo exceções a essa regra.
Botões de opção
Se você já notou que, ao selecionar um botão de opção em um grupo de botões, apenas um pode ser selecionado em
por vez, isso se deve ao atributo name. Esse efeito é criado ao dar cada botão de opção
em um grupo da mesma name.
Um name precisa ser exclusivo para o grupo: se você acidentalmente usar o mesmo name para dois grupos separados, selecione uma opção
no segundo grupo vai desmarcar qualquer seleção feita no primeiro grupo com o mesmo name.
O name e o value do botão de opção selecionado são enviados com o formulário. Verifique se cada botão de opção tem
um value relevante (e geralmente exclusivo). Os valores dos botões de opção não selecionados não são enviados.
Você pode ter quantos grupos de rádio quiser em uma página, com cada grupo trabalhando de forma independente, desde que cada um tenha um
exclusivo para o grupo name.
Se você quiser carregar a página com um dos botões de opção em um grupo de mesmo nome selecionado, inclua o atributo checked.
Esse botão de opção corresponderá à pseudoclasse CSS :default.
mesmo que o usuário selecione uma opção diferente. O botão de opção selecionado corresponde ao :checked.
pseudoclasse.
Se o usuário precisar escolher um controle de opção em um grupo de botões de opção, adicione o atributo required a pelo menos um
dos controles. Incluir required em um botão de opção em um grupo torna uma seleção obrigatória para o envio do formulário, mas
não precisa ser o rádio com o atributo selecionado para ser válido. Além disso, indique claramente no <legend>
que o controle de formulário é obrigatório. A identificação de grupos de botões de opção junto com cada botão individual é descrita
mais tarde.
Caixas de seleção
É válido que todas as caixas de seleção de um grupo tenham o mesmo name. Apenas as caixas de seleção marcadas têm name e value
enviada com o formulário. Se você tiver várias caixas de seleção marcadas com o mesmo nome, o mesmo nome será enviado com
(esperamos) valores diferentes. Se você tiver vários controles de formulário com o mesmo nome, mesmo que não sejam todas caixas de seleção,
todos eles serão enviados, separados por "e" comercial.
Se você não incluir um value em uma caixa de seleção, o valor das caixas selecionadas será padronizado como on, o que provavelmente não é
prestativos. Se você tiver três caixas de seleção com o nome chk e todas elas estiverem marcadas, o envio do formulário não poderá ser decifrado:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Para tornar uma caixa de seleção obrigatória, adicione o atributo required. Sempre informar ao usuário quando uma caixa de seleção precisar ser marcada ou quando
qualquer controle de formulário é necessário. Adicionar required a uma caixa de seleção apenas torna essa caixa obrigatória. isso não afeta outras
caixas de seleção com o mesmo nome.
Rótulos e conjuntos de campos
Para que os usuários saibam como preencher um formulário, ele precisa estar acessível. Todo controle de formulário precisa ter um rótulo.
Você também quer rotular grupos de controles de formulários. Enquanto as áreas de entrada, seleção e texto individuais são marcadas com <label>,
grupos de controles de formulário são rotulados pelo conteúdo de <legend> de
o <fieldset> que as agrupa.
Nos exemplos anteriores, você pode ter notado que cada controle de formulário, exceto o botão "Enviar", tinha um <label>. Rótulos.
fornecer controles de formulários com nomes acessíveis. O nome acessível dos botões é baseado no conteúdo ou valor. Todos os outros
controles de formulário exigem um <label> associado. Se não houver um marcador associado, o navegador ainda vai renderizar seus controles de formulário,
mas os usuários não saberão
quais informações são esperadas.
Para associar explicitamente um controle de formulário a um <label>, inclua o atributo for na <label>: sendo o valor o
id do controle de formulário ao qual está associado.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Associar rótulos a controles de formulários tem vários benefícios. Para tornar os controles de formulários acessíveis a usuários de leitores de tela, os marcadores fornecendo ao controle um nome acessível. Os rótulos também são "áreas de hit". tornam o site mais utilizável para usuários com problemas de coordenação motora, aumentando a área. Se estiver usando um mouse, clique em qualquer lugar no marcador "Seu nome". Fazer então dá o foco de entrada.
Para fornecer rótulos implícitos, inclua o controle de formulário entre as tags <label> de abertura e fechamento. Isso é igualmente
acessível a partir da perspectiva de um leitor de tela e de um dispositivo apontador, mas não fornece o gancho de estilo como o
rótulo.
<label>Your name
<input type="text" name="name">
</label>
Como os rótulos são "áreas de hit", não inclua elementos interativos em um rótulo explícito ou qualquer outro componente interativo. diferente do controle de formulário rotulado em um rótulo implícito. Por exemplo, se você incluir um link em um marcador, enquanto o navegador processar o HTML, seus usuários ficarão confusos se clicarem no rótulo para entrar em um controle de formulário, mas forem redirecionados para uma nova página.
Geralmente, o <label> vem antes do controle de formulário, exceto no caso de botões de opção e caixas de seleção. Isso não é obrigatório.
É apenas o padrão comum de UX. A série Learn Forms contém informações sobre o design de formulários.
Para grupos de botões de opção e caixas de seleção, o marcador fornece o nome acessível ao controle de formulário ao qual está associado;
mas o grupo de controles e seus rótulos também precisam de um rótulo. Para rotular o grupo, agrupe todos os elementos em um
<fieldset>, com a <legend> fornecendo o rótulo para o 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>
Neste exemplo, os <label>s implícitos identificam um botão de opção, e o <legend> fornece o rótulo para o grupo de botões de opção.
Aninhar um <fieldset> dentro de outro <fieldset> é uma prática padrão. Por exemplo, se um formulário é uma pesquisa com muitas perguntas
dividido em grupos de perguntas relacionadas, o "aluno favorito" <fieldset> pode estar aninhado em outro <fieldset> marcado como
"Seus 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 -->
Esses elementos aparições padrão levaram ao baixo uso deles, mas <legend> e <fieldset> podem ser estilizados com CSS.
Além de todos os atributos globais, <fieldset> também oferece suporte aos atributos name, disabled e form.
Quando você desativa um conjunto de campos, todos os controles de formulário aninhados são desativados. Nem os atributos name nem form têm
muito útil no <fieldset>. O name pode ser usado para acessar o conjunto de campos com JavaScript, mas o próprio conjunto de campos
não está incluído nos dados enviados (os controles de formulário nomeados aninhados são incluídos).
Tipos de entrada e teclado dinâmico
Como observamos antes, há 22 tipos diferentes de entradas.
Em alguns casos, quando um usuário está usando um dispositivo com um teclado dinâmico exibido apenas quando necessário, como um smartphone, a entrada
O tipo usado determina o tipo de teclado exibido. O teclado padrão mostrado pode ser otimizado para o tipo de entrada necessária.
Por exemplo, digite tel para mostrar um teclado otimizado para a inserção de números de telefone. email inclui @ e .; e o
o teclado dinâmico para url inclui dois pontos e o símbolo de barra. Infelizmente, o iPhone ainda não inclui : em
o teclado dinâmico padrão para os tipos de entrada url.
Teclados para <input type="tel"> no iPhone e em dois smartphones Android diferentes:
Teclados para <input type="email"> no iPhone e em dois smartphones Android diferentes:
Como acessar o microfone e a câmera
O tipo de entrada de arquivo <input type="file"> permite fazer o upload de arquivos usando formulários. Os arquivos podem ser de qualquer tipo, definidos e limitados
pelo atributo accept. A lista de tipos de arquivo aceitáveis pode ser uma lista separada por vírgulas de extensões de arquivo, um tipo global,
ou uma combinação de extensões e tipos globais. Por exemplo, accept="video/*, .gif" aceita qualquer arquivo de vídeo ou GIFs animados.
Usar "audio/*" para arquivos de som, "video/*" para arquivos de vídeo e "image/*" para arquivos de imagem.
O atributo enumerado capture, definido no
especificação de captura de mídia, pode ser usada se uma nova mídia
arquivo deve ser criado usando a câmera ou o microfone do usuário. É possível definir o valor como user para os dispositivos de entrada voltados ao usuário.
ou environment para a câmera traseira ou o microfone do smartphone. Geralmente, usar capture sem um valor funciona porque o usuário
vai escolher o dispositivo de entrada que quer usar.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Validação integrada
Mais uma vez, sem incluir JavaScript, o HTML pode impedir o envio de formulários com valores inválidos.
Alguns seletores de CSS correspondem aos controles de formulário com base na presença de atributos HTML, incluindo :required
e :optional se o booleano required
está definido ou não. :default se checked
é codificado; e :enabled ou :disabled,
dependendo se o elemento é interativo e se disabled
está presente. A pseudoclasse :read-write associa elementos com
contenteditable definido e
controles de formulário que são editáveis por padrão, como os tipos de entrada number, password e text (mas não a caixa de seleção,
botões de opção, ou o tipo hidden, entre outros). Se um elemento normalmente gravável tiver o readonly
atributo definido, ele corresponderá a :read-only.
À medida que o usuário insere informações nos controles de formulário, os seletores de IU do CSS, incluindo :valid,
:invalid, :in-range e
O app :out-of-range será ativado e desativado dependendo do estado. Quando o usuário
sai de um controle de formulário, o :user-invalid ainda não totalmente compatível ou
A pseudoclasse :user-valid vai coincidir.
Você pode usar CSS para indicar se os controles de formulário são obrigatórios e válidos à medida que o usuário interage com o formulário. Você pode até usar CSS para impedir que os usuários possam clicar no botão de envio até que o formulário seja válido:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Esse snippet de CSS é um antipadrão. A interface do usuário pode parecer intuitiva e clara, mas muitos usuários tentam enviar um formulário para ativar mensagens de erro. Fazer um botão de envio aparecer desativado dessa forma não permite a validação da restrição. e recursos que muitos usuários usam.
O CSS aplicado é atualizado continuamente com base no estado atual da interface. Por exemplo, quando você inclui tipos de entrada com
restrições, como email, number, url e tipos de data, se o valor não for nulo (não vazio) e o valor
valor não for um e-mail, número, URL, data ou hora válidos, a pseudoclasse :invalid CSS será uma correspondência. Essa constante
atualização é diferente da validação de restrição HTML integrada, que ocorre apenas quando o usuário tenta enviar o formulário.
A validação integrada da restrição é relevante apenas para restrições definidas com atributos HTML. É possível estilizar um elemento com base
nas pseudoclasses :required e :valid/:invalid, o navegador forneceu mensagens de erro originadas de erros com base em
os atributos required, pattern, min, max e até mesmo type são recebidos no envio do formulário.
Quando tentamos enviar o formulário sem escolher o estudante favorito, a validação da restrição impede o envio do formulário.
devido a um erro validityState.valueMissing.
Se qualquer uma das propriedades validityState retornar true, o envio será bloqueado e o navegador exibirá uma mensagem de erro.
no primeiro controle de formulário incorreto, concedendo foco. Quando o usuário ativa o envio de um formulário e há valores inválidos,
o primeiro controle de formulário inválido mostrará uma mensagem de erro e receberá o foco. Se um controle obrigatório não tiver um valor definido, se um
o valor numérico está fora do intervalo ou, se um valor não for do tipo exigido pelo atributo type, o formulário não será validado.
não será enviado, e uma mensagem de erro será exibida.
Se um valor de number, data ou hora estiver abaixo do valor mínimo de min definido ou acima do máximo definido em max, o controle será :out-of-range (e :invalid).
o usuário vai ser informado sobre valididityState.rangeUnderflow,
validityState.rangeOverflow erro quando
tente enviar o formulário. Se o valor estiver fora de sintonia com o
step, seja definido explicitamente ou definindo o padrão como 1, o controle será :out-of-range (e :invalid) e haverá uma
Erro validityState.stepMismatch. O erro aparece como um balão e, por padrão, fornece informações úteis sobre como corrigi-lo.
Há atributos semelhantes para o comprimento dos valores: o minlength
e maxlength alertará o usuário sobre um erro
com o validityState.tooLong ou
validityState.tooShort após o envio.
O maxlength também impede que o usuário insira muitos caracteres.
Usar o atributo maxlength pode atrapalhar a experiência do usuário. Em geral, a experiência do usuário é melhor
inserir um número maior do que o permitido, fornecendo um contador, opcionalmente na forma de um
<output>, que não é enviado com o formulário,
o que permite fazer edições no texto até que a saída mostre que o tamanho máximo permitido não foi excedido. O maxlength
podem ser incluídos no seu HTML. como tudo o que discutimos, ele funciona sem JavaScript. Depois, no carregamento, o valor
o atributo maxlength pode ser usado para criar esse contador de caracteres em JavaScript.
Alguns tipos de entrada parecem ter restrições padrão, mas não têm. Por exemplo, o tipo de entrada tel fornece um valor numérico
teclado telefônico em dispositivos com teclados dinâmicos, mas não restringe valores válidos. Para este e outros tipos de entrada,
há o atributo pattern. Você pode especificar uma expressão regular à qual o valor precisa corresponder para ser considerado válido.
Se um valor for a string vazia e o valor não for obrigatório, isso não vai causar uma validityState.patternMismatch.
erro. Se for obrigatório e estiver vazio, a mensagem de erro padrão de validityState.valueMissing será mostrada ao usuário, em vez
o patternMismatch.
Para e-mails, o validityState.typeMismatch provavelmente é muito
cedendo às suas necessidades. É recomendável incluir pattern
para que endereços de e-mail de intranet sem um TLD não sejam aceitos como válidos.
O atributo default permite fornecer uma expressão regular à qual o valor precisa corresponder. Ao exigir uma correspondência de padrão,
garantem que fique muito claro para o usuário o que é esperado.
Tudo isso pode ser feito sem uma linha sequer de JavaScript, mas sendo uma API HTML, você pode usar JavaScript para incluir mensagens personalizadas durante a validação da restrição. Você também pode usar JavaScript para atualizar quantos caracteres restam, mostrar uma barra de progressão para o nível da senha ou qualquer outra forma de melhorar a conclusão dinamicamente.
Exemplo
Este exemplo tem um formulário em uma <dialog> com um <form> aninhado com três controles de formulário e dois botões de envio, com
rótulos e instruções claros.
O primeiro botão "Enviar" fecha a caixa de diálogo. Use formmethod="dialog" para substituir o método padrão do formulário e feche o
<dialog> sem enviar ou apagar os dados. Você também deve incluir formnovalidate, caso contrário, o navegador
tente validar, verificando se todos os campos obrigatórios têm um valor. O usuário pode fechar a caixa de diálogo e o formulário sem
inserir dados; a validação evitaria isso. Incluir aria-label="close" porque "X" é uma indicação visual conhecida, mas é
não um rótulo descritivo.
Como todos os controles de formulário têm rótulos implícitos, não é necessário incluir os atributos id ou for. Os elementos de entrada
têm o atributo obrigatório, tornando-os obrigatórios. A entrada numérica tem step definido explicitamente para demonstrar como step é
incluída. Como o padrão de step é 1, esse atributo pode ser omitido.
O <select> tem um valor padrão que torna o atributo required desnecessário. Em vez de incluir o atributo value
em cada opção, o valor padrão é o texto interno.
O botão enviar no final define o método do formulário como POST. Ao clicar, a validade de cada valor será verificada. Se todos
os valores são válidos, os dados do formulário serão enviados, a caixa de diálogo será fechada e a página poderá redirecionar o usuário para thankyou.php.
que é o URL da ação. Se faltar algum valor ou se o valor numérico tiver uma incompatibilidade de etapa ou estiver fora do intervalo, uma
a mensagem de erro relevante definida pelo navegador aparecerá, o formulário não será enviado e a caixa de diálogo não fechará.
As mensagens de erro padrão podem ser personalizadas com o validityState.setCustomValidity('message here')
. Se você definir uma mensagem personalizada, ela deverá ser explicitamente definida como a string vazia quando tudo
é válido, ou o formulário não será enviado.
Outras considerações
Há uma seção inteira dedicada a ajudar os usuários a inserir os dados corretos em formulários. Para sempre experiência do usuário, é importante evitar que os usuários cometam erros incluindo instruções e fornecendo dicas conforme necessário. Embora esta seção aborde como o HTML sozinho pode fornecer validação no lado do cliente, a validação deve ser do lado do cliente e lado do servidor. A validação pode ser fornecida de maneiras discretas durante o preenchimento do formulário, como a adição de uma marca de seleção quando o valor estiver correto. Não forneça mensagens de erro antes da conclusão do controle do formulário. Se o usuário comete um erro, informe ao usuário onde o erro está e o que ele cometeu.
Ao criar formulários, é importante considerar que nem todo mundo é como você. Alguém pode ter uma única letra como sobrenome (ou nenhum sobrenome), pode não ter um CEP, pode ter um endereço de três linhas, pode não ter um endereço. Talvez eles estejam visualizando uma versão traduzida do formulário.
Os controles do formulário, os marcadores e as mensagens de erro precisam ser visíveis na tela, precisos e significativos de maneira programática.
determinável e programaticamente associado ao elemento ou grupo apropriado do formulário. O autocomplete
pode e deve ser usado para agilizar o preenchimento de formulários e melhorar a acessibilidade.
O HTML fornece todas as ferramentas para tornar os controles básicos de formulário acessíveis. Quanto mais interativo for um elemento ou processo do formulário, mais atenção precisa ser dada à acessibilidade em relação ao gerenciamento de foco, configuração e atualização de nomes, funções ARIA e valores, quando necessário, e anúncios ARIA ao vivo conforme necessário. No entanto, como aprendemos aqui, só com HTML, é possível longo caminho até sua meta de acessibilidade e validade sem recorrer a ARIA ou JavaScript.
Teste seu conhecimento
Teste seus conhecimentos sobre formulários.
Como os botões de opção podem fazer parte do mesmo grupo?
name.id.Qual elemento HTML é usado para informar ao usuário para que serve este campo de formulário?
<h1><title><label>