JavaScript

JavaScript를 사용하여 양식에서 사용자 상호작용에 응답하고, 추가 양식 필드를 표시하고, 양식을 제출하는 등의 작업을 할 수 있습니다.

설문조사 양식을 빌드했다고 가정해 보겠습니다. 사용자가 한 가지 옵션을 선택한 후 선택과 관련된 특정 질문을 묻기 위해 <input>를 추가로 표시하려고 합니다. 관련 <input> 요소만 표시하려면 어떻게 해야 하나요?

연결된 <input type="radio">가 현재 선택된 경우에만 JavaScript를 사용하여 <input>를 표시할 수 있습니다.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

데모의 JavaScript 코드를 살펴보겠습니다. aria-controlsaria-expanded 속성을 확인했나요? 이러한 ARIA 속성을 사용하여 스크린 리더 사용자가 추가 양식 컨트롤이 표시되거나 숨겨지는 시점을 파악할 수 있도록 지원하세요.

사용자가 페이지를 벗어나지 않고 양식을 제출할 수 있도록 합니다.

댓글 양식이 있다고 가정해 보겠습니다. 독자가 댓글을 추가하고 양식을 제출할 때 페이지를 새로고침하지 않고도 댓글을 즉시 볼 수 있으면 좋습니다.

이렇게 하려면 onsubmit 이벤트를 수신한 다음 event.preventDefault()를 사용하여 기본 동작을 방지하고 Fetch API를 사용하여 FormData를 전송합니다.

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

백엔드 스크립트는 POST 요청이 브라우저(method="post"인 양식 요소의 action 속성 사용)에서 발생한 것인지 또는 fetch() 요청과 같은 JavaScript에서 발생한 것인지 확인할 수 있습니다.

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

항상 스크린 리더 사용자에게 동적 콘텐츠 변경사항을 알립니다. HTML에 aria-live="polite" 속성이 있는 요소를 추가하고 변경 후 요소의 콘텐츠를 업데이트합니다. 예를 들어 사용자가 댓글을 제출한 후 텍스트를 '댓글이 게시되었습니다'로 업데이트합니다.

ARIA 실시간 영역에 대해 자세히 알아보기

JavaScript로 유효성 검사

오류 메시지가 사이트 스타일 및 어조와 일치하는지 확인

기본 오류 메시지의 문구는 브라우저마다 다릅니다. 모든 사용자에게 동일한 메시지를 표시하고 메시지가 사이트의 스타일 및 어조에 맞도록 하려면 어떻게 해야 하나요? Constraint Validation APIsetCustomValidity() 메서드를 사용하여 자체 오류 메시지를 정의합니다.

사용자에게 실시간으로 오류 알림을 제공합니다.

양식 유효성 검사를 위한 내장 HTML 기능은 데이터가 백엔드로 전송되기 전에 유효하지 않은 양식 필드에 관해 사용자에게 알리는 데 유용합니다. 사용자가 양식 필드를 벗어나는 즉시 알림을 보내면 좋지 않을까요?

요소의 포커스가 사라질 때 발생하는 blur 이벤트를 수신 대기하고 ValidityState 인터페이스를 사용하여 양식 컨트롤이 잘못되었는지 감지합니다.

사용자가 입력한 비밀번호를 볼 수 있는지 확인

<input type="password">에 입력된 텍스트는 사용자의 개인 정보를 보호하기 위해 기본적으로 흐리게 표시됩니다. <button>를 표시하여 입력한 텍스트의 공개 상태를 전환하여 사용자가 비밀번호를 입력할 수 있도록 지원합니다.

데모 사용해 보기 비밀번호 표시 <button>를 사용하여 입력한 텍스트의 공개 상태를 전환합니다. 작동 방식 비밀번호 보기를 클릭하면 비밀번호 필드의 type 속성이 type="password"에서 type="text"로 변경되고 <button> 텍스트가 '비밀번호 숨기기'로 변경됩니다.

비밀번호 표시 버튼에 액세스할 수 있도록 하는 것이 중요합니다. aria-controls 속성을 사용하여 <button><input type="password">에 연결합니다.

비밀번호가 현재 표시되어 있는지 또는 숨겨져 있는지 스크린 리더 사용자에게 알리려면 aria-live="polite"와 함께 숨겨진 요소를 사용하고 그에 따라 텍스트를 변경합니다. 스크린 리더 사용자가 비밀번호가 표시되고 화면을 보는 다른 사용자에게 표시되는 시점을 알 수 있도록 하는 것이 중요합니다.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

비밀번호 표시 옵션 구현에 대해 자세히 알아보세요.

리소스