Passo 1 de 8
Escolher o controle conforme a decisão
Distinguir escolhas independentes de escolhas exclusivas e decidir quando mostrar as alternativas ou reuni-las em uma lista.
Trilha de aprendizado · Nível 6 · Tutorial 6
Ao concluir, você poderá oferecer escolhas independentes, exclusivas ou em listas, configurando rótulos, agrupamentos e valores de envio coerentes.
Escolher o controle conforme a decisão
Distinguir escolhas independentes de escolhas exclusivas e decidir quando mostrar as alternativas ou reuni-las em uma lista. 2 min
Criar escolhas independentes com checkbox
Monte caixas de seleção independentes com rótulos acionáveis, valores explícitos e uma pergunta compartilhada. 3 min
Criar uma escolha exclusiva com radio
Configure radios para manter uma única alternativa marcada por pergunta, sem vincular perguntas independentes. 3 min
Definir as marcações iniciais com checked
Configure quais checkboxes e radios começam marcados e diferencie essa configuração das escolhas posteriores do usuário. 2 min
Construir uma lista com select e option
Crie uma lista de seleção única com rótulo, valores explícitos e uma alternativa inicialmente selecionada. 3 min
Organizar alternativas com optgroup
Organize opções em conjuntos dentro de uma lista de seleção única, sem transformar os títulos dos grupos em escolhas. 2 min
Prever quais escolhas serão enviadas
Identifique os pares nome e valor enviados, considerando marcações atuais, nomes repetidos e escolhas que ficam de fora. 3 min
Aplicar e revisar as opções de um formulário
Complete um formulário com os três controles e confira quais dados serão enviados após mudanças nas escolhas. 4 min
Passo 1 de 8
Distinguir escolhas independentes de escolhas exclusivas e decidir quando mostrar as alternativas ou reuni-las em uma lista.
Comece pela relação entre as alternativas, não pela aparência do controle.
Relacione cada necessidade ao controle mais adequado.
Toque em um item e depois no par correspondente.
Quando a escolha é exclusiva, considere a quantidade de alternativas e a necessidade de compará-las.
Radio favorece a comparação sem abrir uma lista. Select reduz o espaço ocupado, especialmente quando há muitas alternativas e não é necessário vê-las todas ao mesmo tempo.
Dica
Não existe um limite universal de opções que obrigue a trocar radio por select. A quantidade orienta a decisão, mas não substitui a análise da tarefa.
Uma inscrição oferece seis oficinas, mas cada pessoa só pode participar de uma. É importante comparar títulos e horários sem abrir uma lista. Qual escolha atende melhor?
Passo 2 de 8
Monte caixas de seleção independentes com rótulos acionáveis, valores explícitos e uma pergunta compartilhada.
Use input com type="checkbox" para criar uma caixa que o usuário pode marcar e desmarcar. Cada caixa funciona de forma independente: marcar uma não desmarca as outras.
Este trecho pode ficar dentro do formulário.
<input type="checkbox" id="material-pdf"
name="material_pdf" value="apostila_pdf">
<label for="material-pdf">Apostila em PDF</label>Dica
No navegador, clicar em “Apostila em PDF” também marca ou desmarca a caixa. A associação for="material-pdf" com id="material-pdf" torna o texto acionável.
Um formulário tem dois checkboxes: “Apostila em PDF” e “Resumo em áudio”. A primeira caixa está marcada. Ao marcar a segunda, o navegador desmarca automaticamente a primeira.
As duas caixas respondem à mesma pergunta. Aplique fieldset e legend ao conjunto, mantendo um identificador individual e um label associado para cada caixa.
<fieldset>
<legend>Quais materiais você quer receber?</legend>
<p>
<input type="checkbox" id="material-pdf"
name="material_pdf" value="apostila_pdf">
<label for="material-pdf">Apostila em PDF</label>
</p>
<p>
<input type="checkbox" id="material-audio"
name="material_audio" value="resumo_audio">
<label for="material-audio">Resumo em áudio</label>
</p>
</fieldset>Dica
“Resumo em áudio” é o texto exibido pelo label. Já value="resumo_audio" define o valor dessa escolha para quando ela participar do envio. Alterar o texto do rótulo não altera esse valor.
O agrupamento já está pronto. Complete [A], [B] e [C] nas respostas abaixo para permitir escolhas independentes com valores e rótulos coerentes.
<fieldset>
<legend>Quais extras você quer incluir?</legend>
<p>
<input type="[A]" id="extra-capa"
name="extra_capa" value="capa">
<label for="extra-capa">Capa protetora</label>
</p>
<p>
<input type="checkbox" id="extra-embalagem"
name="extra_embalagem" [B]="presente">
<label for="[C]">Embalagem para presente</label>
</p>
</fieldset>Substitua [A]: type="___" deve permitir marcar a capa sem interferir na embalagem.
Substitua [B]: ___="presente" deve definir o valor da escolha, não seu texto visível.
Substitua [C]: for="___" deve fazer o texto “Embalagem para presente” acionar a caixa correspondente.
Passo 3 de 8
Configure radios para manter uma única alternativa marcada por pergunta, sem vincular perguntas independentes.
Use input com type="radio" e o mesmo name para as alternativas da mesma pergunta, dentro do mesmo formulário. Ao marcar outra alternativa desse grupo, o navegador desmarca a anterior.
<form>
<fieldset>
<legend>Qual modalidade você prefere?</legend>
<input type="radio" id="modalidade-presencial" name="modalidade" value="presencial">
<label for="modalidade-presencial">Presencial</label>
<input type="radio" id="modalidade-distancia" name="modalidade" value="distancia">
<label for="modalidade-distancia">A distância</label>
</fieldset>
</form>Dica
Neste exemplo, name se repete, enquanto id e value mudam em cada alternativa. O for de cada label aponta para o id correspondente.
Relacione cada atributo ao papel que ele desempenha no grupo de radio apresentado.
Toque em um item e depois no par correspondente.
Para permitir uma escolha de modalidade e outra de turno, acrescente este fieldset antes de </form> no exemplo anterior. Os novos radios compartilham name="turno", diferente de name="modalidade". Assim, mudar o turno não altera a modalidade.
<fieldset>
<legend>Qual turno você prefere?</legend>
<input type="radio" id="turno-manha" name="turno" value="manha">
<label for="turno-manha">Manhã</label>
<input type="radio" id="turno-noite" name="turno" value="noite">
<label for="turno-noite">Noite</label>
</fieldset>Dica
fieldset e legend dão contexto à pergunta. A exclusividade depende do name: fieldsets diferentes não separam radios que compartilham o mesmo name no mesmo formulário.
Ao adaptar o exemplo, alguém colocou name="escolha" nos quatro radios, mantendo IDs únicos, values distintos e dois fieldsets. Marcar “Noite” passou a desmarcar “Presencial”. Qual correção mantém no máximo uma escolha por pergunta, sem vincular as duas perguntas?
Passo 4 de 8
Configure quais checkboxes e radios começam marcados e diferencie essa configuração das escolhas posteriores do usuário.
Em checkbox e radio, o atributo booleano checked declara que o controle começa marcado. Ele não impede o usuário de mudar a escolha depois.
Várias caixas de seleção podem ter checked. Neste trecho, as duas começam marcadas:
<fieldset>
<legend>Preferências de exibição</legend>
<input type="checkbox" id="dicas" name="dicas" value="sim" checked>
<label for="dicas">Exibir dicas</label>
<input type="checkbox" id="atalhos" name="atalhos" value="sim" checked>
<label for="atalhos">Exibir atalhos</label>
</fieldset>Dica
Não use checked="false" para desmarcar: o atributo continua presente. Para declarar uma opção inicialmente desmarcada, omita checked.
No exemplo anterior, as duas caixas começam marcadas. O usuário desmarca apenas “Exibir dicas”. Como ficam as marcações?
Use checked em no máximo um radio de cada grupo. No exemplo, “Compacto” começa marcado, mas o usuário pode trocar para “Completo”.
Para o grupo começar sem alternativa marcada, não coloque checked em nenhum dos seus radios.
<fieldset>
<legend>Formato do resumo</legend>
<input type="radio" id="compacto" name="formato" value="compacto" checked>
<label for="compacto">Compacto</label>
<input type="radio" id="completo" name="formato" value="completo">
<label for="completo">Completo</label>
</fieldset>Se você remover checked de “Compacto” no HTML anterior, “Completo” passará a ser a alternativa inicialmente marcada.
Passo 5 de 8
Crie uma lista de seleção única com rótulo, valores explícitos e uma alternativa inicialmente selecionada.
O elemento select cria a lista de seleção única. Dentro dele, cada option representa uma alternativa. O rótulo identifica a lista inteira, não cada opção separadamente.
<label for="idioma-preferido">Idioma do conteúdo</label>
<select id="idioma-preferido" name="idioma">
<option value="pt-br">Português do Brasil</option>
<option value="en">Inglês</option>
<option value="es">Espanhol</option>
</select>Exemplo
for="idioma-preferido" associa o rótulo ao id do select.name="idioma", no select, identifica a entrada no envio.<option value="en">Inglês</option>, Inglês é o texto visível e en é o valor explícito da alternativa.Considere a alternativa <option value="en">Inglês</option> dentro de um <select name="idioma">. Associe cada função à informação correspondente.
Toque em um item e depois no par correspondente.
Para iniciar a lista com Inglês, acrescente selected à option correspondente. Esse atributo é booleano: sua presença basta. Em uma lista de seleção única, declare selected em apenas uma alternativa.
<option value="en" selected>Inglês</option>Dica
Sem selected, uma lista suspensa simples com todas as opções habilitadas começa com a primeira opção selecionada: no exemplo anterior, Português do Brasil.
Use selected em option, não checked, que pertence aos inputs de checkbox e radio. A seleção inicial não impede o usuário de escolher outra alternativa.
<label for="idioma-preferido">Idioma do conteúdo</label>
<select id="idioma-preferido" name="idioma">
<option value="pt-br">Português do Brasil</option>
<option value="en" ___>Inglês</option>
<option value="es">Espanhol</option>
</select>Digite somente o nome do atributo que faz Inglês ser a seleção inicial, mesmo estando na segunda posição.
Passo 6 de 8
Organize opções em conjuntos dentro de uma lista de seleção única, sem transformar os títulos dos grupos em escolhas.
Use <optgroup> dentro de <select> para reunir opções relacionadas. O atributo label fornece o título do conjunto, e as alternativas ficam em elementos <option> dentro dele.
O título não é selecionável. A lista continua permitindo apenas uma escolha no total, não uma por grupo.
<label for="bebida">Bebida</label>
<select id="bebida" name="bebida">
<optgroup label="Quentes">
<option value="cafe">Café</option>
<option value="cha">Chá</option>
</optgroup>
<optgroup label="Frias">
<option value="suco">Suco</option>
<option value="agua">Água</option>
</optgroup>
</select>Dica
O elemento <label for="bebida"> identifica o controle inteiro. Já o atributo label="Quentes" identifica um conjunto dentro da lista. O título do conjunto não substitui o rótulo do select.
Na lista de bebidas, selecionar Café e depois Suco mantém as duas opções selecionadas, pois elas pertencem a grupos diferentes.
<label for="curso">Curso</label>
<select id="curso" name="curso">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="ingles">Inglês</option>
<option value="espanhol">Espanhol</option>
</select>Reescreva o trecho usando optgroup para reunir HTML e CSS em “Tecnologia”, e Inglês e Espanhol em “Idiomas”. Preserve o label externo, os atributos do select e todos os valores de value.
Ao final, explique por que “Tecnologia” e “Idiomas” não podem ser selecionados.
Passo 7 de 8
Identifique os pares nome e valor enviados, considerando marcações atuais, nomes repetidos e escolhas que ficam de fora.
Cada checkbox ou radio marcado no momento do envio gera um par name=value. Opções não marcadas ficam de fora: não enviam automaticamente false nem um valor vazio.
Se nenhum radio de um grupo estiver marcado, esse grupo não gera entrada.
Nos exemplos deste step, todos os controles estão habilitados, têm name e pertencem ao mesmo formulário.
Exemplo
Três checkboxes compartilham name="tema", com valores html, css e a11y. Se HTML e CSS estiverem marcados, as entradas serão:
tema=htmltema=css
Compartilhar o name não torna os checkboxes exclusivos. Cada caixa marcada gera sua própria entrada, mantendo o nome repetido.
No momento do envio:
name="entrega": retirada está marcado; correio não.name="avisos" e value="sim": desmarcado.name="turno": nenhum marcado.Considere apenas esses controles.
O par enviado usa o name do select e o value da option atualmente selecionada, não seu texto visível.
Para todos esses controles, vale o estado no momento do envio — mesmo que seja diferente do que checked ou selected declarou inicialmente.
<label for="material">Material de apoio</label>
<select id="material" name="material">
<option value="digital" selected>Arquivo digital</option>
<option value="impresso">Caderno impresso</option>
</select>Exemplo
A pessoa escolhe Caderno impresso e envia. A entrada será material=impresso, não material=digital nem material=Caderno impresso.
Checkboxes com name="tema":
value="html": começou marcado; a pessoa desmarcou.value="css": começou desmarcado; a pessoa marcou.value="a11y": começou marcado e permaneceu assim.Radios com name="turno":
value="manha", e Noite, value="noite": nenhum começou marcado e a pessoa não escolheu um turno.Select com name="material":
value="digital", começou selecionado. A pessoa mudou para Caderno impresso, value="impresso".Liste somente os pares enviados por esses controles, um por linha, no formato nome=valor. Mantenha os nomes repetidos quando necessário.
Escreva pelo menos 1 caracteres (0/1).
Passo 8 de 8
Complete um formulário com os três controles e confira quais dados serão enviados após mudanças nas escolhas.
Complete o formulário da próxima tela conforme estes requisitos:
name="turno" para essa pergunta.Os marcadores __A__ a __E__ são lacunas do código-base. Marcadores iguais recebem a mesma resposta. Faça a revisão sem precisar enviar o formulário.
<form>
<fieldset>
<legend>Quais materiais você quer?</legend>
<input type="__A__" id="apostila" name="material" value="apostila" checked>
<label for="apostila">Apostila</label>
<input type="__A__" id="exercicios" name="material" value="exercicios">
<label for="__B__">Exercícios</label>
</fieldset>
<fieldset>
<legend>Qual turno você prefere?</legend>
<input type="__C__" id="manha" name="__D__" value="manha" checked>
<label for="manha">Manhã</label>
<input type="__C__" id="tarde" name="__D__" value="tarde">
<label for="tarde">Tarde</label>
</fieldset>
<label for="oficina">Oficina</label>
<select id="oficina" name="oficina">
<optgroup label="Comunicação">
<option value="escrita">Escrita</option>
<option value="fotografia" __E__>Fotografia</option>
</optgroup>
<optgroup label="Artes">
<option value="desenho">Desenho</option>
<option value="pintura">Pintura</option>
</optgroup>
</select>
<button type="submit">Enviar inscrição</button>
</form>Informe as substituições de A a E e justifique os três tipos de controle usados. Na justificativa do turno, indique o que garante a exclusividade.
No formulário corrigido, o usuário mantém Apostila marcada, marca Exercícios, muda o turno para Tarde e escolhe Desenho.
Quais pares de nome e valor participam do envio?
Resumo
Parabéns! Você concluiu: Criar opções de escolha com checkbox, radio e select
Você concluiu “Criar opções de escolha com checkbox, radio e select”. Agora pode combinar os três controles, revisar rótulos e configurações e prever os dados enviados a partir das escolhas atuais.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
