폼 요소의 상태와 일관된 입력 스타일을 설계합니다.
label은 block으로 분리하고 입력은 충분한 크기와 명확한 border를 둡니다. :focus-visible, :invalid, :disabled 상태를 구분하되 브라우저 기본 사용성을 해치지 않습니다.
두 label이 display: block이 되어 위아래 14px 간격으로 쌓이고, 각 label이 입력 요소를 직접 감싸고 있어 이메일이나 내용이라는 글자를 눌러도 그 칸으로 포커스가 옮겨 갑니다. 입력창은 label 너비를 꽉 채우고, 포커스를 받으면 3px 연한 초록 외곽선과 짙은 초록 테두리가 함께 나타나 상태가 두 가지 단서로 드러납니다.
:invalid는 사용자가 아무것도 건드리기 전에도 걸려서, required 칸이 페이지를 열자마자 오류 색으로 보일 수 있습니다. :user-invalid는 사용자가 값을 바꾸거나 제출을 시도한 뒤에만 걸리므로 오류 표시에는 이쪽이 더 자연스럽습니다.
placeholder만 label처럼 쓰거나 focus outline을 제거하지 마세요.
직접 바꿔보세요입력창을 클릭해 focus 스타일을 확인하고 invalid 스타일을 추가하세요.