HTML: formulários - caixas de seleção
HTML:
caixas de seleção (checkbox)
(Elivelto Ebermam)
Caixa de seleção ou checkbox (no
inglês) é um tipo de campo que pode ser inserido dentro de um formulário. Esse
tipo de campo permite ao usuário marcá-lo ou não, como mostrado na imagem
abaixo:
A tag responsável por inserir uma caixa de
seleção é a <input>, porém, como essa tag é usada para vários tipos de
campos, precisamos usar o atributo type. O trecho de código para inserir o
campo em HTML é o seguinte:
<input type=”checkbox”>
O valor do atributo type nesse
caso é “checkbox”, que significa caixa de seleção em inglês. Como esse campo
faz parte de um formulário, ele deve estar contido dentro do mesmo (entre
<form> e </form>). Veja o código completo:
<html>
<head>
<title> Exemplo </title>
</head>
<body>
<form
action="servidor.php" method="post">
<input type='checkbox'>
</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:
Notamos que só aparece um
pequeno quadrado, que é a caixa de seleção. Podemos marcar e desmarcar essa
caixa clicando nela. Porém, uma caixa de seleção sozinha, como está na imagem,
não faz muito sentido. Normalmente ela vem acompanhada de um texto, veja o
exemplo abaixo:
No exemplo acima, temos apenas
uma caixa de seleção, porém é possível inserir mais de uma caixa de seleção,
veja o exemplo abaixo:
Apareceram duas caixas de
seleção, porém a segunda apareceu na mesma linha da primeira. Como fazer então
que a segunda caixa de seleção fique abaixo da primeira? Embora existam formas
melhores de se fazer isso (usando a tag <div> por exemplo), por agora
iremos usar a tag de quebra de linha <br> para isso. Veja o exemplo
abaixo:
Após a palavra morango é
inserida a tag <br>, que faz que o conteúdo seguinte vá para a linha
debaixo.
Nesse exemplo, podemos marcar
apenas uma caixa de seleção (há pessoas que gostam de morango e não gostam de
maçã e vice-versa), marcar as duas caixas de seleção ou não marcar nenhuma (nem
todo mundo gosta destas frutas afinal). E esse é justamente o objetivo das
caixas de seleção: permitir múltiplas seleções.
Veja agora um exemplo mais
completo que usa, além das caixas de seleção, título, parágrafo e imagem:
Links dos códigos mostrados nas imagens do artigo
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