Neste codelab, mostramos como criar um formulário de pagamento seguro, acessível e fácil de usar.
Etapa 1: usar o HTML como esperado
Use elementos criados para o trabalho:
<form>
<section>
<label>
<input>
,<select>
,<textarea>
<button>
Como você verá, esses elementos ativam a funcionalidade integrada do navegador, melhoram a acessibilidade e adicionam significado à sua marcação.
- Clique em Remixar para editar para tornar o projeto editável.
Confira o HTML do formulário em index.html
.
<form action="#" method="post">
<h1>Payment form</h1>
<section>
<label>Card number</label>
<input>
</section>
<section>
<label>Name on card</label>
<input>
</section>
<section id="cc-exp-csc">
<div>
<label>Expiry date</label>
<input>
</div>
<div>
<label>Security code</label>
<input>
<div class="explanation">Last 3 digits on back of card</div>
</div>
</section>
<button id="complete-payment">Complete payment</button>
</form>
Há elementos <input>
para número do cartão, nome no cartão, data de validade e código de segurança. Eles são
encapsulados em elementos <section>
, e cada um tem um rótulo. O botão Concluir pagamento é um <button>
HTML. Mais adiante neste codelab, você vai aprender sobre os recursos do navegador que podem ser acessados usando
esses elementos.
Clique em Ver app para conferir a visualização da sua forma de pagamento.
- O formulário funciona bem como está?
- Você mudaria alguma coisa para melhorar?
- E em dispositivos móveis?
Clique em View Source para retornar ao código-fonte.
Etapa 2: projetar para dispositivos móveis e computadores
O HTML adicionado é válido, mas o estilo padrão do navegador dificulta o uso do formulário, principalmente em dispositivos móveis. Não parece muito bom.
É necessário ajustar o preenchimento, as margens e os tamanhos de fonte para garantir que os formulários funcionem bem em vários dispositivos.
Copie todo o CSS abaixo e cole no seu arquivo css/main.css
.
É muito CSS! As principais coisas a serem observadas são as mudanças nos tamanhos:
padding
emargin
são adicionados às entradas.font-size
e outros valores são diferentes para diferentes tamanhos de janela de visualização.
Quando estiver tudo pronto, clique em Ver app para conferir o formulário estilizado. Você também vai notar que as bordas foram
ajustadas, e display: block;
é usado para rótulos, para que eles apareçam em uma linha por conta própria, e
as entradas podem ter largura total. Práticas recomendadas para formulários de login
explica os benefícios dessa abordagem com mais detalhes.
O seletor :invalid
é usado para indicar quando uma entrada tem um valor inválido. Você vai usar isso
mais tarde no codelab.
O CSS prioriza dispositivos móveis:
- O CSS padrão é para janelas de visualização com menos de
400px
de largura. - As consultas de mídia são
usadas para substituir o padrão em janelas de visualização com pelo menos
400px
de largura e, novamente, para janelas de visualização com pelo menos500px
de largura. Isso deve funcionar bem para smartphones menores, dispositivos móveis com telas maiores e computadores.
Sempre que você criar para a Web, será necessário testar em diferentes dispositivos e tamanhos de janela de visualização. Isso é especialmente verdadeiro para formulários, porque um pequeno problema pode torná-los inutilizáveis. Sempre ajuste os pontos de interrupção CSS para garantir que eles funcionem bem com seu conteúdo e dispositivos de destino.
- O formulário inteiro está visível?
- As entradas do formulário são grandes o suficiente?
- Todo o texto está legível?
- Você notou alguma diferença entre usar um dispositivo móvel real e visualizar o formulário no Modo dispositivo no Chrome DevTools?
- Você precisou ajustar os pontos de interrupção?
Há várias maneiras de testar o formulário em diferentes dispositivos:
- Use o Device Mode do Chrome DevTools para simular dispositivos móveis.
- Enviar o URL do computador para o smartphone.
- Use um serviço como o BrowserStack para testar em uma variedade de dispositivos e navegadores.
Etapa 3: adicionar atributos para ajudar os usuários a inserir dados
Permita que o navegador armazene e preencha automaticamente valores de entrada e forneça acesso a recursos de pagamento e validação integrados e seguros.
Adicione atributos ao formulário no arquivo index.html
para que ele fique assim:
<form action="#" method="post">
<h1>Payment form</h1>
<section>
<label for="cc-number">Card number</label>
<input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
</section>
<section>
<label for="cc-name">Name on card</label>
<input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
</section>
<section id="cc-exp-csc">
<div>
<label for="cc-exp">Expiry date</label>
<input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
</div>
<div>
<label for="cc-csc">Security code</label>
<input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
<div class="explanation">Back of card, last 3 digits</div>
</div>
</section>
<button id="complete-payment">Complete payment</button>
</form>
Acesse o app novamente e toque ou clique no campo Número do cartão. Dependendo do dispositivo e da plataforma, você verá um seletor mostrando as formas de pagamento armazenadas no navegador, como a mostrada abaixo.
Depois de selecionar uma forma de pagamento e inserir o código de segurança, o navegador preenche automaticamente o formulário usando
os valores autocomplete
do cartão de pagamento que você adicionou ao formulário:
cc-number
cc-name
cc-exp
cc-csc
Muitos navegadores também verificam e confirmam a validade de números de cartão de crédito e códigos de segurança.
Em um dispositivo móvel, você também vai notar que um teclado numérico aparece assim que você toca no campo
Número do cartão. Isso acontece porque você usou inputmode="numeric"
. Para campos numéricos, isso facilita a entrada de números e torna impossível inserir caracteres não numéricos, além de lembrar os usuários do tipo de dados que estão inserindo.
É extremamente importante adicionar corretamente todos os valores de autocomplete
disponíveis aos formulários de pagamento. É
comum que os sites omitam o valor autocomplete
para a data de validade do cartão e outros
campos. Se um único valor de autofill
estiver errado ou ausente, os usuários precisarão recuperar o cartão real para inserir manualmente os dados dele. Caso contrário, você poderá perder uma venda. Se o preenchimento automático em formulários de pagamento
não funcionar corretamente, os usuários também podem manter um registro dos detalhes do cartão de pagamento no smartphone
ou computador, o que é altamente inseguro.
Tente enviar o formulário de pagamento com um campo vazio. O navegador solicita que você preencha os dados
ausentes. Agora adicione uma letra ao valor no campo Número do cartão e tente enviar o formulário. O
navegador avisa que o valor é inválido. Isso acontece porque você usou o atributo pattern
para
especificar valores válidos para um campo. O mesmo vale para maxlength
e outras
restrições de validação.
Não é necessário usar JavaScript.
Seu formulário de pagamento vai ficar assim:
- Tente remover os valores de
autocomplete
e preencher o formulário de pagamento. Quais dificuldades você encontra? - Teste as formas de pagamento em lojas on-line. Considere o que funciona bem e o que dá errado. Existem problemas comuns ou práticas recomendadas que você precisa seguir?
Etapa 4: desativar o botão de pagamento depois que o formulário for enviado
Considere desativar um botão de envio depois que o usuário tocar ou clicar nele, especialmente quando ele estiver fazendo o pagamento. Muitos usuários tocam ou clicam nos botões repetidamente, mesmo que eles estejam funcionando bem. Isso pode causar problemas no processamento de pagamentos e aumentar a carga do servidor.
Adicione o seguinte JavaScript ao seu arquivo js/main.js
:
const form = document.querySelector('form');
const completePaymentButton = document.querySelector('button#complete-payment');
form.addEventListener('submit', handleFormSubmission);
function handleFormSubmission(event) {
event.preventDefault();
if (form.checkValidity() === false) {
// Handle invalid form data.
} else {
completePaymentButton.textContent = 'Making payment...';
completePaymentButton.disabled = 'true';
setTimeout(() => {alert('Made payment!');}, 500);
}
}
Tente enviar o formulário de pagamento e veja o que acontece.
Confira como o código vai ficar neste ponto, com a adição de alguns comentários e uma
função validate()
:
O JavaScript inclui código comentado para validação de dados. Esse código usa a API Constraint Validation (que tem amplo suporte) para adicionar validação personalizada, acessando a interface integrada do navegador para definir o foco e mostrar solicitações. Remova a marca de comentário do código e tente. Você vai precisar definir valores apropriados para
someregex
emessage
e definir um valor parasomeField
.Quais dados de análise e monitoramento de usuários reais você monitoraria para identificar maneiras de melhorar seus formulários?
O formulário de pagamento completo vai ficar assim:
- Teste o formulário em diferentes dispositivos. Quais dispositivos e navegadores você está segmentando? Como o formulário pode ser melhorado?
Mais informações
Considere os seguintes recursos essenciais de formulário que não são abordados neste codelab:
Link para os Termos de Serviço e os documentos da Política de Privacidade: deixe claro para os usuários como você protege os dados deles.
Estilo e marca: verifique se eles correspondem ao restante do site. Ao inserir nomes e endereços e efetuar pagamentos, os usuários precisam se sentir confortáveis, confiantes de que ainda estão no lugar certo.
Análise e monitoramento de usuários reais: permita que o desempenho e a usabilidade do design do formulário sejam testados e monitorados para usuários reais.