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
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 114 aulas
- 4 projetos
- 9h 18min
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:
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
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Tags HTML: comandos e códigos básico a avançado
O conhecimento das principais tags HTML é vital para qualquer programador front-end, pois elas são a base da estrutura de qualquer página web. O HTML […]
Como fazer um select mudar de URL/link
Como fazer input de password com olho de mostrar senha
O que é o input type password? Antes de sair codando, bora entender a base O input type password é o campo de senha do […]
eu estou estudando programação e preciso de umas informações