Posicionando o botão de busca acima do campo para digitar o texto

Escrito por ray padgett | Traduzido por weber figueiredo
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Posicionando o botão de busca acima do campo para digitar o texto
Um botão de busca geralmente está posicionado ao lado do campo para a entrada de texto, mas isso pode ser mudado no próprio o HTML (Burke/Triolo Productions/Brand X Pictures/Getty Images)

Um campo de busca em um site geralmente tem dois componentes: o campo de texto para digitação e o botão de busca. A maior parte do código para ambos é controlada no CSS do seu site, mas o layout é em HTML. Se você pretende colocar o botão de pesquisa acima do campo de texto (em vez de colocar ao lado, onde normalmente ficaria), tudo que tem a fazer é modificar um pouco o HTML. Isso irá alterar o posicionamento sem afetar o código de pesquisa.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o arquivo HTML da página do seu site com o botão de busca.

  2. 2

    Localize a seção que inicia com "<fieldset class="search">". Esse é o código HTML que controla o campo de pesquisa.

  3. 3

    Mova a linha que começa com "<button" antes do começo da linha "<input". Isso irá colocar o botão antes da caixa de entrada (mas não acima ainda).

  4. 4

    Coloque uma "<div>" (sem aspas) antes das duas linhas.

  5. 5

    Coloque "</div>" após as duas linhas. Isso fará com que elas apareçam em duas linhas separadas.

  6. 6

    Salve o código HTML. O botão irá aparecer acima do campo de entrada.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível