Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

O valor search da HTML5

Publicado em: 2011-03-11 — 16.675 visualizacoes

Estou escrevendo o capítulo 6 do livro HTML5 a ser lançado no mês de junho 2011 próximo. O capítulo 6 é dedicado aos formulários HTML que ganharam novas e muito bem-vindas funcionalidades, destacando-se aquelas dedicadas a validação nativa de controles e os 13 novos valores para o atributo type dos controles input que se juntam aos 10 já existentes na HTML4.

Ao escrever o item 6.3.1 que trata do valor search resolvi fazer um pequeno “break” e transcrever aquele item do livro oferecendo-o aos meus leitores como “aperitivo”. Vamos à transcrição:

6.3.1 search

Destina-se a definir um controle input do tipo busca. O efeito deste valor no atributo type é alterar a estilização e comportamento do controle diferenciando-o dos demais controles input. O modo como o controle é estilizado e seu comportamento fica por conta do fabricante do navegador.

Por exemplo: o navegador Chrome 9.0, que hoje oferece suporte para esse atributo, apresenta uma letra “x” à direita da área de digitação do controle que se destina a fazer desaparecer o texto colocado como placeholder com uso do atributo value quando o usuário dá o foco ao controle. Não sendo definido o placeholder a letra “x” aparece tão logo o usuário comece a digitar no controle.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor para o atributo type de controles input usando dois campos: um com e outro sem placeholder.

 
<h3>Com placeholder</h3>
	<input name="q" type="search" value="palavra-chave">
<h3>Sem placeholder</h3>
	<input name="q" type="search">

Para visualizar o exemplo funcionando abra essa página no navegador Chrome.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2011-03-11 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2011/03/11/o-valor-search-da-html5/trackback no seu site.

10 comentários na matéria: “O valor search da HTML5”

  1. mifrithNo Gravatar disse:

    Boa noite alguém me consegue dizer como meto um botão search no meu site a bulir

  2. Vinicius da SIlvaNo Gravatar disse:

    Adoro os Livros …
    Principalmente o de CSS.(X)HTML
    Este livro HTML5 concertesa vai ser fora do Normal.
    Como sempre só os melhores..

    Att,

    Vinicius da Silva
    Admin – ViverVirtual

    ViverVirtual

  3. RaphaelNo Gravatar disse:

    caramba, sou fã dos seus posts, espero um dia ter metade do seu conhecimento… eu criei um blog de programação, o raphael-proflife.blogspot.com, dedico a explicar linguagens do básico até o avançado, abri tem 3 dias, da uma olhada e mande críticas, to aberto a parcerias, preciso de ajuda de alguém pra manter sempre atualizado.

  4. Pablo redesNo Gravatar disse:

    mais uma super dica
    valeo

  5. Guido FawkesNo Gravatar disse:

    Muito bom post, parabéns.

  6. Jucieny DantasNo Gravatar disse:

    Eu tenho curiosidade sobre os assuntos que você pretende abordar no seu novo livro. Você vai abordar tambem a utilização de canvas? Ou o livro será afundo sobre as tags e atributos novos?
    Estou ansiosa pelo livro, adorei o seu livro sobre jQuery.

  7. Renan BassoNo Gravatar disse:

    Estou adorando seu livro de jQuery… Descobri seu blog faz pouco tempo e estou acompanhando diariamente! html5 sera um otimo livro e como sugestao seria php!

  8. Fabio OliveiraNo Gravatar disse:

    Acredito que o html 5 ainda trará muita dor-de-cabeça. Tanto na adaptação dos profissionais como da padronização.
    Que bom que temos boas leituras sobre.

    Parabéns pelo livro 🙂

  9. Mayron CachinaNo Gravatar disse:

    Legal, o html 5 realmente vai trazer bastante novidades, mais espero que não de tanta dor de cabeça como temos hoje com a diferença dos navegadores….

  10. Breno CalazansNo Gravatar disse:

    Muito ansioso para ler esse livro!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo