HTML
A alma da internet
Prof. Mauro Duarte
18/03/15
Versões anteriores
● Nas versões anteriores ao HTML5 o HTML não
tinha poder de fazer validações.
● As validações ...
18/03/15
Versões anteriores
<form method="post" action="">
Nome:<input name="nome" type=”text” >
<input type=”submit” valu...
18/03/15
Versões anteriores
Para valida-lo seria necessário um script como este:
● <script language="JavaScript" >
● funct...
18/03/15
HTML5 - Label
● <label for="nome">Nome: </label>
● A tag label cria um identificador visual que
acompanha o item ...
18/03/15
HTML5 - required
● <input id="nome" type=text required>
● Informa que elemento do formulário é de
preenchimento o...
18/03/15
HTML5 - email
● <input name="email" type=”email” required>
● Informa que elemento do formulário é um e-
mail exig...
18/03/15
HTML5 - URL
● <input name="site" type=”url” >
● Informa que elemento do formulário é uma url
exigindo a digitação...
18/03/15
HTML5 - pattern
● <input name="cep" pattern="[0-9]{5}-[0-9]
{3}">
● O atributo pattern define um expressão
regula...
18/03/15
HTML5 - pattern
● <input name="tel" pattern="([0-9]{2})[s][0-
9]{4}-[0-9]{4}">
● (xx) xxxx-xxxx
18/03/15
HTML5 - autocomplete
● autocomplete=”on” preenche novamente o
formulário caso o usuário retorne pelo botão voltar...
18/03/15
HTML5 - autocomplete
● <form autocomplete="on">
● Nome:<input type="text" name="fname"><br>
● E-mail: <input type...
18/03/15
HTML5 - autofocus
● Nome:<input type="text" name="fname" autofocus>
● autofocus seleciona um campo e leva o curso...
18/03/15
HTML5 - formaction
● <form action="demo_form.asp">
● Nome: <input type="text" name="fname"><br>
● <input type="su...
18/03/15
HTML5 - formmethod
● <form action="demo_form.asp" method=”get”>
● Nome: <input type="text" name="fname"><br>
● <i...
18/03/15
HTML5 - formtarget
● <form action="demo_form.asp" method=”get”>
● Nome: <input type="text" name="fname"><br>
● <i...
18/03/15
HTML5 – file
● Selecione o arquivo: <input type="file" name="img">
Insere arquivos no formulário.
18/03/15
HTML5 – file + multiple
● <form enctype="multipart/form-data" >
● Selecione o arquivo: <input type="file" name="i...
18/03/15
HTML5 – placeholder
● <input type="text" name="fname"
placeholder="Nome">
Preenche com texto desfocado que se apa...
Próximos SlideShares
Carregando em…5
×

5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)

827 visualizações

Publicada em

5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
827
No SlideShare
0
A partir de incorporações
0
Número de incorporações
269
Ações
Compartilhamentos
0
Downloads
30
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)

  1. 1. HTML A alma da internet Prof. Mauro Duarte
  2. 2. 18/03/15 Versões anteriores ● Nas versões anteriores ao HTML5 o HTML não tinha poder de fazer validações. ● As validações eram feitas em javascript ● Veja o seguinte código:
  3. 3. 18/03/15 Versões anteriores <form method="post" action=""> Nome:<input name="nome" type=”text” > <input type=”submit” value="OK"> </form>
  4. 4. 18/03/15 Versões anteriores Para valida-lo seria necessário um script como este: ● <script language="JavaScript" > ● function enviardados(){ ● if(document.dados.tx_nome.value=="" || document.dados.tx_nome.value.length < 8) ● { alert( "Preencha campo NOME corretamente!" ); ● document.dados.tx_nome.focus(); ● return false; } ● </script>
  5. 5. 18/03/15 HTML5 - Label ● <label for="nome">Nome: </label> ● A tag label cria um identificador visual que acompanha o item de formulário.
  6. 6. 18/03/15 HTML5 - required ● <input id="nome" type=text required> ● Informa que elemento do formulário é de preenchimento obrigatório.
  7. 7. 18/03/15 HTML5 - email ● <input name="email" type=”email” required> ● Informa que elemento do formulário é um e- mail exigindo a digitação de um único arroba (@) entre 2 cadeias de caracteres.
  8. 8. 18/03/15 HTML5 - URL ● <input name="site" type=”url” > ● Informa que elemento do formulário é uma url exigindo a digitação de um endereço como http://www.site.com.
  9. 9. 18/03/15 HTML5 - pattern ● <input name="cep" pattern="[0-9]{5}-[0-9] {3}"> ● O atributo pattern define um expressão regular para definir o que é aceito ou não.
  10. 10. 18/03/15 HTML5 - pattern ● <input name="tel" pattern="([0-9]{2})[s][0- 9]{4}-[0-9]{4}"> ● (xx) xxxx-xxxx
  11. 11. 18/03/15 HTML5 - autocomplete ● autocomplete=”on” preenche novamente o formulário caso o usuário retorne pelo botão voltar do navegador. ● autocomplete=”off” impede este efeito.
  12. 12. 18/03/15 HTML5 - autocomplete ● <form autocomplete="on"> ● Nome:<input type="text" name="fname"><br> ● E-mail: <input type="email" name="email" autocomplete="off"><br> ● <input type="submit"> ● </form>
  13. 13. 18/03/15 HTML5 - autofocus ● Nome:<input type="text" name="fname" autofocus> ● autofocus seleciona um campo e leva o cursor para ele, só deve haver um autofocus por formulário/página
  14. 14. 18/03/15 HTML5 - formaction ● <form action="demo_form.asp"> ● Nome: <input type="text" name="fname"><br> ● <input type="submit" value="Enviar"><br> ● <input type="submit" formaction="demo_admin.asp" ● value="Enviar como Adm"> ● </form> ● Formaction permite criar um botão de envio paralelo, para enviar o formulário para outro arquivo que irá tratar a solução.
  15. 15. 18/03/15 HTML5 - formmethod ● <form action="demo_form.asp" method=”get”> ● Nome: <input type="text" name="fname"><br> ● <input type="submit" value="Enviar"><br> ● <input type="submit" formaction="demo_admin.asp" ● formmethod=”post” value="Enviar como Adm"> ● </form> ● Formmethod permite criar um botão de envio paralelo, para enviar o formulário através de outro meio.
  16. 16. 18/03/15 HTML5 - formtarget ● <form action="demo_form.asp" method=”get”> ● Nome: <input type="text" name="fname"><br> ● <input type="submit" value="Enviar"><br> ● <input type="submit" formaction="demo_admin.asp" ● formmethod=”post” value="Enviar como Adm" formtarget=”_BLANK”> ● </form> Formtarget permite criar um botão de envio paralelo, para enviar o formulário para um outro alvo. O alvo pode ser _BLANK Nova página/aba→ _SELF mesmo frame→ _PARENT frame acima→ _TOP Mesma janela sem frames.→
  17. 17. 18/03/15 HTML5 – file ● Selecione o arquivo: <input type="file" name="img"> Insere arquivos no formulário.
  18. 18. 18/03/15 HTML5 – file + multiple ● <form enctype="multipart/form-data" > ● Selecione o arquivo: <input type="file" name="img" multiple> Permite selecionar mais de um arquivo e inserir no formulário.
  19. 19. 18/03/15 HTML5 – placeholder ● <input type="text" name="fname" placeholder="Nome"> Preenche com texto desfocado que se apaga ao clicar e não é enviado junto com o formulário, a validação considera este campo vazio.

×