Configurando e validando botões de opção

A configuração e validação de botões do rádio parece ser o campo de formulário isso dá a muitos webmasters mais dificuldades na configuração. De fato, a configuração desses campos é o mais simples de todos os campos de formulário a serem validados, pois os botões de opção definem um valor que só precisa ser testado quando o formulário é enviado.

A dificuldade com os botões de opção é que há pelo menos dois e geralmente mais campos que precisam ser colocados no formulário, relacionados juntos e testados como um grupo. Desde que você use as convenções de nomenclatura e o layout corretos para seus botões, você não terá nenhum problema.

A primeira coisa a observar ao usar botões de opção em nosso formulário é como os botões precisam ser codificados para que funcionem corretamente como botões de opção. O comportamento desejado que queremos é ter apenas um botão selecionado por vez; quando um botão é selecionado, qualquer botão selecionado anteriormente será automaticamente desmarcado.

A solução aqui é fornecer a todos os botões de opção do grupo o mesmo nome, mas com valores diferentes. Aqui está o código usado para o botão de opção.

A criação de vários grupos de botões de opção para o formulário único também é simples. Tudo o que você precisa fazer é fornecer ao segundo grupo de botões de opção um nome diferente daquele usado para o primeiro grupo.

O campo nome determina a qual grupo pertence um botão específico. O valor que será passado para um grupo específico quando o formulário for enviado será o valor do botão dentro do grupo selecionado no momento em que o formulário for enviado.

Para que a pessoa que preenche o formulário entenda o que cada botão de opção em nosso grupo faz, precisamos fornecer descrições para cada botão. A maneira mais simples de fazer isso é fornecer uma descrição como texto imediatamente após o botão.

Existem alguns problemas ao usar apenas texto sem formatação:

1. O texto pode estar associado visualmente ao botão de opção, mas pode não estar claro para alguns que usam leitores de tela, por exemplo.
2. Na maioria interfaces de usuário usando os botões de opção, o texto associado ao botão pode ser clicado e capaz de selecionar o botão de opção associado. No nosso caso aqui, o texto não funcionará dessa maneira, a menos que esteja especificamente associado ao botão.

Para associar o texto ao seu botão de opção correspondente, para que, ao clicar no texto, selecione esse botão, precisamos faça uma adição adicional ao código de cada botão colocando o botão inteiro e o texto associado em um rótulo.

Aqui está a aparência do HTML completo de um dos botões:

 botão um

Como o botão de opção com o nome de identificação referido no para parâmetro da tag label está realmente contido na própria tag, o parâmetro para e Eu iria parâmetros são redundantes em alguns navegadores. Seus navegadores, no entanto, geralmente não são inteligentes o suficiente para reconhecer o aninhamento; portanto, vale a pena colocá-los para maximizar o número de navegadores nos quais o código funcionará.

Isso completa a codificação dos próprios botões de opção. A etapa final é configurar a validação do botão de opção usando Javascript.

A validação de grupos de botões de opção pode não ser óbvia, mas é simples quando você sabe como.

A função a seguir validará que um dos botões de opção em um grupo foi selecionado:

// Validação do botão de opção
// copyright Stephen Chapman, 15 de novembro de 2004, 14 de setembro de 2005
// você pode copiar esta função, mas mantenha o aviso de direitos autorais com ela
função valButton (btn) {
var cnt = -1;
para (var i = btn.length-1; i> -1; Eu--) {
if (btn [i]. verificado) {cnt = i; i = -1;}
}
if (cnt> -1) retorna btn [cnt] .value;
else return null;
}

Para usar a função acima, chame-a na rotina de validação de seu formulário e passe o nome do grupo de botões de opção. Ele retornará o valor do botão dentro do grupo selecionado ou retornará um valor nulo se nenhum botão no grupo estiver selecionado.

Por exemplo, aqui está o código que executará a validação do botão de opção:

var btn = valButton (form.group1);
if (btn == null) alert ('Nenhum botão de opção selecionado');
else alert ('Valor do botão' + btn + 'selecionado');

Este código foi incluído na função chamada por um onClick evento anexado ao botão validar (ou enviar) no formulário.

Uma referência ao formulário inteiro foi passada como um parâmetro para a função, que usa o argumento "formulário" para se referir ao formulário completo. Para validar o grupo de botões de opções com o nome group1, passamos form.group1 para a função valButton.

Todos os grupos de botões de opção que você precisará podem ser gerenciados usando as etapas descritas acima.