Este codelab mostra como criar uma forma de pagamento segura, acessível e fácil de usar.
Etapa 1: usar HTML conforme planejado
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 adicionar significado a sua marcação.
- Clique em Remixar para editar para tornar o projeto editável.
Confira o HTML do seu 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á <input>
elementos para o número do cartão, nome nele, data de validade e código de segurança. Elas são todas
encapsulados em elementos <section>
, cada um com um rótulo. O botão Concluir pagamento é um botão HTML
<button>
Mais adiante neste codelab, você aprenderá sobre os recursos do navegador que podem ser acessados usando o
esses elementos.
Clique em Ver app para visualizar o formulário de pagamento.
- O formulário funciona bem o suficiente como está?
- Você mudaria alguma coisa para que ela funcione melhor?
- E no dispositivo móvel?
Clique em Exibir código-fonte para retornar ao código-fonte.
Etapa 2: projetar para dispositivos móveis e computadores
O HTML que você adicionou é válido, mas o estilo padrão do navegador torna o formulário difícil de usar, especialmente em dispositivos móveis. Também não parece muito bom.
Você precisa garantir que seus formulários funcionem bem em diversos dispositivos ajustando o padding, as margens e tamanhos de fonte.
Copie todo o CSS abaixo e cole-o no seu próprio 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 dependendo do tamanho da janela de visualização.
Quando estiver tudo pronto, clique em Ver app para conferir o formulário estilizado. Você também notará que as bordas têm
foi ajustado, e display: block;
é usado para rótulos, então eles vão em uma linha por conta própria;
podem ser de largura total. Práticas recomendadas para o formulário 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 este
mais adiante 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
usada para substituir o padrão para janelas de visualização com pelo menos
400px
de largura e novamente para janelas de visualização com pelo menos500px
de largura. Isso funcionará bem para celulares menores e dispositivos móveis, em telas maiores e em computadores.
Sempre que você criar para a Web, será necessário testar em diferentes dispositivos e tamanhos de janela de visualização. Esse é especialmente para formulários, porque uma pequena falha pode inutilizá-los. Sempre ajuste Pontos de interrupção CSS para garantir que eles funcionem bem com seu conteúdo e seus dispositivos de destino.
- O formulário inteiro está visível?
- As entradas de 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 Device Mode no Chrome DevTools?
- Você precisou ajustar os pontos de interrupção?
Há várias maneiras de testar o formulário em diferentes dispositivos:
- Usar o Modo dispositivo do Chrome DevTools para simular dispositivos móveis.
- Envie o URL do computador para o smartphone.
- Usar um serviço como o BrowserStack para testar em um intervalo de dispositivos e navegadores.
Etapa 3: adicionar atributos para ajudar os usuários a inserir dados
Permitir que o navegador armazene e preencha valores de entrada automaticamente, além de conceder acesso a controles pagamento e validação.
Adicione atributos ao formulário no seu 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>
Visualize seu app novamente e toque ou clique no campo Número do cartão. Dependendo do dispositivo e plataforma, poderá aparecer um seletor mostrando as formas de pagamento armazenadas no navegador, como o mostrado abaixo.
![Duas capturas de tela de uma forma de pagamento no Chrome em um smartphone Android. Um mostra o seletor integrado de cartões de pagamento no navegador; o outro mostra valores de marcadores
preenchidos automaticamente.](https://web.developers.google.cn/static/articles/codelab-payment-form-best-practices/image/two-screenshots-a-paymen-0c2e6e2be4f9d.png?authuser=4&hl=pt)
Depois que você selecionar uma forma de pagamento e inserir o código de segurança, o navegador preencherá o formulário automaticamente 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 perceberá um teclado numérico assim que toca no
Campo Número do cartão. Isso ocorre porque você usou inputmode="numeric"
. Para campos numéricos, isso torna
fica mais fácil inserir números e impossível inserir caracteres não numéricos, além de indicar aos usuários
lembrar o tipo de dados que estão inserindo.
É muito importante adicionar corretamente todos os valores de autocomplete
disponíveis aos formulários de pagamento. Está
É bastante comum que os sites percam o valor de autocomplete
na data de validade do cartão e outros
campos. Se um único valor autofill
estiver errado ou ausente, os usuários precisarão recuperar o valor real
para inserir manualmente os dados do cartão e você poderá perder uma venda. Se o preenchimento automático for aplicado em formulários de pagamento
não funcionar corretamente, os usuários também poderão manter um registro dos detalhes do cartão de pagamento no celular
ou computador, o que é altamente inseguro.
Envie o formulário de pagamento com um campo vazio. O navegador solicita a conclusão
dados. Agora adicione uma letra ao valor no campo Número do cartão e tente enviar o formulário. A
navegador avisará que o valor é inválido. Isso acontece porque você usou o atributo pattern
para
especificar valores válidos para um campo. O mesmo funciona para maxlength
e outros
restrições de validação
Não é necessário JavaScript.
Seu formulário de pagamento deve ter esta aparência:
- Remova
autocomplete
valores e preencha o formulário de pagamento. Que dificuldades você encontrar? - Teste os formulários de pagamento em lojas on-line. Considere o que funciona bem e o que dá errado. Há algum problema comum ou prática recomendada que você deve seguir?
Etapa 4: desative o botão de pagamento depois que o formulário for enviado
Considere desativar um botão de envio assim que o usuário tocar ou clicar nele, especialmente quando se o usuário está fazendo o pagamento. Muitos usuários tocam ou clicam em botões repetidamente, mesmo se estiverem funcionando bem. Isso pode causar problemas no processamento do pagamento e adicionar 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.
Seu código ficará assim neste momento, com a adição de alguns comentários e uma
Função validate()
:
Você notará que o JavaScript inclui o código comentado para validação de dados. Esse código usa a API Constraint Validation (com amplo suporte) para adicionar de eventos, acessando a interface integrada do navegador para definir o foco e exibir solicitações. Remova a marca de comentário do código e experimente. Você precisa definir valores adequados para
someregex
emessage
e um valor parasomeField
O que são dados analíticos e de monitoramento de usuários reais você monitoraria para identificar formas de melhorar seus formulários?
Seu formulário de pagamento completo deve ter esta aparência:
- Teste o formulário em diferentes dispositivos. Em quais dispositivos e navegadores você segmentação? Como o formulário poderia ser melhorado?
Indo mais longe
Considere os seguintes recursos cruciais de formulário que não são abordados neste codelab:
Link para seus Termos de Serviço e documentos da Política de Privacidade: deixe claro para os usuários como você proteger os dados.
Estilo e branding: verifique se eles combinam com o restante do site. Ao inserir nomes e endereços e ao efetuar pagamentos, os usuários precisam se sentir à vontade, confiantes de que ainda estão no lugar certo.
Análise e monitoramento de usuários reais: permitem que o desempenho e a usabilidade do design de seu formulário sejam testados e monitorados para usuários reais.