JavaScript

양식 일정에 응답하기

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

사용자가 추가 양식 컨트롤을 작성하도록 지원

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

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

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

데모의 자바스크립트 코드를 확인해 보겠습니다. aria-controls 및 aria-expanded 속성을 알고 계셨나요? 이러한 ARIA 속성을 사용하면 스크린 리더 사용자가 양식 컨트롤의 표시 또는 숨김 여부를 알 수 있도록 지원할 수 있습니다.

사용자가 페이지에서 나가지 않고도 양식을 제출할 수 있도록 하기

댓글 양식이 있다고 가정해 보겠습니다. 독자가 댓글을 추가하고 양식을 제출할 때 페이지를 새로고침하지 않고도 댓글을 즉시 확인할 수 있는 것이 이상적입니다.

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

브라우저 지원

  • 42
  • 14
  • 39
  • 10.1

소스

백엔드 스크립트는 POST 요청이 브라우저(양식 요소의 action 속성 사용, method="post"인 경우) 또는 자바스크립트(예: fetch() 요청)에서 비롯되었는지 확인할 수 있습니다.

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

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

ARIA 서비스 지역에 대해 자세히 알아보기

JavaScript로 유효성 검사

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

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

사용자에게 오류에 대한 실시간 알림 제공

양식 유효성 검사를 위한 기본 제공 HTML 기능은 데이터가 백엔드로 전송되기 전에 잘못된 양식 필드를 사용자에게 알리는 데 유용합니다. 사용자가 양식 입력란을 나가는 즉시 이를 알리는 것이 바람직하지 않은가요?

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

사용자가 입력한 비밀번호를 볼 수 있도록 설정

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

데모 사용해 보기 Show Password <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>

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

자료