이 Codelab에서는 안전하고 액세스 가능하며 사용하기 쉬운 로그인 양식을 빌드하는 방법을 알아봅니다.
1. 의미 있는 HTML 사용
작업을 위해 빌드된 다음 요소를 사용하세요.
<form><section><label><button>
앞으로 확인할 수 있듯이 이러한 요소는 기본 브라우저 기능을 사용하고 접근성을 높이며 마크업에 의미를 추가합니다.
프로젝트를 수정할 수 있도록 수정하려면 리믹스를 클릭합니다.
다음 코드를
<body>요소에 추가합니다.<form action="#" method="post"> <h1>Sign in</h1> <section> <label>Email</label> <input> </section> <section> <label>Password</label> <input> </section> <button>Sign in</button> </form>이 시점에서
index.html파일은 다음과 같이 표시됩니다.앱 보기를 클릭하여 로그인 양식을 미리 봅니다. 추가한 HTML이 올바르고 올바르지만 기본 브라우저 스타일 지정으로 인해 특히 휴대기기에서는 사용하기 힘들고 사용하기 어렵습니다.
소스 보기를 클릭하여 소스 코드로 돌아갑니다.
2. 손가락과 엄지손가락을 고려한 디자인
입력이 모바일에서 잘 작동하도록 패딩, 여백, 글꼴 크기를 조정합니다.
다음 CSS를 복사하여
style.css파일에 붙여넣습니다.앱 보기를 클릭하여 새로운 스타일의 로그인 양식을 확인합니다.
소스 보기를 클릭하여
style.css파일로 돌아갑니다.
코드가 꽤 많습니다. 크기 변경에 대해 알아두어야 할 주요 사항은 다음과 같습니다.
padding및margin는 입력에 추가됩니다.font-size는 모바일과 데스크톱에서 다릅니다.
:invalid 선택기는 입력에 잘못된 값이 있을 때 이를 나타내는 데 사용됩니다.
이 기능은 아직 작동하지 않습니다.
CSS 레이아웃은 모바일 중심입니다.
- 기본 CSS는 너비가 450픽셀 미만인 표시 영역에 사용됩니다.
- 미디어 쿼리 섹션은 너비가 450픽셀 이상인 표시 영역에 대한 재정의를 설정합니다.
이와 같이 자체 양식을 빌드할 때는 이 시점에서 데스크톱과 모바일의 실제 기기에서 코드를 테스트하는 것이 매우 중요합니다.
- 특히 시력이 나쁜 사람들도 라벨 및 입력 텍스트를 쉽게 읽을 수 있나요?
- 입력과 로그인 버튼이 엄지손가락으로 터치할 수 있을 정도로 큰가요?
3. 입력 속성을 추가하여 기본 제공 브라우저 기능 사용 설정
브라우저에서 입력 값을 저장 및 자동 완성하도록 사용 설정하고 내장된 비밀번호 관리 기능에 대한 액세스를 제공합니다.
다음과 같이 표시되도록 양식 HTML에 속성을 추가합니다.
<form action="#" method="post"> <h1>Sign in</h1> <section> <label for="email">Email</label> <input id="email" name="email" type="email" autocomplete="username" required autofocus> </section> <section> <label for="password">Password</label> <input id="password" name="password" type="password" autocomplete="current-password" required> </section> <button id="sign-in">Sign in</button> </form>앱을 다시 확인한 후 이메일을 클릭합니다.
포커스가 이메일 입력으로 이동하는 방식을 확인하세요. 이는 라벨이
for="email"속성을 통해 입력과 연결되기 때문입니다. 또한 스크린 리더는 라벨 또는 라벨과 연결된 입력에 포커스가 있을 때 라벨 텍스트를 알려줍니다.휴대기기에서 이메일 입력에 포커스를 둡니다.
키보드가 이메일 주소 입력에 어떻게 최적화되어 있는지 확인하세요. 예를 들어
@및.문자는 기본 키보드에 표시될 수 있고 운영체제에서는 키보드 위에 저장된 이메일을 표시할 수 있습니다. 이 모든 것은type="email"속성이<input>요소에 적용되기 때문에 발생합니다.
비밀번호 입력에 텍스트를 입력합니다.
type="password"속성이 요소에 적용되었기 때문에 텍스트가 기본적으로 숨겨집니다.
autocomplete,name,id,type속성은 브라우저가 나중에 자동 완성에 사용할 수 있는 데이터를 저장하기 위해 입력의 역할을 이해하는 데 도움이 됩니다.
- 데스크톱 기기에서 이메일 입력에 포커스를 맞추고 텍스트를 입력합니다.
Fullscreen
을 클릭하면 앱의 URL을 볼 수 있습니다. 브라우저에 이메일 주소를 저장한 경우
저장된 이메일 중에서 선택할 수 있는 대화상자가 표시될 것입니다. 이는 이메일 입력에 autocomplete="username"속성이 적용되었기 때문에 발생합니다.
autocomplete="username"및autocomplete="current-password"는 브라우저가 저장된 값을 사용하여 입력을 자동 완성하도록 도와줍니다.
브라우저마다 다양한 기법을 사용하여 양식 입력의 역할을 파악하고 다양한 웹사이트에 자동 완성을 제공합니다.
속성을 추가 및 삭제하여 직접 시도해 보세요.
여러 플랫폼에서 동작을 테스트하는 것은 매우 중요합니다. 기기별로 값을 입력하고 다양한 브라우저에서 양식을 제출해야 합니다. 오픈소스 프로젝트에서 무료로 제공되는 BrowserStack을 사용하여 다양한 플랫폼에서 쉽게 테스트할 수 있습니다. 사용해 보기
이 시점에서 index.html 파일은 다음과 같이 표시됩니다.
4. 비밀번호 표시를 전환하는 UI 추가
사용성 전문가는 사용자가 비밀번호 입력란에 입력한 텍스트를 볼 수 있는 아이콘이나 버튼을 추가할 것을 적극 권장합니다. 이 작업은 기본적으로 제공되지 않으므로 JavaScript로 직접 구현해야 합니다.
이 기능을 추가하는 코드는 간단합니다. 이 예에서는 아이콘이 아닌 텍스트를 사용합니다.
index.html, style.css, script.js 파일을 다음과 같이 업데이트합니다.
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="current-password" required> </section>style.css파일 하단에 다음 CSS를 추가합니다.button#toggle-password { background: none; border: none; cursor: pointer; font-weight: 300; padding: 0; position: absolute; top: -4px; right: -2px; }이렇게 하면 비밀번호 표시 버튼이 일반 텍스트처럼 보이며 비밀번호 섹션의 오른쪽 상단에 표시됩니다.
다음 JavaScript를
script.js파일에 추가하여 비밀번호 표시를 전환하고 적절한aria-label를 설정합니다.const passwordInput = document.getElementById('password'); const togglePasswordButton = document.getElementById('toggle-password'); togglePasswordButton.addEventListener('click', togglePassword); function togglePassword() { if (passwordInput.type === 'password') { passwordInput.type = 'text'; togglePasswordButton.textContent = 'Hide password'; togglePasswordButton.setAttribute('aria-label', 'Hide password.'); } else { passwordInput.type = 'password'; togglePasswordButton.textContent = 'Show password'; togglePasswordButton.setAttribute('aria-label', 'Show password as plain text. ' + 'Warning: this will display your password on the screen.'); } }지금 비밀번호 표시 로직을 사용해 보세요.
- 앱을 봅니다.
- 비밀번호 입력란에 텍스트를 입력합니다.
- Show password(비밀번호 표시)를 클릭합니다.
서로 다른 운영체제의 여러 브라우저에서 네 번째 단계를 반복합니다.
UX 디자인을 생각해 보세요. 사용자가 비밀번호 표시를 알아채고 이해할 수 있을까요? 이 기능을 제공하는 더 좋은 방법이 있나요? 지금 바로 소규모 친구 또는 동료 그룹을 대상으로 할인 사용성 테스트를 시도해 보시기 바랍니다.
이 기능이 스크린 리더에서 어떻게 작동하는지 알아보려면 ChromeVox 기본 확장 프로그램을 설치하고 양식을 살펴보세요. aria-label 값이 의도한 대로 작동하나요?
Gmail과 같은 일부 웹사이트에서는 텍스트가 아닌 아이콘을 사용하여 비밀번호 표시를 전환합니다. 이 Codelab을 마쳤으면 SVG 이미지를 사용하여 구현합니다. 머티리얼 디자인은 무료로 다운로드할 수 있는 고품질 아이콘을 제공합니다.
이 시점에서 코드는 다음과 같습니다.
5. 양식 유효성 검사 추가
사용자가 양식을 제출하기 전에 데이터 유효성을 검사하고 변경해야 할 사항을 보여주면 사용자가 데이터를 정확하게 입력하도록 할 수 있습니다.
HTML 양식 요소 및 속성에는 기본 유효성 검사를 위한 기능이 내장되어 있지만, 사용자가 데이터를 입력하고 양식을 제출하려고 할 때 더욱 강력한 유효성 검사를 수행하려면 JavaScript를 사용해야 합니다.
이 단계에서는 Constraint Validation API(폭넓게 지원됨)를 사용하여 포커스를 설정하고 메시지를 표시하는 기본 제공 브라우저 UI로 커스텀 유효성 검사를 추가합니다.
사용자에게 비밀번호 및 기타 입력의 제약조건을 알립니다. 추측하게 하지 마세요.
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="current-password" aria-describedby="password-constraints" required> <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div> </section>
여기에는 두 가지 새로운 기능이 추가되었습니다.
- 비밀번호 제약조건에 대한 정보
- 비밀번호 입력의
aria-describedby속성 (스크린 리더는 라벨 텍스트, 입력 유형 (비밀번호), 설명)을 읽습니다.)
style.css파일 하단에 다음 CSS를 추가합니다.div#password-constraints { margin: 5px 0 0 0; font-size: 16px; }script.js파일에 다음 자바스크립트를 추가합니다.passwordInput.addEventListener('input', resetCustomValidity); function resetCustomValidity() { passwordInput.setCustomValidity(''); } // A production site would use more stringent password testing. function validatePassword() { let message= ''; if (!/.{8,}/.test(passwordInput.value)) { message = 'At least eight characters. '; } if (!/.*[A-Z].*/.test(passwordInput.value)) { message += 'At least one uppercase letter. '; } if (!/.*[a-z].*/.test(passwordInput.value)) { message += 'At least one lowercase letter.'; } passwordInput.setCustomValidity(message); } const form = document.querySelector('form'); const signinButton = document.querySelector('button#sign-in'); form.addEventListener('submit', handleFormSubmission); function handleFormSubmission(event) { event.preventDefault(); validatePassword(); form.reportValidity(); if (form.checkValidity() === false) { } else { // On a production site do form submission. alert('Logging in!') signinButton.disabled = 'true'; } }사용해 보기
모든 최신 브라우저에는 양식 유효성 검사를 위한 내장 기능이 있으며 JavaScript를 사용한 유효성 검사가 지원됩니다.
- 잘못된 이메일 주소를 입력하고 로그인을 클릭합니다. 브라우저에 경고가 표시됩니다. JavaScript가 필요하지 않습니다.
- 유효한 이메일 주소를 입력한 다음 비밀번호 값을 입력하지 않고 로그인을 클릭합니다. 브라우저에서 필수 값이 누락되었음을 경고하고 비밀번호 입력에 포커스를 설정합니다.
- 잘못된 비밀번호를 입력하고 로그인을 클릭합니다. 이제 문제에 따라 다른 메시지가 표시됩니다.
다양한 방법으로 사용자가 이메일 주소와 비밀번호를 입력하도록 도와주세요. 비밀번호 양식 필드 개선은 기발한 제안을 제공합니다.
이 시점에서 코드는 다음과 같습니다.
더 알아보기
이 Codelab에는 표시되지 않지만 다음 네 가지 중요한 로그인 양식 기능은 여전히 필요합니다.
사용자가 비밀번호를 쉽게 재설정할 수 있는 버튼인 비밀번호를 잊으셨나요?를 추가합니다.
사용자가 데이터를 보호하는 방법을 알 수 있도록 서비스 약관 및 개인정보처리방침 문서로 연결합니다.
스타일과 브랜딩을 고려하고 이러한 추가 기능이 웹사이트의 나머지 부분과 일치하도록 하세요.
양식 디자인의 성능과 사용성을 테스트하고 모니터링할 수 있도록 애널리틱스 및 RUM을 추가합니다.