.
Qual é a diferença
Qual é a diferença ? Não há diferença na ação dos botões de envio criados na primeira ou na segunda maneira. A diferença é que o elemento é um container, então outros elementos podem ser colocados dentro dele, como imagens ou ícones.
Você pode adicionar texto aos campos de formulário de duas maneiras:
Input::-webkit-input-placeholder ( cor: #B6C0A5; font-style: itálico; background: #E0EFCA; ) input:-moz-placeholder ( color: #B6C0A5; font-style: itálico; background: #E0EFCA; ) input:-ms-input-placeholder ( cor: #B6C0A5; estilo da fonte: itálico; plano de fundo: #E0EFCA; )
2)
Entrada (cor: branco; )
Para exibir ícones, não se esqueça de incluir .
2. Campo de pesquisa com botão ícone
* (box-sizing: border-box;) form ( position: relative; width: 300px; margin: 0 auto; ) input ( width: 100%; height: 42px; padding-left: 10px; border: 2px solid #7BA7AB ; raio da borda: 5px; contorno: nenhum; fundo: #F9F0DA; cor: #9E9C9C; ) botão ( posição: absoluto; topo: 0; direita: 0px; largura: 42px; altura: 42px; borda: nenhuma; fundo: #7BA7AB; border-radius: 0 5px 5px 0; cursor: pointer; ) button:before ( content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; ) 3. Campo de pesquisa com um botão dentro
* (tamanho da caixa: caixa de borda;) formulário ( posição: relativa; largura: 300px; margem: 0 auto; ) entrada, botão ( borda: nenhuma; contorno: nenhum; raio da borda: 3px; ) entrada ( largura: 100%; altura: 42px; fundo: #F9F0DA; preenchimento esquerdo: 15px; ) botão (altura: 26px; largura: 26px; posição: absoluta; topo: 8px; direita: 8px; fundo: #F15B42; cursor: ponteiro; ) button:before ( content: "\f105"; font-family: FontAwesome; color: #F9F0DA; font-size: 20px; font-weight: bold; ) 4. O campo de pesquisa no estilo "flat"
* (box-sizing: border-box;) form ( posição: relativa; largura: 300px; margin: 0 auto; background: #A3D0C3; ) input, button ( border: none; outline: none; background: transparente; ) input ( largura: 100%; altura: 42px; preenchimento esquerdo: 15px; ) botão (altura: 42px; largura: 42px; posição: absoluto; topo: 0; direita: 0; cursor: ponteiro; ) botão:antes ( conteúdo: "\f002"; família de fontes: FontAwesome; tamanho da fonte: 16px; cor: #F9F0DA; ) 5. Caixa de pesquisa com borda inferior grossa
* (box-sizing: border-box;) form ( position: relative; width: 300px; margin: 0 auto; background: #F9F0DA; border-bottom: 4px solid #be290e; ) input, button ( border: none; contorno : nenhum; fundo: transparente; ) entrada ( largura: 100%; altura: 42px; preenchimento esquerdo: 15px; ) botão (altura: 42px; largura: 42px; posição: absoluto; topo: 0; direita: 0; cursor: pointer; ) button:before ( content: "\f178"; font-family: FontAwesome; font-size: 20px; color: #be290e; ) 6. Campo de pesquisa com mudança de cor da borda
* (box-sizing: border-box;) form ( posição: relativa; largura: 300px; margem: 0 auto; ) entrada, botão ( contorno: nenhum; fundo: transparente; ) entrada ( largura: 100%; altura: 42px ; padding-left: 15px; border: 3px solid #F9F0DA; ) botão ( border: none; height: 42px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; ) button:before ( content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; ) input:focus ( border-color: #311c24; ) 7. Caixa de pesquisa deslizante
O campo de pesquisa aparece quando você clica no botão ícone.
* (tamanho da caixa: caixa de borda;) formulário ( posição: relativa; largura: 300px; margem: 0 auto; altura: 42px; ) entrada (altura: 42px; largura: 0; preenchimento: 0 42px 0 15px; borda: nenhum; borda inferior: transparente sólido de 2px; contorno: nenhum; plano de fundo: transparente; transição: 0,4s cubic-bezier(0, 0,8, 0, 1); posição: absoluto; topo: 0; direita: 0; z-index : 2; ) input:focus ( largura: 300px; z-index: 1; border-bottom: 2px sólido #F9F0DA; ) botão ( plano de fundo: #683B4D; borda: nenhuma; altura: 42px; largura: 42px; posição: absoluta ; top: 0; right: 0; cursor: pointer; ) button:before ( content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; )8. Aumentando o campo de pesquisa
* (box-sizing: border-box;) form ( largura: auto; float: right; margin-right: 30px; ) input ( largura: 250px; height: 42px; padding-left: 15px; border-radius: 42px; borda: 2px sólido #324b4e; plano de fundo: #F9F0DA; contorno: nenhum; posição: relativa; transição: .3s linear; ) entrada: foco ( largura: 300px; ) botão ( largura: 42px; altura: 42px; plano de fundo: nenhum; borda: nenhuma; posição: absoluta; topo: -2px; direita: 0; ) botão:antes(conteúdo: "\f002"; família de fontes: FontAwesome; cor: #324b4e; ) Neste tutorial, criaremos um formulário de pesquisa suspenso que se encaixa perfeitamente no design da interface para dispositivos móveis. Somente CSS será usado para implementar o elemento - sem JavaScript ou marcação adicional. Uma maneira simples e eficiente de implementar um formulário de pesquisa compacto.
Objetivo
Em dispositivos móveis, cada pixel conta. Para minimizar a quantidade de espaço necessária para exibir o formulário, ele será exibido inicialmente de forma compacta e expandido quando receber o foco de entrada (:focus ). Essa abordagem permite economizar espaço para outros elementos e conteúdo da interface.
Marcação HTML
O formulário usa HTML5. O código é muito simples:
Redefinindo a exibição de formulário de pesquisa padrão em navegadores Webkit
Por padrão, em navegadores Webkit, o formulário de pesquisa terá a seguinte aparência:
Para que o formulário de pesquisa pareça um campo de entrada de texto normal, você precisa adicionar os seguintes estilos:
Input ( -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: herdar; font-size: 100%; ) input::-webkit-search-decoration, input::-webkit- botão de cancelamento de pesquisa ( display: nenhum; )
Construindo nosso formulário de pesquisa
O campo de entrada terá uma largura regular de 55px e expandirá para 130px no estado :focus. A propriedade de transição é usada para animação e sombra de caixa é usada para o efeito de brilho.
Entrada ( plano de fundo: #ededed url(img/search-icon.png) sem repetição 9px centro; borda: 1px sólido #ccc; preenchimento: 9px 10px 9px 32px; largura: 55px; /* Largura padrão */ -webkit- border -radius: 10em; -moz-border-radius: 10em; border-radius: 10em; -webkit-transition: todos os .5s; -moz-transition: todos os .5s; transição: todos os .5s; ) input:focus ( largura : 130px; /* Largura com foco de entrada */ background-color: #fff; border-color: #6dcff6; -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box- shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); /* efeito de brilho */ )
Exemplo B
No exemplo B, o formulário de pesquisa é significativamente minimizado - apenas o ícone é exibido sem preencher o texto. Observe que as propriedades de preenchimento e largura do campo de pesquisa foram alteradas para formar um botão redondo. A propriedade color:transparent é usada para tornar o texto invisível.
#demo-b input ( largura: 15px; padding-left: 10px; cor: transparente; cursor: ponteiro; ) #demo-b input:hover ( background-color: #fff; ) #demo-b input:focus ( largura : 130px; padding-left: 32px; color: #000; background-color: #fff; cursor: auto; )
Compatibilidade do navegador
O método descrito funciona em todos os principais navegadores: Chrome, Firefox, Safari e IE8+. No IE7 e em navegadores mais antigos, a funcionalidade não funciona devido à falta de suporte para a pseudoclasse :focus e o tipo de campo de pesquisa.
Para muitas pessoas, a eficácia da busca de informações na Internet são as próprias pernas que alimentam o lobo. Onde posso encontrar informações atualizadas e atualizadas? Onde comprar mais barato e vender mais caro? Onde posso encontrar as instruções mais precisas para executar determinadas tarefas? Onde assistir filmes online? Para responder a essas e outras perguntas semelhantes dos usuários da maneira mais correta possível, os mecanismos de pesquisa aprimoram ano a ano os já sofisticados mecanismos de apresentação de sites nos resultados de pesquisa para consultas específicas de usuários. O objetivo dos motores de busca é levar as pessoas ao melhor site possível para obter respostas às suas perguntas.
Além dos motores de busca, os próprios motores de busca estão equipados com filtros de pesquisa para que qualquer utilizador possa restringir o âmbito da pesquisa de informação ou especificar o seu pedido.
Veja abaixo algumas das extensões de busca que podem ser adicionadas aos navegadores populares e, como resultado, aumente a eficiência da busca de informações na Internet.
Extensões de pesquisa para o Google Chrome
Pesquisar no site atual
Nem todo site está equipado com um mecanismo de pesquisa interno e, nesses recursos, você precisa correr de seção em seção por um longo tempo em busca de informações específicas. A extensão do navegador para pesquisar dentro do site é uma ferramenta universal que estará sempre à mão, não importa qual site você acesse. Tudo o que você precisa fazer para encontrar as informações necessárias dentro de um site é inserir uma consulta chave em um pequeno campo de pesquisa que aparece quando você clica no botão de extensão no painel do navegador.
Os resultados da pesquisa do mecanismo de pesquisa serão abertos em uma nova guia do navegador e as páginas de um site específico onde a palavra-chave ocorre serão selecionadas neles.
A pesquisa do site atual é incorporada a um mecanismo de pesquisa do Google pré-instalado, mas você pode definir outro mecanismo de pesquisa nos parâmetros de extensão - Yandex, Yahoo ou Bing. Para fazer isso, chame o menu de contexto no botão de extensão e selecione o comando "Parâmetros".
As opções de extensão serão abertas em uma nova guia do navegador, onde podemos selecionar um mecanismo de pesquisa diferente. E já ela vai pesquisar dentro do site.
Pesquisa alternativa do Google
O mecanismo de pesquisa Yandex inicialmente oferece a capacidade de pesquisar informações em dois outros mecanismos de pesquisa - Google e Bing - com um clique, embora os links para acessar esses mecanismos de pesquisa, juntamente com a consulta de chave inserida, se agrupem na parte inferior do página de resultados de pesquisa.
Mas o Google é mais egoísta a esse respeito - em seus resultados de pesquisa não há menção aos mecanismos de pesquisa concorrentes. Você pode corrigir essa situação implementando a extensão Pesquisa alternativa do Google Chrome no Google Chrome.
Em vez de digitar constantemente o apêndice da palavra-chave “torrent” toda vez para obter resultados de pesquisa para rastreadores de torrent, é mais fácil instalar uma extensão especial para esses fins TMS (Torrents MultiSearch).
O botão de extensão está embutido na barra de ferramentas do navegador e, quando clicado, um pequeno campo de pesquisa será aberto para inserir uma consulta.
Os resultados da pesquisa aparecem em uma guia separada, e este será o conteúdo encontrado apenas em rastreadores de torrent Runet, e não em sites warez, software e portais de mídia ou sites oficiais.
Nos resultados da pesquisa de rastreadores de torrent, o conteúdo encontrado pode ser filtrado por tamanho de arquivo ou data de upload. Você pode especificar palavras-chave adicionais para restringir sua pesquisa.
Os resultados da pesquisa também podem ser visualizados separadamente para rastreadores de torrent específicos e separadamente para tipos de conteúdo como filmes, música, software.
Além disso, a extensão TMS está incorporada no menu de contexto do navegador para que você possa enviar qualquer palavra ou frase destacada nas páginas da Internet para a pesquisa de rastreadores de torrent sem muito problema em copiar e colar.
Pesquisa de contexto
O Google Chrome implementou uma função de pesquisa contextual usando um mecanismo de pesquisa instalado no navegador padrão. Para aumentar o número de mecanismos de pesquisa com os quais você pode pesquisar qualquer palavra selecionada nas páginas dos sites, destina-se a extensão "Pesquisa de contexto".
A extensão inicialmente tem a capacidade de pesquisar o rastreador de torrent mais popular RuTracker, Wikipedia e o portal de mídia Kinopoisk.Ru.
Outros motores de busca, para que através deles seja possível buscar informações diretamente do menu de contexto do navegador, são adicionados nos parâmetros de extensão. Abra o menu do Google Chrome, selecione "Configurações" e vá para a seção de extensões instaladas no navegador.
Na lista de extensões, selecione a que precisamos - "Pesquisa de contexto". Clique no link "Configurações".
Extensões de pesquisa para o Opera
Pesquise dentro do site
O botão de extensão está localizado na barra de ferramentas do navegador e, clicando nele, você pode acessar o campo de pesquisa para inserir uma consulta-chave, bem como alterar o mecanismo de pesquisa.
O Yandex e o Google pré-instalados nas configurações de extensão podem ser complementados com outros mecanismos de pesquisa. Chame o menu de contexto no botão de extensão e selecione o comando “Configurações”.
Da mesma forma que no caso da extensão Context Search para Google Chrome, para adicionar um novo mecanismo de pesquisa, você deve inserir sua string de URL.
Pesquisa múltipla de torrents
Pesquisas de imagens semelhantes
A pesquisa de imagens semelhantes adiciona um comando adicional ao menu de contexto do navegador Opera para pesquisar imagens semelhantes usando vários mecanismos de pesquisa.
Ou será apresentada uma lista de publicações com fotos semelhantes.
Extensões de pesquisa para o Mozilla Firefox
Pesquisa de sites
Como nos dois casos anteriores, também existe uma extensão especial para pesquisa dentro de qualquer site da Internet para o navegador Mozilla Firefox.
Somente no caso do Fire Fox, a pesquisa do site é incorporada no campo de pesquisa existente do navegador, adicionando seu ícone na forma de uma lupa vermelha na frente do ícone de pesquisa normal.
Alterar o mecanismo de pesquisa padrão para a pesquisa regular do Mozilla Firefox implica também alterar o mecanismo de pesquisa para pesquisar em sites.
A extensão Site Search está integrada ao menu de contexto do Mozilla Firefox, e selecionando qualquer palavra que vier à mão, você pode ver todas as páginas do site onde esta palavra está presente em resultados de busca separados.
Pesquisar por byffox
Quaisquer produtos de software com esses nomes “ainda não amadurecidos”, como regra, incomodam muitos usuários pelo fato de nem mesmo sugerirem o objetivo pretendido do kit de ferramentas proposto.
E você tem que aprender exatamente o que "Softina de Vasya" ou "Repak jogado de Petya" oferece somente após um conhecimento detalhado da descrição. No entanto, por trás de um nome tão frívolo como "Pesquisar por byffox" está uma funcionalidade útil e inteligente. Esta extensão permite reabastecer o menu de contexto do navegador com um comando de pesquisa adicional para a palavra selecionada usando vários mecanismos de pesquisa.
nome da chave do parâmetro. Para o campo de pesquisa, "q" ou "texto" é mais comumente usado. valor da chave do parâmetro. Na maioria das vezes não é definido. O usuário pode alterá-lo para seu próprio texto se os atributos readonly e disabled não forem especificados. modificação do usuário bloqueado acesso bloqueado, modificação do usuário e transferência de dados do campo de parâmetro atual não pode ser modelo de entrada vazio como em js expressões regulares , que deve ser seguido para enviar o formulário o número mínimo de caracteres necessários para enviar o formulário o número máximo de caracteres que o usuário pode digitar o comprimento do campo em caracteres dica de esboço
dica de ferramenta ao passar o mouse autocompletar. Os navegadores modernos mostram termos de pesquisa inseridos anteriormente no domínio atual. Você pode desativá-lo ou torná-lo mais específico. uma lista de consultas recomendadas é verificada para campos de foco de ortografia e gramática (ou seja, o período entre clicar em um elemento e clicar fora do elemento) obtido quando o documento é carregado
Remova a cruz “Limpar” no campo de pesquisa, que exclui o texto digitado anteriormente
Como funciona o formulário de pesquisa no site
O código HTML mais simples
Se você digitar no campo "pergunta" e clicar no botão "Localizar", o endereço da página mudará de "http://site/2011/06/forma-poiska-po-saitu..html ?texto=pergunta ", assim acontece quando você clica em um link . Quando a página é carregada, o script verifica o dado parâmetros em URL e quando são encontrados, gera e exibe os resultados da pesquisa para o site.
Mas para aumentar a velocidade de carregamento do documento, o script que processa a solicitação geralmente é colocado em apenas uma página do site, para a qual será redirecionado caso seu endereço esteja escrito no atributo action: “ http://site/pesquisa/ ?texto=pergunta.
Para que o script funcione, podem ser necessários parâmetros adicionais, que são especificados em searchid=808327 &text=pergunta.
Abra o resultado do formulário em uma nova aba com atributo de destino
Onde posso obter o script de pesquisa do site?
Você pode usar
A opção mais fácil é redirecionar a solicitação para o Google:
Texto do botão: "Pesquisar", "Pesquisar", "Localizar"
Das palavras motivadoras, "Encontrar" tem uma forma perfeita e implica que o resultado da pesquisa será necessariamente positivo.
