Forums » HTML & HTML 5

A evolução dos formulários em HTML 5

    • 467 posts
    15 de julho de 2013 01:30:09 ART

    A evolução dos formulários em HTML 5

     

    HTML 5 é a mais nova versão da linguagem de marcação de hipertexto utilizada para montagem de páginas web, ela ainda não é suportada por todos os navegadores disponíveis no mercado, o que é uma pena, mas é bom tomar conhecimento dessa evolução da HTML...

     

    HTML 5 é a mais nova versão da linguagem de marcação de hipertexto utilizada para montagem de páginas web, ela ainda não é suportada por todos os navegadores disponíveis no mercado, o que é uma pena, mas é bom tomar conhecimento dessa evolução da HTML, assim quando os navegadores começarem a dar suporte você já estará pronto para usufruir dos recursos da linguagem e aumentar a produtividade no seu trabalho. Agora que você já sabe um pouco sobre o que é HTML 5, vamos ao que interessa.

    Nessa nova versão da HTML os formulários ganharam recursos muito interessantes e importantes para otimização do trabalho. Por exemplo, é possível fazer validação de campos sem o uso de JavaScript, fazer validação através de ER (expressões regulares) diretamente no código HTML entre muitas outras.

    Vejamos algumas novidades da HTML 5 para uso nos formulários.

    TIPOS DE CAMPO


    Data e Hora
    Esse campo abre um calendário para escolher a date e ainda é possível setar a hora.

    <input name="calendario" type="datetime"/>



    Tempo
    Campo utilizado para setar hora e minuto.

    <input name="hora" type="time"/>



    Semana
    Abre um campo onde é possível selecionar ano e dia, e escolhendo o dia ele armazena o ano e a semana.

    <input name="semana" type="week"/>



    Números
    Esse campo permite adicionar somente números como valores, e ainda é possível limitar os valores mínimo e máximo a serem inseridos, utilizando os atributos min e max.

    <input name="numero" type="number"/>



    Telefone
    Esse campo permite adicionar um número de telefone e ele fará a validação automaticamente, porém eu vejo um problema, já que o formato dos números telefônicos não é um padrão mundial, alguns países possuem mais dígitos do que os telefones aqui do Brasil por exemplo, então essa validação é um pouco falha.

    <input name="telefone" type="tel"/>



    URL
    Exibe um campo com validação para a inserção de URLs.

    <input name="site" type="url"/>



    Email
    Campo usado para inserir e fazer a validação de um endereço de e-mail.

    <input name="email" type="email"/>



    Slider
    Esse novo tipo de campo não é como os outros, ele exibe uma régua onde é possível setar um valor. Essa régua é parecida com a timeline de players de música. Os atributos min e max limitam a faixa de valores, e o atributo step informa a progressão dos valores, que no exemplo abaixo é para multiplos de 5, por exemplo 5, 10, 15?

    <input name="satisfacao" type="range" min="5" max="50" step="5"/>



    Pesquisa
    Cria um campo para pesquisas.

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



    Paleta de Cores
    Cria uma paleta de cores, como as que podem ser criadas usando por exemplo a biblioteca JavaScript "jQuery UI".

    <input name="cores" type="color"/>



    Veja abaixo alguns atributos que possuem funções interessantes, tanto na validação dos campos quanto no auxílio ao usuário e usabilidade da página web.

    Autofocus
    Se informado esse atributo no campo, ele receberá o foco assim que a página for carregada no navegador.

    <input name="pesquisar" type="search" autofocus/>



    Autocomplete
    Se esse atributo estiver como "on", então ele habilita um autocompletar para o campo.

    <input name="pesquisar" type="search" autocomplete="on"/>



    Placeholder
    Esse atributo é usado para auxiliar o usuário no preenchimento do campo, pois ele dá uma dica do que deve ser inserido.

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



    Pattern
    Esse atributo quando especificando tem a função de fazer uma validação com base em uma expressão regular. No exemplo abaixo ele aceita origatoriamente 11 caracteres entre números e letras minúsculas.

    <input name="valor" type="number" pattern="[0-9][a-z]{10}"/>[sourcecode]</pre>
    <strong>
    Required</strong>
    Informando o atributo no campo, ele passará a ser de preenchimento obrigatório, não sendo 
    executado o submit do formulário enquanto ele não for preenchido.
    [sourcecode type="html"]<input name="pesquisar" type="search" required/>


    Infelizmente não são todos os navegadores que possuem suporte à HTML 5, como eu já disse no início desse artigo, mas vale a pena conhecer a evolução da HTML e saber o que será possível futuramente na construção de páginas web usando HTML 5.

    Para encerrarmos esse artigo, deixo um pequeno exemplo de formulário usando HTML 5 e web semântica. Forte abraço e até o próximo artigo.

    <form>
    <fieldset>
    <legend>Formulário com HTML 5</legend>
    <ul>
    <li>
    <label for="nome">Nome completo:</label>
    <input name="nome" type="text" required autofocus/>
    </li>
    <li>
    <label for="email">Email:</label>
    <input name="email" type="email" placeholder="[email protected]" required/>
    </li>
    <li>
    <label for="nascimento">Data de Nascimento:</label>
    <input name="nascimento" type="date" />
    </li>
    <li>
    <input name="Salvar" type="submit" value="Salvar"/>
    </li>
    </ul>
    </fieldset>
    </form>

     


    Este post foi editado por Oliveira Dario em 15 de julho de 2013 01:40:05 ART"
  • 4 de fevereiro de 2018 03:15:19 ART

    (DICA)

     

    Você pode modificar ou remover aquelas “bolinhas” que aparecem em frente aos itens de uma lista ordenada.

    Usaremos a tag list-style-type:none para fazer as mudanças.

    Exemplo: Vamos remover o marcador , ao invés do círculo:

    • Item 1

              Item 2

     


    Este post foi editado por Patrick Anderson Silva em 4 de fevereiro de 2018 03:19:05 ART"