Caixas de seleção em formulários web: Conceitos básicos

As caixas de verificação são um elemento indispensável nos formulários Web, especialmente quando se trata de oferecer aos utilizadores uma opção de inclusão, como a aceitação dos termos e condições ou a subscrição de uma newsletter. Neste guia, analisarei os aspectos básicos das caixas de verificação , explicarei como funcionam e darei instruções passo a passo sobre como utilizar as caixas de verificação nos seus formulários.

As caixas de verificação não só permitem selecções simples de sim/não, como também podem ser utilizadas em combinação com outros controlos de formulários. Este guia dar-lhe-á os conhecimentos necessários para implementar e utilizar corretamente as caixas de verificação.

Principais conclusões

• As caixas de verificação são ferramentas ideais para decisões binárias em formulários.
• Se uma caixa de verificação não estiver assinalada, não é submetida.
• O valor predefinido de uma caixa de verificação não assinalada é considerado vazio.
• As caixas de verificação podem ser marcadas por defeito, utilizando o atributo "checked".
• Compreender o funcionamento das caixas de verificação é crucial para o tratamento correto dos dados do formulário.

Guia passo-a-passo

Passo 1: Criar as caixas de verificação

Comece por criar as suas caixas de verificação em HTML. Necessitará do atributo type="checkbox" e de uma propriedade name para cada caixa de verificação para identificar o seu valor quando submeter o formulário.

Neste exemplo, criamos duas caixas de verificação: uma para concordar com os termos e condições e outra para receber a newsletter. As duas caixas de verificação são identificadas pelos nomes "aceitar TNCs" e "receber newsletter".

Passo 2: Configurar o formulário

Configure o seu formulário utilizando o método GET ou POST. Neste exemplo, estamos a utilizar o método GET para podermos ver a seleção no parâmetro URL.

Aqui está um exemplo simples de um formulário com as caixas de verificação. Certifique-se de que as caixas de verificação estão incluídas numa etiqueta <form> para que os dados sejam processados corretamente.

Etapa 3: Verificar os dados enviados

Submeta o formulário sem marcar nenhuma caixa de verificação. Verá que não aparece nada no URL.

A caraterística especial das caixas de verificação é que, se não estiverem assinaladas, não transmitem um valor. Isto significa que não aparecem nos parâmetros do URL, o que, no caso do método GET, deixa a entrada correspondente vazia.

Passo 4: Adicionar valores às caixas de verificação

Active a primeira caixa de verificação e submeta novamente o formulário. Apenas as caixas de verificação activadas são apresentadas nos dados transmitidos.

Apenas a caixa de verificação que foi efetivamente selecionada será transmitida. Neste caso, verá o nome e o valor específicos da caixa de verificação activada nos dados do formulário.

Passo 5: Definir o valor por defeito

Para definir uma caixa de verificação como selecionada por defeito, adicione o atributo checked à caixa de verificação correspondente.

Se utilizar o atributo checked, a caixa de verificação já estará activada quando a página for carregada. Isto é útil se pretender que determinadas opções sejam selecionadas por predefinição.

Passo 6: Processar a entrada do utilizador

Quando o utilizador submete a entrada do formulário, verifique os valores das caixas de verificação. Espere apenas os nomes das caixas assinaladas nos dados submetidos.

É importante garantir que o seu backend (por exemplo, um servidor como o Node.js com Express) pode responder adequadamente a valores vazios ou em falta.

Resumo

Neste guia, você aprendeu os conceitos básicos de caixas de seleção em formulários Web. Sabe agora como criar caixas de verificação, compreender como funcionam e como pode garantir que os dados são transmitidos corretamente. As caixas de verificação constituem uma forma fácil de captar as preferências do utilizador e devem ser incluídas em todos os formulários Web.