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
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