` como um contexto de posicionamento com o rótulo diretamente sobre o formulário:
```scss
form {
max-width: 450px;
// contexto de posicionamento
> div {
position: relative;
// aparência de placeholder
> label {
left: 20px;
opacity: 0.3;
position: absolute;
top: 22px;
}
}
}
```
> **Dica:** Para mais informações sobre Sass, veja o livro "[CSS Eficiente](https://www.casadocodigo.com.br/products/livro-css-eficiente)".
Não é necessário fazer qualquer truque de cursor, porque tudo já fica semanticamente adequado. Se acontece clique na área do rótulo, ele vai ativar a entrada; se é no campo, também. Ambos estão corretos.
O truque é colocar o campo primeiro (sem prejuízos à semântica) para esconder o label no foco, dessa maneira:
```scss
form {
// ...
> div {
> input[type="text"],
> input[type="email"],
> input[type="password"] {
&:focus {
& + label {
opacity: 0;
}
}
}
}
}
```
## Campos obrigatórios
Talvez **a validação mais fácil possível em um formulário** seja usar o atributo `required` para exigir que um campo seja de preenchimento obrigatório. Não há maneira mais rápida de identificar um erro e deixar o navegador fazer o tratamento.
```
```
## Indicar positivamente campos válidos
Permita que as pessoas saibam que houve entrada em um campo e esta é válida. Usando CSS, o navegador pode fornecer este tipo de informação através do seletor `:valid`:
```
form {
> input[type="text"],
> input[type="email"],
> input[type="password"] {
// Mostra sucesso
&:valid {
background: url(images/check.svg);
background-size: 20px;
background-repeat: no-repeat;
background-position: 20px 20px;
// Esconde o label
& + label {
opacity: 0;
}
}
}
}
```
`:valid`, nesse caso, é necessário para assegurar que a condição foi satisfeita, mas o seletor também é útil para a validação do tipo de entrada.
## Mostrar lembretes sobre o tipo de validação
Também é possível especificar que cada valor de uma entrada seja de um certo tipo, como e-mail ou número ([eis exemplos de todos eles](http://codepen.io/joesteinkamp/pen/ECbmu)).
```
```
Essa entrada é necessária para indicar que se trata de um formato de endereço de e-mail válido. É possível fazer isso para melhorar a UX:
1. Informar às pessoas sobre os requisitos quando o campo está em foco
2. Lembrá-las que o campo não pode ter qualquer outro valor válido
Mas, também, não mostrar qualquer lembrete quando o campo está vazio. Também, não assumir um estado inválido. É apenas uma espécie de negativo irritante-desnecessário. A fim de fazer isso, é preciso saber se o campo está vazia ou não.
### Testando se um campo tem algum valor ou não
É preciso algum trabalho em cima de `:valid` e `:valid`, mas não é desejável se antecipar com `:valid` e usá-lo antes de o campo ter algum valor.
Existe algum seletor CSS para testar se um campo está vazia? Na verdade, não. Muita gente pensa que `:empty` serve para isso, mas não serve! Ele é para estilizar coisas como `
`, ou seja, elementos de contêiner sem nada dentro. Campos de formulário são elementos sem conteúdo _por padrão_.
O macete é se certificar que a entrada tem um valor de placeholder:
```
input:not(:placeholder-shown) {
}
```
Na demo, não se está usando placeholder, mas o valor de um único espaço funciona:
```
```
[`:placeholder-shown`](https://css-tricks.com/almanac/selectors/p/placeholder-shown/) é muito útil neste caso. É, basicamente, um seletor para testar se um campo atualmente tem algum valor ou não.
Infelizmente, no momento não há suporte para Firefox e IE. Com novos recursos como este, `@supports` é normalmente um salvador, mas...
```
// Isso não funciona!
@supports (input:placeholder-shown) {
input:not(:placeholder-shown) {
}
}
```
Não é possível usar `@supports` para seletores, apenas para propriedades e valores (ex: `@supports (display: flex)`). Testar placeholders com JavaScript e bastante simples:
```javascript
let i = document.createElement( 'input' );
if ( 'placeholder' in i ) {
// ...
}
```
Mas não parece ser uma maneira simples para testar `:placeholder-shown`. Então, a solução para o caso é esperar esperar por um melhor suporte dos navegadores antes de ser usado, efetivamente, em projetos em produção. Depois que isso acontecer, é mais ou menos assim que a coisa será ser feita:
```scss
form {
> div {
> input[type="text"],
> input[type="email"],
> input[type="password"] {
// Quando campo é...
// 1. NÃO vazio
// 2. NÃO em foco
// 3. NÃO válido
&:invalid:not(:focus):not(:placeholder-shown) {
// Mostra um lembrete
background: pink;
& + label {
opacity: 0;
}
}
// Quando um campo inválido recebe foco (e também ainda não está vazio)
&:invalid:focus:not(:placeholder-shown) {
// Ver as instruções de "Validações Robustas" abaixo
& ~ .requirements {
max-height: 200px;
padding: 0 30px 20px 50px;
}
}
}
// ~
// ~
//
.requirements {
color: red;
font-style: italic;
max-height: 0;
overflow: hidden;
padding: 0 30px 0 50px;
transition: 0.28s;
}
}
```
## Validações Robustas
Validações diretamente no navegador podem ser feitas não somente com `required`, `type="email"` e similares; é possível, também, validar coisas como comprimento (por exemplo, comprimento mínimo de senha ou número máximo de caracteres em textareas) e até mesmo usar expressões regulares.
Por exemplo, caso se queira um campo de senha com os seguintes requisitos:
1. Mínimo de 6 caracteres
2. Pelo menos 1 caractere minúsculo
3. Pelo menos 1 caractere maiúsculo
4. Pelo menos 1 número
É possível fazer algo como:
```
```
## Conclusão das técnicas de UX em validação de formulários com HTML e CSS
Para fixar os conteúdos do artigo, fica uma demo das técnicas e sugestões de UX em validação de formulários com HTML e CSS que foram abordadas -- nele, consta `:placeholder-shown`, o que significa que, na data de publicação deste artigo, não vai funcionar muito bem em Firefox e IE.
[Exemplo no CodePen](https://codepen.io/anon/pen/JXgKjb)
Juntamente com o que é apresentado no artigo "[Melhorando a interação em
formulários de busca](/javascript/melhorando-interacao-formularios-busca/)",
estas técnicas de UX para validação de formulários levarão os forms de seus ao
próximos nível.
> **Atenção:** Lembre-se: estas são técnicas de validação diretamente no navegador que, quando se pensa numa segurança de nível profissional, devem ser usadas _juntamente_ com outras técnicas, inclusive envolvendo o backend.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml