OTP 입력은 여러 칸이 나란히 있는 것처럼 보이지만, 실제로는 네이티브 <input> 하나입니다. SMS 자동 완성(autocomplete="one-time-code"), 붙여넣기, 비밀번호 관리자, 폼, 스크린 리더 모두 이를 평범한 텍스트 필드로 인식합니다.
붙여 넣은 코드는 정리되므로 ‘123-456’과 ‘123 456’ 모두 입력되며, 패턴이 허용하지 않는 문자는 거부됩니다. Android에서는 webOtp가 SMS가 도착하는 즉시 코드를 채웁니다.
인증
마지막 칸이 채워지면 (completed)가 발생합니다. 코드를 거부하려면 입력에 aria-invalid를 설정합니다. 그러면 칸이 빨갛게 바뀌고 흔들립니다.
Try 123456, or anything else.
문자, 그룹, 마스킹
pattern="alphanumeric"은 문자도 받고, [groups]는 구분자를 추가하며, masked는 점을 그립니다.