Sign-In Form
Formulario de inicio de sesión
Un formulario que recoge los detalles de la cuenta para iniciar sesión. Debe permitir recuperar la cuenta, usar gestores de contraseñas, mostrar errores claros y enviar los datos de forma segura.
Un ejemplo real
Un cliente que vuelve inicia sesión con correo y contraseña. Pueden mostrar la contraseña, pegarla desde un password manager o recuperar el acceso sin perder su lugar.
Partes principales
- 01Etiqueta persistente
- 02Input control
- 03Hint or format
- 04Validation message
Úsalo cuando
Usa una página enfocada con valores de autocompletado correctos y enlaces claros para la recuperación de la cuenta y el registro.
No lo uses cuando
No bloquees pegar, reveles si una cuenta existe ni borres entradas válidas tras un error que se puede arreglar. No escondas las reglas de las contraseñas.
Nombre usado en código
form + autocomplete=username/current-password + POST over HTTPS Antes de lanzarlo
Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages.
Outcome: Complete the task with Formulario de inicio de sesión (Sign-In Form). User context: Un cliente que vuelve inicia sesión con correo y contraseña. Pueden mostrar la contraseña, pegarla desde un password manager o recuperar el acceso sin perder su lugar. Recommended pattern: Formulario de inicio de sesión (Sign-In Form). Why it fits: Usa una página enfocada con valores de autocompletado correctos y enlaces claros para la recuperación de la cuenta y el registro. Do not use it when: No bloquees pegar, reveles si una cuenta existe ni borres entradas válidas tras un error que se puede arreglar. No escondas las reglas de las contraseñas. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Formulario de inicio de sesión (Sign-In Form) is used now. Definition: Un formulario que recoge los detalles de la cuenta para iniciar sesión. Debe permitir recuperar la cuenta, usar gestores de contraseñas, mostrar errores claros y enviar los datos de forma segura. Release checks: Give each field a label that code can read. Link hints and errors, and keep entered values. Check autofill, keyboard order, validation timing, submit states, failure recovery, zoom, and languages. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.