Nenhum produto encontrado nessa seleção.
Sempre que publicamos formulários em qualquer tipo de site, nossa primeira preocupação é com a validação dos dados, tanto para front quanto back-end. Com a introdução do HTML5 e a grande adoção dos navegadores de ponta à nova tecnologia, atualmente está muito mais fácil trabalhar com formulários para desenvolvedores front-end.
Existem novos tipos de inputs e novos atributos nos formulários HTML5 voltados para a validação de dados. Além disso, o melhor da história é que você não vai precisar ficar bolando planos mirabolantes com JavaScript para não frustrar o usuário final. A validação será realizada pelo próprio HTML5, nativamente.
Vamos ver como isso funciona na prática.
O atributo required
Todos os formulários que criei até hoje, em todas as minhas aplicações, têm campos com preenchimento obrigatório. O atributo required está aqui para facilitar sua vida nesse sentido.
Ele simplesmente não envia o formulário se o usuário não preencher o campo.
Veja um exemplo:
<form action="" method="post"> <p>Nome: <br> <input type="text" name="nome" required></p> <p>Sobrenome: <br> <input type="text" name="sobrenome" required></p> <p>Idade: <br> <input type="text" name="idade" required></p> <p><input type="submit" Value="Enviar"></p> </form>
Como você pode ver, basta incluir o atributo "required" e pronto, o navegador fará sua tarefa.
Cada navegador trata a informação (Por favor, preencha este campo) à sua maneira, mas uma coisa é certa, o formulário não será enviado enquanto o campo não for preenchido.
Novos tipos de inputs
Se você já desenvolve a bastante tempo, sabe que o único tipo de input de texto que tínhamos era o "text" (texto). Porém, com HTML5, agora temos dezenas de novos tipos de inputs, como email, url, number, tel, color, date.
Por exemplo:
<form action="" method="post">
<p>regexp: <br> <input type="text" name="regexp"pattern="[A-Z-a-z0-9]{10}" required></p>
<p>email: <br> <input type="email" name="email" required></p>
<p>url: <br> <input type="url" name="url" required ></p>
<p>number: <br> <input type="number" name="number" required></p>
<p>tel: <br> <input type="tel" name="tel" required></p>
<p>date: <br> <input type="date" name="date" required></p>
<p>datetime: <br> <input type="datetime" name="datetime" required></p>
<p>datetime-local: <br> <input type="datetime-local" name="datetime-local" required></p>
<p>month: <br> <input type="month" name="month" required></p>
<p>week: <br> <input type="week" name="week" required></p>
<p>color: <br> <input type="color" name="color" required></p>
<p>time: <br> <input type="time" name="time" required></p>
<p>search: <br> <input type="search" name="search" required></p>
<p>range: <br> <input type="range" min="0" max="5" value="1" name="range" required></p>
<p><input type="submit" Value="Enviar"></p>
</form>
Alguns desses tipos, como "date", por exemplo, ainda não são suportados por todos os navegadores.
Além disso, dependendo do tipo de input, seu estilo pode ficar um pouco diferente dos demais textos que conhecemos, veja um exemplo do formulário acima aqui.
Você pode ver como utilizar todos os tipos de inputs HTML5 aqui.
Placeholder
Outro ponto que sempre utilizei a minha vida toda como desenvolvedor, foi um texto que fica dentro do input indicando o que o usuário deve digitar (Isso se chama placeholder), por exemplo:
<p>email: <br> <input type="email" placeholder="digite seu email" name="email" required></p>
Uma mensagem de texto aparece dentro do input antes que o usuário comece a digitar.
Quando ele digita qualquer coisa, o texto desaparece, dando lugar ao que ele está digitando.
Não se esqueça do back-end
Normalmente, foco mais na validação utilizando PHP, ou qualquer outra linguagem de back-end, pois, é lá que os dados precisam ser tratados. A utilização de HTML5 (ou JavaScript, como antigamente), é simplesmente para que o seu usuário final tenha uma experiência legal com seu site, com mensagens, cores e tudo indicando o que ele deve fazer.
Por este motivo, nunca trate apenas do estilo e das coisas que você vê. Além de tratar os valores no front-end com qualquer ferramenta, nunca se esqueça de validar os dados que vão para o servidor também.
E o CSS?
Para estilizar os inputs com determinados atributos, basta fazer o seguinte:
required
Para o atributo required, basta adicionar a pseudo classe :required, veja:
input:required{
border:1px solid blue;
} required inválido
Se o campo for enviado e estiver inválido, utilize as pseudo classes :invalid ou :valid, veja:
input:required:invalid, input:focus:invalid {
background: red;
}
input:required:valid {
background: blue;
}Claro que você vai escolher um estilo adequado, já que meu exemplo acima é extremamente horrível.
Placeholder
Já criamos um tutorial bem detalhado como estilizar placeholders aqui no tutsup. Veja em:
Concluindo
Claro que não cobri tudo o que você pode saber sobre os formulários HTML5, porém, na maioria das vezes, é o que eu utilizo em minhas próprias aplicações.
Conforme descrevi ao longo do artigo, a preocupação maior é com o back-end (PHP, por exemplo), o front-end (HTML5, por exemplo) é para melhorar a experiência do usuário final.
Saiba mais no site da W3C.
Algo a declarar?
