CHECKBOX e RADIO

CHECKBOX

Mais de uma opção com mesmo atributo NAME e diferentes atributos VALUES podem ser selecionadas, simulando uma Lista de Seleção Múltipla.

Quando temos muitas opções é mais recomendado o uso da Lista de Seleção Múltipla.

RADIO

Quando uma opção RADIO é marcada, esta só será desmarcada quando outra opção RADIO com mesmo NAME for selecionada.

O INPUT tipo RADIO é melhor empregado quando queremos representar poucas opções. No caso de termos muitas opções é mais recomendado o uso do MENU.

Atributos Válidos do Identificador INPUT para CHECKBOX e RADIO.

• NAME: é o nome simbólico deste campo do formulário.
  • Exemplo 1: usando CHECKBOX para simular uma Lista de Seleção Múltipla.

    <form>
    <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="op1"> opção1
    <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="op2"> opção2
    <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="op3"> opção3
    </form>

    opção1
    opção2
    opção3
    
  • Exemplo3: Como já vimos acima, uma opção tipo RADIO só é desmarcada quando outra opção RADIO com mesmo NAME for selecionada.

    <form>
    <INPUT TYPE="RADIO" NAME="OPCAO" VALUE="op1"> opção1
    <INPUT TYPE="RADIO" NAME="OPCAO" VALUE="op2"> opção2
    </form>

    opção1 opção2

    <form>
    <INPUT TYPE="RADIO" NAME="OPCAO1" VALUE="op1"> opção1
    <INPUT TYPE="RADIO" NAME="OPCAO2" VALUE="op2"> opção2
    </form>

    opção 1 opção 2

  ---

• VALUE:é um atributo obrigatório que especifica o valor do INPUT quando este botão é selecionado (botões não selecionados são desconsiderados durante a submissão dos dados). O valor default para "checkbox" e "radio" é on.

  Se muitos botões RADIO tiverem mesmo NAME e nenhum atributo VALUE especificado, todos assumirão o mesmo valor default on, e o servidor não será capaz de dizer qual botão está selecionado.

  ---

• CHECKED: especifica que este botão "checkbox" ou "radio" é selecionado por default.
  • Exemplo 4:

    <form>
    <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="op1"> opcao1
    <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="op2" CHECKED> opcao2
    <INPUT TYPE="checkbox" NAME="OPCAO" VALUE="op3"> opcao3
    </form>

    opcao1
    opcao2
    opcao3
    
  • Exemplo 5:

    <form>
    <INPUT TYPE="radio" NAME="OPCAO" VALUE="op1" CHECKED> opção1
    <INPUT TYPE="radio" NAME="OPCAO" VALUE="op2"> opção2
    <INPUT TYPE="radio" NAME="OPCAO" VALUE="op3"> opção3
    </form>

    opção1
    opção2
    opção3
    

Exercícios