HTML

HTML: Como deixar um radio selecionado

10 de março de 2020

HTML: Como deixar um radio selecionado

Neste artigo veremos como deixar um radio selecionado, ou seja, quando a página for carregada nosso radio button do formulário já estará marcado, como opção default.

radio button selecionado capa

Fala programador(a), tudo bem? Bora aprender coisa nova?

Diversas vezes temos opções no nosso formulário que são muito mais escolhidas que as outras, ou até mesmo uma opção padrão

Então por questão de usabilidade é uma boa prática já vir com essa opção selecionada

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E isso pode ser aplicado no HTML tanto no radio button como também na checkbox, a partir de um atributo chamado checked

Ele vai fazer com que quando a página seja carregada, a opção que está com o atributo seja automaticamente selecionada, legal né? 😀

Veja o código a seguir:

<!DOCTYPE html>
<html>
<head>
    <title>Como deixar um radio selecionado</title>
</head>
<body>
<form>
    <p>Seleciona sua marca favorita:</p>
    <div>
        <input type="radio" id="adidas" name="brand" value="adidas">
        <label for="adidas">Adidas</label>
    </div>
    <div>
        <input type="radio" id="nike" name="brand" value="nike" checked>
        <label for="nike">Nike</label>
    </div>	
    <div>
        <input type="radio" id="puma" name="brand" value="puma">
        <label for="puma">Puma</label>
    </div>
    <div>
        <input type="submit" value="Enviar">
    </div>
</form>
</body>
</html>

O resultado será o seguinte:

radio button selecionado exemplo

Veja que a opção selecionada foi Nike, que é a segunda da lista e contém o atributo checked

Esta mesma técnica pode ser utilizada para o checkbox, da mesma forma, utilizando o atributo nas opções desejadas

Uma vez que o checkbox permite mais de uma seleção

Conclusão

Vimos neste artigo como deixar um input de radio ou checkbox já selecionado no carregamento de página

Conseguimos essa função por meio do atributo checked

Que funciona da seguinte maneira: ao carregar a página o HTML procura quais opções tem o atributo e as seleciona para o usuário automaticamente

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x