Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Introdução Aos Recursos HTML5

    Enviado por

    Jair Figueiredo
    6 visualizações12 páginas
    Slides apresentando alguns recursos do HTML5 para iniciantes

    Título original

    Introdução aos recursos HTML5

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Slides apresentando alguns recursos do HTML5 para iniciantes

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    6 visualizações12 páginas

    Introdução Aos Recursos HTML5

    Enviado por

    Jair Figueiredo
    Slides apresentando alguns recursos do HTML5 para iniciantes

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 12

    3/29/17

    HTML5: CAMPOS ESPECIAIS E VALIDAO

    <!DOCTYPE HTML>

    Identifica o tipo de documento como pgina do HTML.

    1
    3/29/17

    <html lang=pt-br>

    Html: Inicia o documento

    Lang: Define o idioma padro.

    <meta charset="utf-8">

    Define a cadeira de caracteres Unicode, genrica para

    O carregamento de texto independente do idioma.

    2
    3/29/17

    <meta name="keywords" content="| Hotel | 5 Estrelas | Sorocaba" />

    Define as palavras chave do site

    Ento o documento base fica:

    3
    3/29/17

    ELEMENTOS DE FORMULRIO COM HTML5

    HTML e os campos de formulrio formatados

    Novos valores possveis para o atributo type dos inputs que


    permitem criar tipos de campo que antes s eram obtidos com o
    auxlio de JavaScript, como calendrios e campos para seleo de
    cor.

    4
    3/29/17

    <input type=number min=1 max=10 step=1>

    Caixa numrica

    Seleo de Cor e Barra de Alcance

    <input type=color />


    Escolhe uma cor.

    <input type=range />


    Cria uma barra de alcance.

    5
    3/29/17

    Campos para e-mail e url

    <input type=email />


    Caixa especifica para E-mail.

    <input type=url />


    Caixa especifica para links.

    Campos para Data e Hora

    Caixa especifica para hora.

    <input type=hour />

    Caixa especifica para data completa.

    <input type=date />

    6
    3/29/17

    spellcheck="true"
    Corretor ortogrfico ativado, pode ser colocado em qualquer
    campo que permita a escrita como text, textarea, entre outros.

    HTML5 j est valendo?

    Para informaes tcnicas mais det alhadas sobre o HTML 5,


    consulte a document ao oficial do W3C e a listagem de
    diferenas entre o HTML5 e sua verso anterior.
    https://www.w3.org/TR/html5/

    Para conhecer mais inputs padronizados acesse:


    http://www.devmedia.com.br/novos-tipos-de-input-da-html-5/27109

    7
    3/29/17

    Prtica

    VALIDAO DE CAMPOS DE FORMULRIOS


    COM HTML5

    8
    3/29/17

    Motivao

    Quando contru mos aplicaes web, importante levarmos a


    seguran a a srio, especial mente quando essa precisa coletar
    dados dos usurios.

    No confiar em ni ngum, uma norma mxi ma de seguran a,


    portanto, nunc a confie que o usurio v inserir valores correto s e
    vlidos no formulrio.
    Por exemplo, em um campo de e-mail, em vez de inserir um endereo
    de e-mail vlido, o usurio pode digitar um e-mail invlido ou dados
    mal-intencionados, obvia mente, ignorando a indicao da requisio do
    campo.

    Validar campos ou formulrios

    Quando se trat a de validar valores de campos de formulrio s,


    isso pode ser feito no l ado do cliente (navegador) e no lado do
    servidor (usando a linguagem que preferir).

    No passado, validaes no client-side s podiam ser feitas usando


    JavaScri pt ou algumas bibliotec as de fr ame works (co mo o plugi n
    jQuery validation).
    Com o HTML5 isso mudou, no h necessidade de escrever um cdigo
    complexo de JavaScript para isso.

    9
    3/29/17

    Validao de Campos com HTML5

    HTML5 incl ui um mecanismo bastante slido na validao d e


    formulrios com base nos atri buto s da
    tag input: type, pattern e require.
    Graas a esses novos atributos, voc pode delegar algumas funes de
    verificao de dados para o navegador.

    Vamo s examinar agluns desses atributos para ver co mo eles


    podem nos ajudar na validao de um formulrio.

    O atributo type

    Esse atributo indica o tipo de controle de entrad a de dados como


    o popul ar <input type="text "> para manipula o de dado s de text o
    simples.

    10
    3/29/17

    O atributo required

    Esse um atributo booleano usado para indicar que um


    determi nando campo de formul rio obrigatrio para o envio do
    mesmo.

    Ao adicionar esse atributo a um c ampo de formul rio, o


    navegador obriga o usurio a inserir d ados naquele c ampo antes
    de enviar o formulrio.

    Exemplo

    Exemplo:
    <input name="my_name" required="" type="text"> ou
    <input name="my_name" required="required" type="text">
    para compatibilidade XHTML.

    11
    3/29/17

    Resumindo

    O suporte dos navegadores para as features de validao de


    formulrios bem grande.

    Vale a pena lembrar que confiar apenas no navegador (client-side)


    para a validao pode ser perigoso,
    pois isso pode ser contornado por um usurio mal-intencionado ou
    por bots.

    Nem todos os navegadores suportam HTML5 e nem toda entrada


    de texto enviada para seu script vir do formulrio.

    Prtica em Sala

    Crie um formulario e faa a validao dos campos.

    Deve ser impossvel enviar os dados do formulrio com o campo


    vazio, alm de verificar se o e-mail est no formato correto e
    fazer a checagem ortogrfica.

    12

    Você também pode gostar