Inserindo ícones SVG nos inputs dos formulários - HTML5 e CSS

21/10/2017

Nessa vídeo-aula vamos aprender como inserir um ícone svg dentro do nosso input text, fazendo um efeito bacana.

HTML

No nosso html vamos criar o formulário e a div que vai abrigar nosso ícone.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Ícones SVG nos inputs</title>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <form method="post" action="ControllerBusca.php">
        <div class="blocoIcones">
            <input type="text" id="campo" name="campo" placeholder="Encontre o que procura...">
            <button><?php include("img/magnifier.svg"); ?></button>
        </div>
    </form>
</body>
</html>

CSS

No CSS vamos estilizar nosso formulário.

*{margin: 0; padding: 0; box-sizing: border-box;}

.blocoIcones{float:left; width: 30%; height: 40px; margin: 100px; border: 1px solid #ccc; border-radius: 5px;}
    .blocoIcones input[type='text']{float:left; width: 80%; height: 100%; border:none; border-radius: 5px; padding: 0 5px;}
    .blocoIcones button{float:left; width: 20%; height: 100%; background: #999; border:none; border-radius: 0 5px 5px 0; cursor: pointer;}
    .blocoIcones svg{width: 70%; height: 70%; fill: #555;}
    .blocoIcones button:hover svg{fill:#000;}

PHP

Vamos criar uma class php apenas para fazer um teste de uso do formulário:

<?php
class ControllerBusca{

    public function __construct()
    {
        echo $_POST['campo'];
    }
}
$new = new ControllerBusca();

Ícones SVG

Os ícones SVG podem ser encontrados facilmente no site FlatIcon

O código acima é facilmente reutilizado, atentando apenas pra trocar os ids usados.

�? isso, sucesso nos códigos e na vida!

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Validação de Email em 03 Camadas

Nesse vídeo-tutorial vamos aprender como realizar a validação de um campo de email em três camadas utilizando HTML5, JQuery e PHP.

Editor Wysiwyg com Upload de Fotos - #1 Instalação

Neste vídeo-tutorial vamos aprender como desenvolver um editor completo com upload de fotos, toolbar e otimizações, além da inserção dos dados no banco.

HTML5

HTML5 é a linguagem de marcação da codificação do website. Em claro português, HTML é a base em que virão todos os outros os códigos que farão a composição do website