ir para conteúdo

Treinamento de HTML

Componente Radiobutton

O input do tipo radio - ou botão de opção - geralmente são usados em formulários em que apenas uma opção pode ser selecionada. Os botões de opção geralmente são renderizados como pequenos círculos, que são preenchidos ou destacados quando selecionados.

Observação: Os números mencionados nos exemplos, são as linhas do código fonte HTML.

← Retornar para página principal

Radiobutton Desagrupado

Exemplo Incorreto


        <p>Qual doce você prefere?</p>
        <label for="brigadeiro">Brigadeiro</label>
        <input id="brigadeiro" type="radio" name="doce" value="brigadeiro" />
        
        <label for="beijinho">Beijinho</label>
        <input id="beijinho" type="radio" name="doce" value="beijinho" />

        <label for="bichodepe">Bicho-de-Pé</label>
        <input id="bichodepe" type="radio" name="doce" value="bichodepe" />

Exemplo prático

Brigadeiro Beijinho Bicho-de-Pé

Exemplo Correto


        <fieldset>
          <legend>Qual doce você prefere:</legend>

          <label for="brigadeiro2">Brigadeiro</label>
          <input id="brigadeiro2" type="radio" name="doce" value="brigadeiro" />
          
          <label for="beijinho2">Beijinho</label>
          <input id="beijinho2" type="radio" name="doce" value="beijinho" />

          <label for="bichodepe2">Bicho-de-Pé</label>
          <input id="bichodepe2" type="radio" name="doce" value="bichodepe" />
        </fieldset>

Exemplo prático

Qual doce você prefere:

Radiobutton sem label

Exemplo Incorreto


        <fieldset>
          <legend>Qual seu doce preferido:</legend>

          <p>Brigadeiro</p>
          <input id="brigadeiro4" type="radio" name="doce" value="brigadeiro" />

          <p>Beijinho</p>
          <input id="beijinho4" type="radio" name="doce" value="beijinho" />

          <p>Bicho-de-Pé</p>
          <input id="bichodepe4" type="radio" name="doce" value="bichodepe" />
        </fieldset>

Exemplo prático

Qual seu doce preferido:

Brigadeiro

Beijinho

Bicho-de-Pé

Exemplo Correto


        <fieldset>
          <legend>Qual doce você prefere:</legend>

          <label for="brigadeiro6">Brigadeiro</label>
          <input id="brigadeiro6" type="radio" name="doce" value="brigadeiro" />
          
          <label for="beijinho6">Beijinho</label>
          <input id="beijinho6" type="radio" name="doce" value="beijinho" />

          <label for="bichodepe6">Bicho-de-Pé</label>
          <input id="bichodepe6" type="radio" name="doce" value="bichodepe" />
        </fieldset>

Exemplo prático

Qual doce você prefere:

← Retornar para página principal