none
HTML5, CSS3 e validação de formulario RRS feed

  • Pergunta

  • Pessoal, não sei qual o fórum para postar então vou postar aqui e alguma alma caridosa faça-me o favor de mover para o local correto.

    Me desculpe a ignorância, mas estou "brincando" com CSS3 3 HTML5 e vi um exemplo de formulário bem interessante:


    Como é feita a consistência dos campos obrigatórios e com formatos - email.

    No código fonte html:

        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
        <link rel="stylesheet" type="text/css" href="demo.css" media="all" />
        			<p class="contact"><label for="name">Name</label></p> 
        			<input id="nome" name="nome" placeholder="First and last name" required="" tabindex="1" type="text"> 
        			 

    No arquivos de estilo não achei nada referente a mensagem de campo obrigatório, nem vi nenhum javascript consistindo e-mail. 

    Não achei nenhuma referência a scripts externos.

    Na imagem estou rodando local sem estar na internt.

    E as menagens estão em português!

    Como isto foi feito?

     


    Ninguém falou que seria fácil!

    quarta-feira, 5 de novembro de 2014 16:40

Respostas

  • São várias tags novas no html5 que facilitam a validação de formulários, o que incluí mensagens de alerta estilizados para as mensagens. Isso tudo fica a critério do navegador, logo, só tome cuidado com navegadores mais antigos (principalmente IE), que podem não suportar todas as funções. Mas no Chrome, que usa o Webkit, tudo funciona legal e pode ser visto.

    Segue um link para você ver como essas marcações são feitas: http://www.the-art-of-web.com/html/html5-form-validation/

    • Marcado como Resposta jothaz sexta-feira, 28 de novembro de 2014 22:28
    quinta-feira, 27 de novembro de 2014 16:33

Todas as Respostas

  • São várias tags novas no html5 que facilitam a validação de formulários, o que incluí mensagens de alerta estilizados para as mensagens. Isso tudo fica a critério do navegador, logo, só tome cuidado com navegadores mais antigos (principalmente IE), que podem não suportar todas as funções. Mas no Chrome, que usa o Webkit, tudo funciona legal e pode ser visto.

    Segue um link para você ver como essas marcações são feitas: http://www.the-art-of-web.com/html/html5-form-validation/

    • Marcado como Resposta jothaz sexta-feira, 28 de novembro de 2014 22:28
    quinta-feira, 27 de novembro de 2014 16:33
  • Raphael Moreira,

    Muito obrigado.

    Agora ficou claro.


    Ninguém falou que seria fácil!

    sexta-feira, 28 de novembro de 2014 21:09