CSS HTML

HTML: Incluir ícone dentro do input de submit

9 de junho de 2020

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.

icone no input de submit capa

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:

icone no input ex 1

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:

icone no input ex 2

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

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