A maioria dos sites e aplicativos inclui um formulário da Web. Sites de piadas, como DoWebsites<form>.
O elemento HTML <form> identifica um ponto de referência de documento que contém
controles interativos para o envio de informações. Aninhado em um <form>, você encontra todos os controles de forma interativos (e não interativos)
que compõem o formulário.
O HTML é poderoso. Esta seção foca no poder do HTML, abordando o que ele pode fazer sem adicionar JavaScript. O uso de dados de formulário do lado do cliente para atualizar a IU geralmente envolve CSS ou JavaScript, o que não é discutido aqui. Há um curso completo sobre Aprender sobre formulários. Não vamos duplicar essa seção, mas vamos apresentar vários controles de formulário e os atributos HTML que os capacitam.
Com os formulários, os usuários podem interagir com seu site ou aplicativo, validar as informações inseridas e enviar os dados a um servidor. Os atributos HTML podem permitir que o usuário selecione controles de formulário ou insira um valor. Os atributos HTML podem definir critérios específicos que o valor precisa corresponder para ser válido. Quando o usuário tenta enviar o formulário,
todos os valores de controle passam pela validação de restrição do lado do cliente e podem impedir o envio
até que os dados correspondam aos critérios obrigatórios. Tudo isso sem JavaScript. Também é possível desativar esse recurso: definir o atributo novalidate
no <form> ou, mais frequentemente, formnovalidate em um botão, salvar 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 dentro do formulário. Ao usar <input> para botões, o
"value" é o rótulo do botão e é exibido nele. Ao usar <button>, o rótulo é o texto entre as tags <button> de abertura
e fechamento. Um botão de envio pode ser criado de duas maneiras:
<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, enviar um formulário
tem muito mais do que isso.
Os atributos do elemento <form> definem o método HTTP pelo qual o formulário é enviado e o URL que processa o envio do formulário. Sim, formulários podem ser enviados e processados, e uma nova página pode ser carregada sem JavaScript. O elemento <form> é muito eficiente.
Os valores dos atributos 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 devem ser enviados.
Os dados enviados são compostos de pares de nome/valor dos vários controles de formulário do formulário. Por padrão, isso inclui todos os controles
aninhados no formulário que têm um name. No entanto, com o atributo form, é possível incluir controles de formulário
fora do <form> e omitir controles de formulário aninhados no <form>. Compatível com controles de formulário e <fieldset>,
o atributo form assume como valor o id do formato a que o controle está associado, não necessariamente o formato
em que está aninhado. Isso significa que os controles de formulário 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âmetros de pares de name=value, anexada ao URL do action.
Com POST, os dados são anexados ao corpo da solicitação HTTP. Ao enviar dados seguros, como senhas e informações de
cartão de crédito, use sempre POST.
Há também um método DIALOG. Se um <form method="dialog"> estiver em um <dialog>, o envio do formulário fechará a caixa de diálogo.
Há um evento de envio em que os dados não são apagados nem enviados. Novamente, sem o JavaScript. Isso é discutido na
seção da caixa de diálogo. Como esse processo não envia o formulário, é recomendável incluir formmethod="dialog" e formnovalidate no botão de envio.
Os botões do formulário podem ter mais do que os atributos descritos no início desta seção. Se o botão incluir um atributo formaction,
formenctype, formmethod, formnovalidate ou formtarget, os valores definidos no botão que ativa o envio
do formulário terão precedência sobre action, enctype, method e target
definidos em <form>. A validação de restrição ocorre antes do envio do formulário, mas somente se não houver um
formnovalidate no botão de envio ativado nem um novalidate no <form>.
Para capturar qual botão foi usado para enviar um formulário, atribua
a ele um name. Os botões sem nome ou valor não são enviados com os dados do formulário.
Após o envio do formulário
Quando o usuário envia um formulário on-line preenchido, os nomes e valores dos controles de formulário relevantes são enviados. O nome é o valor do atributo name. Os valores são originados do conteúdo do atributo value ou do valor inserido ou selecionado pelo usuário. O valor de um <textarea> é o texto interno dele.
O valor de um <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>
Selecionar "Passar o cursor Sukhdeep" ou não fazer nada, já que o navegador é exibido e, portanto, selecionar o primeiro valor da opção por padrão e depois clicar no botão "Enviar", a página será atualizada com a configuração do URL:
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. Selecionar "Blendan Smooth" e clicar no botão "Enviar" recarregará a página, 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 com um name, exceto caixas de seleção não selecionadas, botões de opção não selecionados e os nomes e valores de todos os botões diferentes do 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 name do controle de formulário será enviado com um valor vazio.
Existem 22 tipos de entrada, então não é possível abordar todos eles.
A inclusão de um valor é opcional e, geralmente, uma má ideia quando você 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 elementos
de entrada 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. As caixas de seleção e
os botões de opção são 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, apenas um pode ser selecionado por
vez, isso se deve ao atributo name. Esse efeito de apenas um pode ser selecionado é criado ao atribuir a mesma name a cada botão de opção
em um grupo.
Um name precisa ser exclusivo para o grupo: se você usar acidentalmente o mesmo name para dois grupos separados, selecionar um botão
de 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 opções quiser em uma página, com cada grupo trabalhando de forma independente, desde que cada um tenha um
name exclusivo para o grupo.
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 vai corresponder à pseudoclasse CSS :default,
mesmo que o usuário selecione uma opção diferente. O botão de opção selecionado corresponde à
pseudoclasse :checked.
Se o usuário precisar escolher um controle de opção de um grupo de botões, 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 necessá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 rotulagem dos grupos de botões de opção junto com cada botão individual é descrita
mais adiante.
Caixas de seleção
É válido que todas as caixas de seleção em um grupo tenham o mesmo name. Apenas as caixas de seleção marcadas têm name e value enviados com o formulário. Se você tiver várias caixas de seleção com o mesmo nome selecionado, o mesmo nome será enviado com valores diferentes (esperamos). Se você tiver vários controles de formulário com o mesmo nome, mesmo que não sejam todas as caixas de seleção, todos eles serão enviados, separados pelo "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 é útil. Se você tiver três caixas de seleção chamadas chk e todas estiverem marcadas, o envio do formulário não será decifrável:
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 informe ao usuário quando uma caixa de seleção precisa 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 marcador.
Você também quer rotular grupos de controles de formulário. Enquanto as áreas de entrada, seleção e texto individuais são rotuladas com <label>,
os grupos de controles de formulário são rotulados pelo conteúdo da <legend> da
<fieldset> que os agrupa.
Nos exemplos anteriores, você pode ter notado que cada controle de formulário, exceto o botão "Enviar", tinha um <label>. Os rótulos fornecem controles de formulário com nomes acessíveis. Os botões recebem o nome acessível pelo 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 renderizará os controles do 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 no <label>: o valor que é o
id do controle de formulário a que ele está associado.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Há vários benefícios na associação de rótulos a controles de formulário. Os rótulos tornam os controles do formulário acessíveis aos usuários de leitores de tela fornecendo um nome acessível ao controle. Os rótulos também são "áreas de hit". Ao aumentar a área, eles tornam o site mais utilizável para usuários com problemas de coordenação. Se estiver usando um mouse, clique em qualquer lugar do marcador "Seu nome". Isso fornece foco à 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 do ponto de vista do leitor de tela e do dispositivo ponteiro, mas não fornece o gancho de estilo como o rótulo
explícito.
<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 nem qualquer outro componente interativo além do controle de formulário rotulado em um rótulo implícito. Por exemplo, se você incluir um link em um rótulo, enquanto o navegador renderizar o HTML, os 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 "Aprenda formulários" tem informações sobre o design de formulários.
Para grupos de botões de opção e caixas de seleção, o rótulo fornece o nome acessível para o controle de formulário ao qual está associado, mas o grupo de controles e os respectivos rótulos também precisa de um rótulo. Para rotular o grupo, agrupe todos os elementos em uma
<fieldset>, com o <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 rotulam 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 for uma pesquisa com muitas perguntas
divididas em grupos de perguntas relacionadas, a <fieldset> de "estudante favorito" poderá ser aninhada em outra <fieldset> marcada 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 -->
As aparências padrão desses elementos fizeram com que fossem subutilizadas, 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 uso no <fieldset>. O name pode ser usado para acessar o conjunto de campos com JavaScript, mas o conjunto de campos em si não é incluído nos dados enviados (os controles de formulário nomeados aninhados estão incluídos).
Tipos de entrada e teclado dinâmico
Conforme observado anteriormente, há 22 tipos diferentes de entradas.
Em alguns casos, quando um usuário está em um dispositivo com um teclado dinâmico que é mostrado apenas quando necessário, como um smartphone, o tipo de
entrada usado determina o tipo de teclado mostrado. O teclado padrão mostrado pode ser otimizado para o tipo de entrada necessária.
Por exemplo, o tipo tel mostra um teclado otimizado para inserir números de telefone, email inclui @ e ., e o
teclado dinâmico de url inclui dois-pontos e o símbolo de barra. Infelizmente, o iPhone ainda não inclui : no
teclado dinâmico padrão para 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 o upload de arquivos por 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 tipos e extensões globais. Por exemplo, accept="video/*, .gif" aceita arquivos de vídeo ou GIFs animados.
Use "audio/*" para arquivos de som, "video/*" para arquivos de vídeo e "image/*" para arquivos de imagem.
O atributo capture enumerado, definido na
especificação de captura de mídia, poderá ser usado se um novo arquivo
de mídia for criado usando a câmera ou o microfone do usuário. Defina 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 qual dispositivo de entrada 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
Novamente, sem incluir JavaScript, o HTML pode impedir o envio de formulários com valores inválidos.
Há alguns seletores de CSS que correspondem aos controles de formulário com base na presença de atributos HTML, incluindo :required
e :optional se o booleano required
estiver definido ou não; :default se checked
estiver codificado; e :enabled ou :disabled, dependendo se o atributo é interativo e se é interativo ou se é interativo.disabled A pseudoclasse :read-write corresponde a elementos com
controles de formulário e conjunto contenteditable que são, por padrão, editáveis, como os tipos de entrada number, password e text, mas não caixas de seleção,
botões de opção ou o tipo hidden, entre outros. Se um elemento normalmente gravável tiver o atributo readonly
definido, ele corresponderá a :read-only.
À medida que o usuário insere informações nos controles de formulário, os seletores da interface do CSS, incluindo :valid,
:invalid, :in-range e
:out-of-range, são ativados e desativados de acordo com o estado. Quando o usuário
sair de um controle de formulário, a pseudoclasse :user-invalid ou
:user-valid ainda não compatível vai corresponder.
Você pode usar CSS para dar dicas sobre se os controles de formulário são obrigatórios e válidos à medida que o usuário interage com o formulário. Também é possível usar CSS para impedir que os usuários cliquem 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. Embora a interface pareça intuitiva e clara, muitos usuários tentam enviar um formulário para ativar as mensagens de erro. Fazer com que um botão de envio apareça desativado dessa maneira não permite a validação de restrição, um recurso que muitos usuários usam.
O CSS aplicado é atualizado continuamente com base no estado atual da interface. Por exemplo, ao incluir 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
atual não for um e-mail, número, URL, data ou hora válido, a pseudoclasse CSS :invalid será uma correspondência. Essa atualização
constante é diferente da validação de restrição HTML integrada, que ocorre apenas quando o usuário tenta enviar o formulário.
A validação de restrição integrada só é relevante para restrições definidas com atributos HTML. Embora seja possível definir o estilo de um elemento com base
nas pseudoclasses :required e :valid/:invalid, o navegador forneceu mensagens de erro originadas de erros baseados nos
atributos required, pattern, min, max e até mesmo type no envio do formulário.
Quando tentamos enviar o formulário sem escolher o estudante favorito, a validação de restrição impede o envio do formulário
devido a um erro validityState.valueMissing.
Se alguma das propriedades validityState retornar true, o envio será bloqueado e o navegador exibirá uma mensagem de erro
no primeiro controle incorreto de formulário, colocando em 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 mostra uma mensagem de erro e recebe foco. Se um controle obrigatório não tiver valores definidos, se um valor numérico estiver fora do intervalo ou se um valor não for do tipo exigido pelo atributo type, o formulário não será validado nem enviado, e uma mensagem de erro será exibida.
Se um valor de number, data ou hora estiver abaixo do valor mínimo definido de min ou acima do máximo definido de max, o controle será :out-of-range (e :invalid), e
o usuário será informado sobre o erro valididityState.rangeUnderflow,
validityState.rangeOverflow quando tentar enviar o formulário. Se o valor estiver fora de sincronia com o valor de step, seja explicitamente definido ou padronizado como 1, o controle será :out-of-range (e :invalid) e haverá um erro validityState.stepMismatch. O erro aparece como um balão e, por padrão, fornece informações úteis sobre como corrigi-lo.
Existem atributos semelhantes para o comprimento dos valores: os atributos minlength
e maxlength alertam o usuário sobre um erro
com validityState.tooLong ou
validityState.tooShort no envio.
O maxlength também impede que o usuário insira muitos caracteres.
O uso do atributo maxlength pode atrapalhar a experiência do usuário. Geralmente, é uma experiência melhor permitir que o usuário
insira mais caracteres do que o permitido fornecendo um contador, opcionalmente na forma de um elemento
<output>, que não é enviado com o formulário,
o que permite que o usuário edite o texto até que a saída mostre que o tamanho máximo permitido não foi excedido. O maxlength
pode ser incluído no HTML. Como tudo o que discutimos, ele funciona sem JavaScript. Em seguida, no carregamento, o valor do 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 teclado numérico
de telefone em dispositivos com teclados dinâmicos, mas não restringe valores válidos. Para esse e outros tipos de entrada,
há o atributo pattern. Você pode especificar uma expressão regular ao 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 um erro validityState.patternMismatch. Se obrigatória e vazia, a mensagem de erro padrão para validityState.valueMissing vai ser mostrada ao usuário, em vez da
patternMismatch.
Para e-mails, o validityState.typeMismatch provavelmente
é muito simplificado para as suas necessidades. É recomendável incluir o atributo pattern
para que endereços de e-mail de uma intranet sem um TLD não sejam aceitos como válidos.
O atributo "pattern" permite fornecer uma expressão regular à qual o valor deve corresponder. Ao exigir uma correspondência de padrão,
é necessário que esteja muito claro para o usuário o que é esperado.
Tudo isso pode ser feito sem uma linha de JavaScript, mas, como uma API HTML, você pode usar o JavaScript para incluir mensagens personalizadas durante a validação de restrição. Também é possível usar o 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 um <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 de envio fecha a caixa de diálogo. Use formmethod="dialog" para substituir o método padrão do formulário e feche
<dialog> sem enviar ou apagar os dados. Também é necessário incluir o formnovalidate. Caso contrário, o navegador vai tentar validar a verificação de que todos os campos obrigatórios têm um valor. O usuário pode querer fechar a caixa de diálogo e o formulário sem
inserir dados. A validação evita isso. Inclua aria-label="close", porque "X" é uma indicação visual conhecida, mas
não é um rótulo descritivo.
Todos os controles de formulário têm rótulos implícitos, então não é necessário incluir os atributos id ou for. Ambos os elementos de entrada
têm o atributo obrigatório, o que os torna obrigatórios. A entrada numérica tem o step definido explicitamente para demonstrar como step é
incluído. Como step é definido como 1 por padrão, esse atributo pode ser omitido.
O <select> tem um valor padrão, o que torna o atributo required desnecessário. Em vez de incluir o atributo value
em cada opção, o valor assume como padrão o texto interno.
O botão de envio no final define o método de formulários como POST. Quando clicado, a validade de cada valor é verificada. Se todos
os valores forem válidos, os dados do formulário serão enviados, a caixa de diálogo será fechada, e a página poderá redirecionar para thankyou.php,
que é o URL da ação. Se faltarem valores ou se o valor numérico tiver uma incompatibilidade de etapas ou estiver fora do intervalo, uma mensagem de erro relevante definida pelo navegador será exibida, o formulário não será enviado e a caixa de diálogo não será fechada.
As mensagens de erro padrão podem ser personalizadas com o método
validityState.setCustomValidity('message here'). Se você definir uma mensagem personalizada, ela precisará ser definida explicitamente como uma string vazia quando tudo for válido. Caso contrário, 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 certos nos formulários. Para uma boa experiência do usuário, é importante evitar que eles cometam erros incluindo instruções e dicas conforme necessário. Esta seção aborda como o HTML sozinho pode fornecer validação no lado do cliente, mas a validação precisa ser do lado do cliente e do servidor. A validação pode ser fornecida de maneiras discretas durante o preenchimento do formulário, como adicionando uma marca de seleção quando o valor está correto. Não forneça mensagens de erro antes que o controle de formulário seja concluído. Se o usuário cometer um erro, informe a ele onde ele está e o que errou.
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 vendo uma versão traduzida do formulário.
Os controles do formulário, os rótulos e as mensagens de erro precisam estar visíveis na tela, precisos e significativos, determináveis de maneira programática e associados de maneira programática ao elemento ou grupo adequado do formulário. O atributo autocomplete
pode e precisa 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 de formulário, mais atenção será dada à acessibilidade em relação ao gerenciamento de foco, configuração e atualização de nomes, funções e valores ARIA, quando necessário, e anúncios ARIA ao vivo, conforme necessário. Mas, como aprendemos aqui, só com HTML, você pode atingir um longo caminho até seu objetivo de acessibilidade e validade sem recorrer a ARIA ou JavaScript.
Teste seu conhecimento
Teste seus conhecimentos sobre formulários.
Como você faz com que os botões de opção façam parte do mesmo grupo?
name.id.Qual elemento HTML é usado para informar ao usuário para que serve esse campo de formulário?
<h1><title><label>