O que são botões de opção HTML?

Em um documento HTML (HyperText Markup Language), os botões de opção são um tipo de elemento visual que pode ser selecionado por um usuário. Os botões de opção HTML são exclusivos, porque oferecem ao usuário várias opções, mas permitem que uma das opções especificadas seja selecionada a qualquer momento. Um dos usos mais comuns dos botões de opção HTML é capturar uma opção nos formulários de entrada do usuário, embora eles também possam ter seus eventos de seleção e desmarcação interceptados por scripts ou outros programas, permitindo que eles atuem como seletores instantâneos para outros elementos em uma página da web. Com o uso de folhas de estilo em cascata (CSS) e JavaScript®, os botões de opção HTML podem usar imagens personalizadas para exibição, substituindo a aparência padrão. Exemplos de situações em que os botões de opção HTML podem ser usados ​​incluem a seleção de um sexo, que pode ter apenas um valor entre duas opções diferentes, ou a escolha de um único endereço de entrega quando vários endereços estiverem listados.

Em alguns aspectos, os botões de opção HTML são semelhantes às caixas de seleção HTML. Cada botão recebe uma imagem ou rótulo de texto que é exibido onde o botão está localizado em um layout. Ao lado desse rótulo, há um círculo vazio quando o botão de opção não está selecionado e possui um ponto ou outro padrão de preenchimento ao ser selecionado. Um usuário pode clicar no círculo para selecioná-lo; o aspecto exclusivo dos botões de opção HTML é que, quando um botão é selecionado, todos os outros botões do mesmo grupo são desmarcados, permitindo que apenas um item seja escolhido por vez. Isso é diferente das caixas de seleção, que são semelhantes, mas permitem que qualquer número de opções seja selecionado ao mesmo tempo.

Existem dois valores nas propriedades dos botões de opção HTML que são importantes para seu uso. O primeiro é o campo de nome que identifica o grupo ao qual um botão de opção pertence a um documento HTML e o segundo é o campo de valor. Quando um botão é selecionado, todos os outros botões de opção com o mesmo nome, também chamados de grupo, são desmarcados. O uso de nomes de grupos diferentes permite que diferentes conjuntos de botões de opção existam no mesmo documento. A tag value é o valor de retorno real do botão de opção quando ele é selecionado e enviado a um script ou programa para processamento.

A exibição visual dos botões de opção HTML pode ser modificada de algumas maneiras. Com o uso de valores padrão de alinhamento HTML e CSS, os botões podem ser organizados dinamicamente em um documento da mesma maneira que uma imagem é alinhada. A aparência dos botões, especificamente o círculo e as imagens selecionadas, pode ser completamente customizada e substituída por imagens geradas pelo usuário, manipulando o DOM (Document Object Model) com CSS e JavaScript®, embora o suporte ao navegador nem sempre seja consistente em um aplicativo para outro.