JavaScript

양식 이벤트에 응답

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

사용자가 추가적인 양식 컨트롤을 작성할 수 있도록 지원하기

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

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

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

kubectl 명령어 JavaScript 코드를 확인하세요. aria-controls 및 aria-expanded 속성을 발견하셨나요? 사용 ARIA 속성 를 사용하세요.

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

의견 양식이 있다고 가정해 보겠습니다. 독자가 댓글을 추가하고 양식을 제출하면 페이지를 새로고침하지 않고도 댓글을 즉시 볼 수 있다면 이상적일 것입니다.

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

브라우저 지원

  • Chrome: 42. <ph type="x-smartling-placeholder">
  • Edge: 14. <ph type="x-smartling-placeholder">
  • Firefox: 39. <ph type="x-smartling-placeholder">
  • Safari: 10.1. <ph type="x-smartling-placeholder">

소스

백엔드 스크립트에서 POST 요청이 브라우저에서 전송된 것처럼 표시되는지 확인할 수 있습니다. (양식 요소의 action 속성 사용, method="post"인 경우) 또는 JavaScript에서 (예: fetch() 요청)

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

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

ARIA 라이브 지역에 관해 자세히 알아보세요.

JavaScript를 사용한 유효성 검사

오류 메시지가 사이트 스타일 및 스타일과 일치하는지 확인하기

기본 오류 메시지의 문구는 브라우저마다 다릅니다. 모든 사용자에게 동일한 메시지를 표시하고 메시지가 사이트의 스타일과 어조와 일치하나요? setCustomValidity() 사용 Constraint Validation API의 메서드 자체 오류 메시지를 정의할 수 있습니다

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

양식 유효성 검사를 위해 기본으로 제공되는 HTML 기능은 사용자에게 잘못된 양식 필드에 대해 알릴 수 있습니다 사용자가 양식 입력란을 종료하자마자 알리는 것이 좋지 않을까요?

듣기: blur 드림 이벤트를 일으킬 수 있으며, ValidityState 인터페이스를 사용하여 양식 컨트롤이 잘못된지 감지할 수 있습니다.

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

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

데모 사용해 보기 Show Password <button>를 사용하여 입력한 텍스트의 공개 상태 작동 방식 Show Password(비밀번호 표시)를 클릭합니다. 비밀번호 필드의 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>
드림

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

리소스