HTML: Incluir ícone dentro do input de submit
Neste artigo vamos aprender como incluir ícone dentro do input de submit dos formulários de HTML, com uma técnica um tanto inusitada e fácil.
Fala programador(a), beleza? Bora aprender como inserir ícones em inputs!
Primeiramente é necessário esclarecer que não é tão prático adicionar ícone a uma tag input, pois eles não aceitam manipulação de HTML interna
Ou seja, não podemos adicionar elementos novos dentro de uma tag de input
Então nós executamos essa técnica fazendo uma pequena mudança, o input veria um button de type submit
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 114 aulas
- 4 projetos
- 9h 18min
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
E a tag button aceita HTML, então podemos inserir um ícone dentro e fazer qualquer submit com ícone
Veja o exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Como inserir ícone no input de submit</title>
<meta charset="utf-8">
<!-- fonte de ícones -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<div>
<h1>Preencha seu nome e clique em enviar</h1>
</div>
<form>
<div>
<input type="text" name="name" placeholder="Insira seu nome">
</div>
<div>
<button type="submit">Enviar <span class="material-icons">send</span></button>
</div>
</form>
</body>
</html>
Este é o HTML do nosso exemplo, porém veja que já resolvemos o problema:
Porém vamos fazer alguns ajustes no CSS para deixar o formulário mais profissional:
body {
margin: 50px;
font-family: Helvetica;
}
div {
margin: 20px;
}
input {
padding: 5px 15px;
width: 280px;
box-sizing: border-box;
}
button {
background-color: lightblue;
color: #FFF;
border: none;
height: 30px;
line-height: 30px;
width: 140px;
position: relative;
cursor: pointer;
}
span.material-icons {
font-size: 18px;
position: absolute;
right: 15px;
top: 6px;
}
E assim temos uma simulação parecida com alguns formulários que utilizam a técnica de ícone no input, veja:
Perceba também que utilizamos uma fonte de ícones chamada Material Icon, que é free
Você pode utilizar em seus projetos também! Veja o site deles aqui
Conclusão
Neste artigo vimos possibilidade de inserir um ícone dentro do input de submit
Como dito antes, trocamos o input por um button, pois facilita muito a manutenção do HTML e evita gambiarras desnecessárias
Pois o funcionamento se mantém o mesmo, uma vez que o button tenha o type de submit
Depois é só adicionar uma fonte de ícone de sua preferência, nesse caso utilizamos o Material Icon
E criamos o elemento de ícone dentro do botão e posicionamos ele de acordo com a nossa necessidade
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 […]
