En este codelab, aprenderás a crear un formulario de pago que sea seguro, accesible y fácil de usar.
Paso 1: Usa HTML según lo previsto
Usa elementos diseñados para el trabajo:
<form>
<section>
<label>
<input>
,<select>
,<textarea>
<button>
Como verás, estos elementos habilitan funciones integradas en el navegador, mejoran la accesibilidad y y agregar significado a tu lenguaje de marcado.
- Haz clic en Remix para editar para que el proyecto se pueda editar.
Observa el código HTML de tu formulario en 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>
Hay <input>
elementos para el número de tarjeta, el nombre en la tarjeta, la fecha de vencimiento y el código de seguridad. Todos son
se unen a elementos <section>
y cada uno tiene una etiqueta. El botón Completar pago es un código HTML.
<button>
Más adelante en este codelab, aprenderás sobre las funciones del navegador a las que puedes acceder usando
estos elementos.
Haz clic en Ver aplicación para obtener una vista previa de tu forma de pago.
- ¿El formulario funciona lo suficientemente bien como está?
- ¿Hay algo que cambiarías para que funcione mejor?
- ¿Y en dispositivos móviles?
Haz clic en Ver fuente para volver a tu código fuente.
Paso 2: Diseña para dispositivos móviles y computadoras de escritorio
El código HTML que agregaste es válido, pero el estilo predeterminado del navegador dificulta el uso del formulario, especialmente en dispositivos móviles. Tampoco se ve demasiado bien.
Para asegurarte de que tus formularios funcionen bien en una variedad de dispositivos, debes ajustar el relleno, los márgenes y tamaños de fuente.
Copia todos los CSS que aparecen a continuación y pégalos en tu archivo css/main.css
.
¡Eso es mucho CSS! Lo principal que debes tener en cuenta son los cambios en los tamaños:
padding
ymargin
se agregaron a las entradas.font-size
y otros valores son diferentes para diferentes tamaños de viewport.
Cuando esté todo listo, haz clic en Ver aplicación para ver el formulario con estilo. También notarás que las fronteras
se ajustó y display: block;
se usa para las etiquetas, de modo que queden en una línea por su cuenta.
las entradas pueden ser de ancho completo. Prácticas recomendadas para el formulario de acceso
se explican los beneficios de este enfoque con más detalle.
El selector :invalid
se usa para indicar cuando una entrada tiene un valor no válido. (Se usa este
más adelante en el codelab).
El CSS prioriza los dispositivos móviles:
- La CSS predeterminada es para viewports con un ancho de menos de
400px
. - Las consultas de medios son
se utiliza para anular el valor predeterminado para viewports que tengan al menos
400px
de ancho, y luego, nuevamente para ventanas gráficas que tengan al menos500px
de ancho. Esto debería funcionar bien en teléfonos más pequeños, dispositivos móviles en pantallas más grandes y en computadoras de escritorio.
Cuando creas contenido para la Web, debes realizar pruebas en diferentes dispositivos y tamaños de viewport. Eso especialmente en el caso de los formularios, porque una pequeña falla puede volverlos inutilizables. Siempre debes ajustar Interrupciones de CSS para garantizar que funcionen bien con tu y los dispositivos de destino.
- ¿Se puede ver todo el formulario?
- ¿Las entradas del formulario son lo suficientemente grandes?
- ¿Es legible todo el texto?
- ¿Notaste alguna diferencia entre usar un dispositivo móvil real y ver el formulario en ¿Modo de dispositivo en Herramientas para desarrolladores de Chrome?
- ¿Tuviste que ajustar los puntos de interrupción?
Existen varias formas de probar el formulario en diferentes dispositivos:
- Cómo usar el Modo de dispositivo de las Herramientas para desarrolladores de Chrome para simular dispositivos móviles.
- Envía la URL de tu computadora a tu teléfono.
- Usa un servicio como BrowserStack para probar en un rango. de dispositivos y navegadores.
Paso 3: Agrega atributos que ayuden a los usuarios a ingresar datos
Habilita el navegador para almacenar y autocompletar valores de entrada, y proporciona acceso a las funciones de pago y validación.
Agrega atributos al formulario en tu archivo index.html
para que se vea de la siguiente manera:
<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>
Vuelve a ver la app y, luego, presiona o haz clic en el campo Número de tarjeta. Según el dispositivo y es posible que veas un selector que muestre las formas de pago almacenadas para el navegador, como la que se muestra a continuación.
Una vez que selecciones una forma de pago e ingreses el código de seguridad, el navegador completará el formulario con
los valores de autocomplete
de la tarjeta de pago que agregaste al formulario:
cc-number
cc-name
cc-exp
cc-csc
Muchos navegadores también verifican y confirman la validez de los números de tarjetas de crédito y los códigos de seguridad.
En un dispositivo móvil, también verás un teclado numérico apenas tocas
Número de tarjeta. Esto se debe a que usaste inputmode="numeric"
. En el caso de los campos numéricos,
facilita el ingreso de números y la imposibilidad de ingresar caracteres no numéricos, y sugiere a los usuarios
recordar el tipo de datos que ingresan.
Es muy importante agregar correctamente todos los valores de autocomplete
disponibles a los formularios de pago. Es
es bastante común que los sitios pierdan el valor de autocomplete
en la fecha de vencimiento de la tarjeta y otras
. Si falta un valor de autofill
o es incorrecto, los usuarios deberán recuperar su
para ingresar manualmente los datos correspondientes y podrías perder una venta. Si usas Autocompletar en los formularios de pago
no funciona correctamente, los usuarios también pueden decidir mantener un registro de los detalles de la tarjeta de pago en su teléfono
o computadora, lo cual es muy inseguro.
Intenta enviar el formulario de pago con un campo vacío. El navegador solicita que se complete la falta
de datos no estructurados. Ahora, agrega una letra al valor en el campo Número de tarjeta y, luego, intenta enviar el formulario. El
navegador advierte que el valor no es válido. Esto sucede porque usaste el atributo pattern
para
especificar valores válidos para un campo. Lo mismo funciona para maxlength
y otros
restricciones de validación
No se requiere JavaScript.
El formulario de pago debería tener el siguiente aspecto:
- Intenta quitar
autocomplete
valores y completar el formulario de pago. ¿Qué dificultades tienes encontrar? - Prueba los formularios de pago en las tiendas en línea. Considera lo que funciona bien y lo que sale mal. ¿Hay algún problema común o práctica recomendada que deberías seguir?
Paso 4: Inhabilita el botón de pago una vez que envíes el formulario
Considera inhabilitar un botón de envío una vez que el usuario lo presione o haga clic en él, especialmente cuando el usuario realiza el pago. Muchos usuarios presionan o hacen clic en botones reiteradamente, incluso si funcionan bien. Esto puede causar problemas con el procesamiento de pagos y agregar a la carga del servidor.
Agrega el siguiente JavaScript a tu archivo 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);
}
}
Intenta enviar el formulario de pago y revisa qué sucede.
Así es como debería verse tu código en este punto, con la adición de algunos comentarios y una
Función validate()
:
Notarás que JavaScript incluye código con comentarios para la validación de datos. Este código usa la API de Constraint Validation (que es ampliamente compatible) para agregar y el acceso a la IU integrada del navegador para enfocar y mostrar mensajes. Quita el comentario del código y y pruébalo. Deberás establecer los valores adecuados para
someregex
ymessage
, y establecer un valor parasomeField
Qué datos de analítica y supervisión de usuarios reales ¿supervisarías para identificar formas de mejorar tus formularios?
Ahora, el formulario de pago completo debería verse de la siguiente manera:
- Prueba el formulario en diferentes dispositivos. ¿Qué dispositivos y navegadores utilizas? la segmentación? ¿Cómo se podría mejorar el formulario?
Un paso más allá
Ten en cuenta las siguientes funciones fundamentales que no se tratan en este codelab:
Vínculo a los documentos de las Condiciones del Servicio y la política de privacidad (aclara a los usuarios cómo para proteger sus datos.
Estilo y desarrollo de la marca: Asegúrate de que coincidan con el resto de tu sitio. Al ingresar nombres y direcciones y realizar pagos, los usuarios deben sentirse cómodos y confiar en que siguen en el lugar correcto.
Análisis y supervisión de usuarios reales: permiten probar y supervisar el rendimiento y la usabilidad del diseño de su formulario para usuarios reales.