Como usar Placeholder no HTML5

No comments



Nesse artigo vamos ver o funcionamento do atributo PLACEHOLDER implementado a TAGs do HTML5.
Esse atributo é usado para auxiliar o usuário no preenchimento do campo, pois ele dá uma dica do que deve ser inserido.


Quem nunca precisou colocar um valor padrão dentro do input e teve que fazer uma gambiarra, digo, adaptação técnica do tipo:

<input name=”q” value=”Search here” onfocus=”if(this.value==’Search here’)this.value=’’”>

HTML5 nos permite fazer isso de maneira muito mais elegante:

<input name=”q” placeholder=”Search here”>

Ou

<input name="pesquisar" type="search" placeholder="Pesquisar"/>






Exemplo Prático do Placeholder:



<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Placeholder, HTML5 way</title>
</head>
<body>
<input name="q" placeholder="Search here">
</body>
</html>
 

Veja Mais:

- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

 

 

 

Leia Mais »

Validar CEP com HTML5 usando Pattern

No comments



O atributo pattern nos permite definir expressões regulares de validação, sem Javascript. Aqui vamos validar o CEP:





<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>O atributo pattern</title>
</head>
<body>
<form>
<label for="CEP">CEP:
<input name="CEP" id="CEP" required pattern= "\d{5}-?\d{3}" />
</label>
<input type="submit" value="Enviar" />
</form>
</body>
</html>
 



Veja Mais:

- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

 

 

 

Leia Mais »

Colocar vídeo na página com HTML5

No comments




Vídeo

Colocar vídeo na página através do HTML5.

<video src=”video.ogv” width=”400” height=”300” />

E com vários elementos source:

O valor de controls define se um controle de vídeo, com botões de play, pause, volume, barra de progresso, contador de tempo, etc. será exibido na tela. Se for setado como “false”, será preciso controlar o player via javascript, com métodos como play() e pause(). O valor de autoplay define se o áudio vai começar a tocar assim que a página carregar.

<video controls=”true” autoplay=”true” width=”400” height=”300”>
<source src=”video.ogv” />
<source src=”video.mp4” />
<source src=”video.wmv” />
<p>Faça o <a href=”video.mp4”>download do vídeo</a>.</p>
</video>

 

Veja Mais:

- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

 

 

 

Leia Mais »

Colocar áudio na página com HTML5

No comments




Áudio

Para inserir áudio em uma página web através do HTML5, basta usar o elemento audio:

<audio src=”audio.oga” controls=”true” autoplay=”true” />

O valor de controls define se um controle de áudio, com botões de play, pause, volume, barra de progresso, contador de tempo, etc. será exibido na tela. Se for setado como “false”, será preciso controlar o player via javascript, com métodos como play() e pause(). O valor de autoplay define se o áudio vai começar a tocar assim que a página carregar.

Origens alternativas de áudio

Todo agente de usuário deveria suportar o codec livre OggVorbis, mas, infelizmente, pode acontecer de seu arquivo oga não tocar no computador ou celular de alguém. Quem sabe do seu chefe ou seu cliente. Então é preciso saber como oferecer um formato alternativo de áudio. Fazemos assim:

<audio controls=”true” autoplay=”true”>
<source src=”audio.oga” />
<source src=”audio.mp3” />
<source src=”audio.wma” />
</audio>

Claro, o agente de usuário pode ainda não saber tocar nenhum desses formatos, ou sequer ter suporte a áudio. Para esses casos, ofereça um conteúdo alternativo:

<audio controls=”true” autoplay=”true”>
<source src=”audio.oga” />
<source src=”audio.mp3” />
<source src=”audio.wma” />
<p>Faça o <a href=”audio.mp3”>download da música</a>.</p>
</audio>



Veja Mais:

- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

 

 

 

Leia Mais »

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | JCPenney Coupons