이 페이지는 Cloud Translation API를 통해 번역되었습니다.

가입 양식 권장사항 Codelab

Sam Dutton

이 Codelab에서는 안전하고 액세스 가능하며 사용하기 쉬운 가입 양식을 빌드하는 방법을 보여줍니다.

1단계: 의미 있는 HTML 사용

이 단계에서는 양식 요소를 사용하여 내장된 브라우저 기능을 최대한 활용하는 방법을 알아봅니다.

수정할 리믹스를 클릭하여 프로젝트를 수정할 수 있도록 합니다.

index.html에서 양식의 HTML을 살펴보세요. 이름, 이메일, 주소에 대한 입력이 비밀번호를 입력합니다. 각각 섹션에 있으며 라벨이 있습니다. 가입 버튼은 <button>입니다. 이 Codelab의 후반부에서는 이러한 모든 요소의 특별한 기능을 알아봅니다.

참고: <input> 요소에는 닫는 태그가 없습니다. 이는 void (빈) 요소이기 때문입니다. 즉, 이 요소 자체에는 콘텐츠가 없습니다. '/' void 요소 끝에 있는 문자는 선택사항입니다. <input> 또는 <input />는 괜찮습니다.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

앱 보기를 클릭하여 가입 양식을 미리 봅니다. 이렇게 하면 기본 브라우저 스타일입니다.

기본 스타일이 괜찮나요? 양식을 더 보기 좋게 만들려면 무엇을 변경해야 하나요?
기본 스타일이 작동하나요? 양식을 있는 그대로 사용할 때 어떤 문제가 발생할 수 있나요? 대상 모바일에 대해 어떻게 생각하나요? 스크린 리더나 기타 보조 기술은 어떻게 되나요?
사용자는 누구이며 어떤 기기 및 브라우저를 타겟팅하고 있나요?

를 통해 개인정보처리방침을 정의할 수 있습니다.

양식 테스트

많은 하드웨어를 획득하고 기기 실험실 기능이지만 다음과 같은 방법을 사용하면 더욱 저렴하고 간편하게 다양한 브라우저, 플랫폼, 기기에서 양식을 시험해 볼 수 있습니다.

Chrome DevTools 기기 모드 사용 휴대기기를 시뮬레이션할 수 있습니다.
컴퓨터에서 휴대전화로 URL을 보냅니다.
BrowserStack과 같은 서비스를 사용하여 범위에 대해 테스트합니다. 다양한 기기 및 브라우저입니다.
ChromeVox Chrome 확장 프로그램과 같은 스크린 리더 도구를 사용하여 양식을 사용해 보세요.

를 통해 개인정보처리방침을 정의할 수 있습니다.

앱 보기를 클릭하여 가입 양식을 미리 봅니다.

Chrome DevTools 기기 모드를 사용하여 다양한 기기에서 양식을 시험해 보세요.
이제 휴대전화나 다른 실제 기기에서 양식을 엽니다. 어떤 차이가 있나요?

2단계: CSS를 추가하여 양식 작동 개선

소스 보기를 클릭하여 소스 코드로 돌아갑니다.

지금까지는 HTML에 문제가 없었지만, 양식이 모든 종류의 데이터 세트에 제대로 작동하는지 사용자의 폭을 넓힐 수 있었습니다.

이 단계에서는 양식을 더 쉽게 사용할 수 있도록 CSS를 추가합니다.

다음 CSS를 모두 복사하여 css/main.css 파일에 붙여넣습니다.

앱 보기를 클릭하여 스타일이 지정된 가입 양식을 확인합니다. 그런 다음 소스 보기를 클릭하여 css/main.css입니다.

이 CSS는 다양한 브라우저와 화면 크기에서 작동하나요?
테스트 기기에 맞게 padding, margin, font-size를 조정해 보세요.
CSS는 모바일 우선입니다. 미디어 쿼리 너비가 400px 이상인 표시 영역에 CSS 규칙을 적용한 후 너비가 500px 이상인 표시 영역 다음 중단점이 무엇인가요? 충분합니까? 양식의 중단점은 어떻게 선택해야 하나요?

를 통해 개인정보처리방침을 정의할 수 있습니다.

3단계: 사용자의 데이터 입력에 도움이 되는 속성 추가

이 단계에서는 입력 요소에 속성을 추가하여 브라우저에서 저장하고 자동 완성할 수 있도록 합니다. 양식 필드 값, 누락되거나 잘못된 데이터가 있는 필드에 대한 경고를 표시합니다.

양식 코드가 다음과 같이 표시되도록 index.html 파일을 업데이트합니다.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

type 값을 사용하면 다음과 같이 여러 작업을 수행할 수 있습니다. * type="password"는 입력된 텍스트를 가리고 브라우저의 비밀번호 관리자를 사용하여 안전한 비밀번호를 추천합니다. * type="email"는 기본 유효성 검사를 제공하며 모바일 사용자에게 적절한 키보드를 제공합니다. 사용해 보기 해 봐!

앱 보기를 클릭한 다음 이메일 라벨을 클릭합니다. 어떤 일이 일어나나요? 포커스가 이메일로 이동합니다. 라벨에 이메일 입력의 id와 일치하는 for 값이 있기 때문에 입력이 되었습니다. 다른 라벨과 입력은 같은 방식으로 작동합니다. 또한 스크린 리더는 라벨 (또는 라벨의 포커스를 받습니다. ChromeVox 확장 프로그램을 사용하여 시도해 볼 수 있습니다.

입력란이 비어 있는 양식을 제출해 보세요. 브라우저가 양식을 제출하지 않고 초점을 맞추는 방법을 배우게 됩니다. 이는 require 속성을 모든 인코더-디코더입니다 이제 8자 미만의 비밀번호로 제출해 보세요. 브라우저는 minlength="8"로 인해 비밀번호가 충분히 길지 않고 비밀번호 입력에 포커스를 설정합니다. 속성의 값을 제공합니다. pattern (이름 입력에 사용됨) 및 기타 정책도 마찬가지입니다. 검증 제약 조건. 브라우저는 추가 코드 없이 이 모든 작업을 자동으로 수행합니다.

전체 이름 입력에 autocomplete 값 name을 사용하는 것이 합리적이지만, 어떻게 해야 할까요? * 이메일 입력의 autocomplete="username"은 브라우저의 비밀번호 관리자가 해당 정보를 저장한다는 의미입니다. 이메일 주소를 '이름'으로 해당 사용자 (사용자 이름!)에게 비밀번호를 제공해야 합니다. * 비밀번호의 autocomplete="new-password"는 비밀번호 관리자에 이 값을 현재 사이트의 비밀번호로 저장할 것인지 확인합니다. 그런 다음 autocomplete="current-password": 로그인 양식에서 자동 완성을 사용 설정합니다 (이것은 가입 양식).

4단계: 사용자가 보안 비밀번호를 입력하도록 지원하기

양식을 있는 그대로 사용할 때 비밀번호 입력에 문제가 있었나요?

다음과 같은 두 가지 문제가 있습니다. * 비밀번호 값에 제약이 있는지 확인할 방법이 없습니다. * 맞았는지 확인하기 위해 비밀번호가 표시되지 않습니다.

사용자가 추측하게 하지 마세요.

다음 코드를 사용하여 index.html의 비밀번호 섹션을 업데이트합니다.

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

이렇게 하면 사용자가 비밀번호를 입력하는 데 도움이 되는 새로운 기능이 추가됩니다.

비밀번호 표시를 전환하는 버튼 (실제로는 텍스트임)입니다. ( 버튼 기능은 자바스크립트와 함께 추가됩니다.)
비밀번호 전환 버튼의 aria-label 속성입니다.
비밀번호 입력의 aria-describedby 속성입니다. 스크린 리더 라벨 텍스트, 입력 유형 (비밀번호) 및 설명을 읽습니다.

비밀번호 전환 버튼을 사용 설정하고 사용자에게 비밀번호 제약조건에 대한 정보를 표시하려면 아래의 자바스크립트를 모두 복사하여 js/main.js 파일에 붙여넣으세요.

CSS는 이미 2단계에서 설정되었으며 비밀번호 전환 버튼이 어떻게 작동하는지 살펴보세요. 있습니다.)

텍스트보다 아이콘이 더 적합할까 비밀번호 표시를 전환하시겠습니까? 할인 사용성 테스트 사용해 보기 소규모의 친구나 동료와 소통해야 합니다
스크린 리더가 양식에서 어떻게 작동하는지 알아보려면 ChromeVox 확장 프로그램을 설치하고 양식을 탐색하세요. ChromeVox만 사용하여 양식을 작성할 수 있나요? 그렇지 않다면 어떤 점을 바꾸고 싶으신가요?

이 단계에서 양식은 다음과 같이 표시됩니다.

추가 정보

이 Codelab에서는 다음과 같은 몇 가지 중요한 기능을 다루지 않습니다.

유출된 비밀번호가 있는지 확인하는 중입니다. 유출된 비밀번호를 허용해서는 안 됩니다. 비밀번호 확인 서비스를 사용하여 유출된 비밀번호를 포착할 수 있으며 사용해야 합니다. 기존 서비스를 사용하거나 자체 서버에서 직접 서비스를 실행할 수 있습니다. 직접 해보기 비밀번호 추가 양식에 확인 중입니다.
서비스 약관 및 개인정보처리방침 문서 링크: 사용자에게 서비스 약관 및 정책을 중요하게 생각합니다.
스타일 및 브랜딩: 사이트의 나머지 부분과 어울리도록 만드세요. 이름과 주소를 입력할 때 결제를 할 때 사용자는 자신이 있는 것이라는 믿음을 가지고 안심할 수 있어야 합니다.
분석 및 실제 사용자 모니터링: 실제 사용자를 위해 양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있습니다.