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.

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