Embed Size (px)
Citation preview
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 eram feitas em javascript● Veja o seguinte código:
18/03/15
Versões anteriores
<form method="post" action="">
Nome:<input name="nome" type=”text” >
<input type=”submit” value="OK">
</form>
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>
18/03/15
HTML5 - Label
● <label for="nome">Nome: </label>
● A tag label cria um identificador visual que acompanha o item de formulário.
18/03/15
HTML5 - required
● <input id="nome" type=text required>
● Informa que elemento do formulário é de preenchimento obrigatório.
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.
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.
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.
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 do navegador.
● autocomplete=”off” impede este efeito.
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>
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
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.
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.
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.→
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="img" multiple>
Permite selecionar mais de um arquivo e inserir no formulário.
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.
