Os formulários são parte integrante de muitos sites. Eles nos permitem receber a entrada do usuário e, em seguida, agir com base nos dados fornecidos. Alguns exemplos de envio de formulário incluem o preenchimento de informações como nome e endereço ao fazer uma compra. Da mesma forma, você pode ter preenchido formulários de registro para criar uma conta em um site.
Os formulários em sites geralmente exigem que os usuários insiram uma variedade de dados. Isso pode incluir números e strings com requisitos de formatação específicos. Confira nosso tutorial sobre validação de entrada de formulário usando HTML5 e regex.
Neste tutorial, aprenderemos sobre diferentes pseudo-classes que podemos integrar em nossos formulários para torná-los mais amigáveis.
Indicando se a entrada é necessária ou opcional
As pessoas geralmente não gostam de preencher formulários longos. Embora alguns de seus usuários possam preencher todos os campos do formulário, a maioria provavelmente preencherá o mínimo necessário. Isso significa que é do interesse de todos que você mantenha seus formulários curtos. Mesmo se você planeja usar alguns campos adicionais, certifique-se de não forçar os usuários a preenchê-los.
Manter alguns campos opcionais dará aos usuários a opção de ignorar o fornecimento dessa informação se não quiserem enquanto ainda concluem a tarefa em questão.
Também é uma boa prática deixar os usuários saberem de antemão quais campos são obrigatórios e quais são opcionais. Uma maneira de fazer isso facilmente é com a ajuda de :required e :optional pseudo-classes.
Vamos implementar um formulário que marca campos obrigatórios ou opcionais. Nossa marcação de formulário ficaria assim:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
Submit |
23 |
|
Existem duas abordagens que poderíamos adotar aqui. A primeira abordagem envolveria a marcação dos campos obrigatórios como tal na própria marcação. A segunda usa pseudo-elementos que iremos anexar ao span tag adicionada após cada input elemento.
Precisamos de um extra span etiqueta porque ::before e ::after não trabalhe em input elementos. A tag span também precisa estar após o input elementos porque a partir de agora não há seletores para elementos de destino que vêm antes do elemento atual. No entanto, poderemos usar o seletor irmão adjacente para direcionar o span elementos. O CSS a seguir adicionará um rótulo para os elementos de entrada opcionais e obrigatórios apropriadamente:
1 |
input { |
2 |
border-radius: 5px; |
3 |
border: 2px solid black; |
4 |
padding: 1rem; |
5 |
}
|
6 |
|
7 |
input + span { |
8 |
position: relative; |
9 |
}
|
10 |
|
11 |
input + span::before { |
12 |
font-size: 60%; |
13 |
font-weight: bold; |
14 |
color: white; |
15 |
padding: 0.5rem; |
16 |
font-weight: bold; |
17 |
width: 80px; |
18 |
position: absolute; |
19 |
left: 0.5rem; |
20 |
text-align: center; |
21 |
top: -1rem; |
22 |
border-radius: 5px; |
23 |
}
|
24 |
|
25 |
input:required + span::before { |
26 |
content: "Required"; |
27 |
background: #3949AB; |
28 |
}
|
29 |
|
30 |
input:not(:required) + span::before { |
31 |
content: "Optional"; |
32 |
background: #2196F3; |
33 |
}
|
o span elemento foi posicionado relativamente para que possamos usar o posicionamento absoluto no ::before pseudo-elemento em relação ao span elemento. Nós usamos o :not seletor em combinação com :required para filtrar os elementos necessários. Você pode ver os resultados na seguinte demonstração do CodePen:
Indicando se a entrada é válida ou inválida
Em nosso outro tutorial, aprendemos como validar a entrada do formulário. Agora, veremos como podemos alterar visualmente os elementos do formulário para indicar se a entrada é válida ou inválida. Duas pseudo-classes que usamos para esse fim são :valid e :invalid.
o :valid selector corresponderá a qualquer entrada ou elemento de formulário cujo conteúdo tenha sido validado com sucesso. Digamos que temos um campo de entrada que aceita endereços de e-mail, poderíamos tornar a entrada verde caso seja considerada válida. Da mesma forma, também podemos limitar o comprimento dos nomes de usuário entre 4 a 12 caracteres e assim por diante.
o :invalid seletor irá corresponder a qualquer entrada ou elemento de formulário cujo conteúdo não pôde ser validado com sucesso. Por exemplo, digamos que você deseja que o nome de usuário tenha pelo menos 4 caracteres, mas um usuário insere apenas 3 caracteres. Nesse caso, o campo de entrada corresponderá ao :invalid seletor.
Mais uma coisa a ter em mente é que uma entrada obrigatória permanecerá inválida enquanto estiver vazia. Por outro lado, as entradas opcionais permanecerão válidas mesmo se você as deixar vazias.
Expandiremos o exemplo anterior usando exatamente a mesma marcação e adicionando apenas o seguinte CSS para adicionar rótulos sobre entradas válidas e inválidas.
1 |
input + span::before, input + span::after { |
2 |
font-size: 60%; |
3 |
font-weight: bold; |
4 |
color: white; |
5 |
padding: 0.25rem 0.5rem; |
6 |
font-weight: bold; |
7 |
width: 80px; |
8 |
position: absolute; |
9 |
left: 0.5rem; |
10 |
text-align: center; |
11 |
top: -0.8rem; |
12 |
border-radius: 5px; |
13 |
}
|
14 |
|
15 |
input:valid + span::after { |
16 |
content: "Valid"; |
17 |
background: #388E3C; |
18 |
top: 1.2rem; |
19 |
}
|
20 |
|
21 |
input:invalid + span::after { |
22 |
content: "Invalid"; |
23 |
background: #C62828; |
24 |
top: 1.2rem; |
25 |
}
|
Definindo o valor de top propriedade para 1,2rem nos permite posicionar o pseudo-elemento ligeiramente abaixo do que seria naturalmente. A maioria das outras propriedades CSS são compartilhadas entre o ::before e ::after pseudo-elementos. A seguinte demonstração do CodePen mostra o resultado final:
Como você pode ver, os campos de nome e e-mail são válidos por padrão porque são opcionais. No entanto, tente preencher o campo de e-mail com algo inválido como a palavra batata e você verá o conteúdo do rótulo mudar de válido para inválido.
Neste ponto, o formulário parece muito lotado. Adicionei rótulos para todas as possibilidades para mostrar a você como implementá-los. Agora faremos algumas alterações no CSS para remover rótulos desnecessários.
Podemos nos livrar do Opcional texto, mantendo os campos obrigatórios rotulados como Requeridos. Ficaria implícito que outros campos são opcionais. Outra mudança que faremos é a remoção de :valid seletor de pseudoclasse para marcar os campos como válidos.
Os campos de marcação de rótulo como Inválido também parece desnecessário por enquanto porque os usuários nem interagiram com os elementos do formulário. Outro seletor alternativo que podemos usar no lugar de :invalid é o :user-invalid seletor que só invalida um elemento após o usuário ter interagido com ele.
O suporte do navegador é muito limitado para o :user-invalid atualmente. No entanto, espera-se que aumente no futuro.
Aqui está o CSS que realiza tudo isso:
1 |
input:required + span::before { |
2 |
content: "Required"; |
3 |
background: black; |
4 |
}
|
5 |
|
6 |
input:user-invalid { |
7 |
border: 2px solid red; |
8 |
}
|
9 |
|
10 |
input:user-invalid + span::after { |
11 |
content: "Invalid"; |
12 |
background: #C62828; |
13 |
top: 1.2rem; |
14 |
}
|
15 |
|
16 |
input:not(:required):user-invalid + span::after { |
17 |
top: 0.2rem; |
18 |
}
|
O último seletor se aplica a elementos opcionais que podem se tornar inválidos após a interação do usuário. Usamos este seletor para colocar o rótulo em uma posição um pouco mais alta.
Também modificamos um pouco a marcação com o minlength e maxlength atributos. Aqui está a marcação final:
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
Submit |
23 |
|
Existem muitos outros atributos que você pode usar para validação de entrada. Colocar o regex apropriado dentro dos atributos do padrão torna a validação ainda mais poderosa, ajudando você a especificar regras para nomes de usuários, senhas ou endereços de e-mail, etc. Em nosso exemplo aqui, vamos nos ater ao básico.
Abra a demonstração no Firefox para ver o :user-invalid classe em ação.
O nome dentro do campo de entrada agora precisa ter pelo menos 3 caracteres. Tente inserir apenas dois caracteres antes de passar para o próximo campo e você verá o Inválido rótulo. Da mesma forma, tente inserir um endereço de e-mail inválido no campo de entrada de e-mail e você verá que ele se torna inválido assim que o campo de e-mail perder o foco.
Estilizando elementos de formulário desativados e ativados
Às vezes, temos que desenvolver formulários em que alguns elementos do formulário precisam ser desativados com base na entrada do usuário. Isso pode ocorrer porque o preenchimento desses valores não é mais necessário ou porque eles foram pré-preenchidos com alguns valores com base em outros dados.
Você pode direcionar elementos desativados em seus formulários usando o :disabled pseudoclasse. Você não pode selecionar ou clicar em elementos desabilitados para fornecer qualquer entrada. Eles também param de ter foco. Os elementos de entrada podem ser desabilitados usando o disabled atributo.
Os elementos de entrada do formulário são ativados por padrão e você pode direcioná-los usando o :enabled seletor. Elementos de formulário ativados podem ser selecionados e receber foco. Você também pode fornecer texto ou outra entrada para eles.
Nesta seção, mostrarei um exemplo simples em que desativaremos dois elementos de entrada e seus valores serão ditados por outros elementos de entrada. Usaremos o seguinte CSS para indicar que os elementos estão desabilitados:
1 |
input:disabled { |
2 |
border: 2px solid gray; |
3 |
color: gray; |
4 |
background: #EEE; |
5 |
}
|
Aqui está o JavaScript que rastreia qualquer alteração no valor de entrada da quantidade e atualiza o preço por unidade automaticamente.
1 |
const quantityElem = document.querySelector("input#quantity"); |
2 |
const priceElem = document.querySelector('input#price'); |
3 |
|
4 |
quantityElem.addEventListener('change', (event) => { |
5 |
|
6 |
let quantity = event.target.value; |
7 |
let price = 200; |
8 |
if(quantity >= 10) { |
9 |
let deduction = Math.floor(quantity/5)*5; |
10 |
price -= deduction; |
11 |
}
|
12 |
|
13 |
priceElem.value = price; |
14 |
});
|
O seguinte CodePen mostra isso em ação. Você não poderá focar nos elementos desativados ou alterar seus valores, mas eles serão atualizados automaticamente.
Pensamentos finais
Devemos sempre tentar tornar o processo de preenchimento do formulário o mais simples possível para os usuários. O uso desses seletores nos ajudará a fornecer dicas visuais aos usuários sobre entradas obrigatórias ou opcionais, entradas válidas ou inválidas, bem como desabilitadas em entradas habilitadas.
Você também deve tentar deixar seus requisitos de preenchimento de formulários muito claros para os usuários. Por exemplo, se os nomes de usuário precisam usar um conjunto específico de caracteres ou ficar dentro do limite de comprimento de caracteres, você deve informar isso a um usuário com antecedência. Leia este tutorial sobre validação de formulário para saber como podemos mostrar mensagens úteis aos usuários em caso de erros.
