Sign-In Form
로그인 폼
로그인할 때 계정 정보를 적는 양식이에요. 계정 찾기, 비밀번호 관리자, 에러 확인, 안전한 전송을 꼭 지원해야 해요.
실제 예시
돌아온 고객은 이메일과 비밀번호로 로그인해요. 비밀번호를 보이거나 비밀번호 관리자에서 붙여넣거나, 자리를 잃지 않고 계정을 복구할 수 있어요.
주요 부분
- 01지속 라벨
- 02Input control
- 03Hint or format
- 04Validation message
사용할 때
올바른 자동완성 값과 계정 복구 및 가입을 위한 명확한 링크가 있는 집중 페이지를 사용하세요.
다음 경우에는 사용하지 마세요
붙여넣기를 차단하지 마십시오, 계정 존재 여부를 공개하지 마십시오, 수정 가능한 오류 후 유효한 항목을 지우지 마십시오. 비밀번호 규칙을 숨기지 마십시오.
코드에서 사용된 이름
form + autocomplete=username/current-password + POST over HTTPS 출시하기 전에
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 로그인 폼 (Sign-In Form)。 User context：돌아온 고객은 이메일과 비밀번호로 로그인해요. 비밀번호를 보이거나 비밀번호 관리자에서 붙여넣거나, 자리를 잃지 않고 계정을 복구할 수 있어요. Recommended pattern：로그인 폼 (Sign-In Form)。 Why it fits：올바른 자동완성 값과 계정 복구 및 가입을 위한 명확한 링크가 있는 집중 페이지를 사용하세요. Do not use it when：붙여넣기를 차단하지 마십시오, 계정 존재 여부를 공개하지 마십시오, 수정 가능한 오류 후 유효한 항목을 지우지 마십시오. 비밀번호 규칙을 숨기지 마십시오. 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)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 로그인 폼 (Sign-In Form) is used now. Definition: 로그인할 때 계정 정보를 적는 양식이에요. 계정 찾기, 비밀번호 관리자, 에러 확인, 안전한 전송을 꼭 지원해야 해요. 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.