HTML: formulários - radio button
HTML:
radio button
(Elivelto Ebermam)
Radio button é um tipo de caixa
de seleção que permite apenas uma escolha. É um campo muito utilizado em provas
objetivas, onde só há uma resposta correta na questão. Essa característica o
difere de um checkbox, o qual permite marcar múltiplas opções. Quando uma opção
é marcada, automaticamente as outras são desmarcadas.
A tag responsável por inserir uma caixa de
seleção é a <input>, sendo que deve ser utilizada com o atributo type.
Assim trecho de código para inserir o campo em HTML seria o seguinte:
<input type=”radio”>
O valor do atributo type nesse
caso é “radio”. Foi dito que o código “seria” o mostrado acima, isso porque
além do atributo type é necessário utilizar outro atributo: name. Vamos falar
um pouco desse atributo.
Atributo name
O atributo é muito importante em
HTML, a função dele é dar nome a elementos. A maioria das tags pode ter o
atributo name. Assim como eu tenho um nome e você tem outro nome, os elementos
HTML também podem ter nomes diferentes. Por exemplo posso nomear um parágrafo
de “p1” e outro de “p2”, veja:
<p name=”p1”> texto
</p>
<p name=”p2”> texto
</p>
Ambos são parágrafos, mas tem
nomes diferentes. É recomendado que os nomes não se repitam. Outros elementos
também podem ter nome, como <h1>, <h2>, <a> etc.
Para os elementos de formulário,
é recomendado que eles tenham um nome, pois facilita a identificação dos dados
quando são enviados para o servidor web.
Atributo name no radio button
Nos campos radio button existe
uma diferença na forma de usar o atributo name: todos os radio buttons
pertencentes ao mesmo grupo devem ter o mesmo nome. Isso ocorre porque eles são
dependentes um dos outros, e o atributo name é usado para agrupá-los. Apenas um
radio button do grupo pode ficar marcado, quando se marca um, os outros
automaticamente são desmarcados. Portanto a regra é clara: os campos de radio button do mesmo grupo devem conter o atributo name
com o mesmo valor.
Para facilitar a compreensão,
observe o código abaixo:
<html>
<head>
<title> Exemplo
</title>
</head>
<body>
<form
action="servidor.php" method="post">
<input type=”radio” name=”questao”>
<input
type=”radio” name=”questao”>
</form>
</body>
</html>
Se inserirmos esse código no editor online do site W3Schools
[1], acessado através link https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
, e depois clicarmos em “run”, temos o seguinte resultado:
Note que só aparece dois
círculos na mesma linha. Podemos marcar um deles por vez, clicando neles. Quando
clicamos em um, o outro é desmarcado. Veja agora outro código:
Nesse código notamos que cada radio button é seguido por um texto, e há uma quebra para que fiquem em linhas diferentes. Veja agora outro exemplo:
Nele é acrescentado um
parágrafo, que no caso é a pergunta da questão. Para a questão, há três opções
disponíveis, cada uma representada por um radio button seguido por um pequeno
texto.
Referências
[1] HTML Tutorial. W3Schools,
2020. Disponível em <https://www.w3schools.com/html/>.
Acesso em: 4 de mai. de 2020.
Comentários
Postar um comentário