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

1. HTML
A alma da internet
Prof. Mauro Duarte

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. 18/03/15
Versões anteriores
<form method="post" action="">
Nome:<input name="nome" type=”text” >
<input type=”submit” value="OK">
</form>

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. 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. 18/03/15
HTML5 - required
● <input id="nome" type=text required>
● Informa que elemento do formulário é de
preenchimento obrigatório.

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. 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. 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. 18/03/15
HTML5 - pattern
● <input name="tel" pattern="([0-9]{2})[s][0-
9]{4}-[0-9]{4}">
● (xx) xxxx-xxxx

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. 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. 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. 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. 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. 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. 18/03/15
HTML5 – file
● Selecione o arquivo: <input type="file" name="img">
Insere arquivos no formulário.

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. 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.