[반응형 디자인 / 개발] Forms

Selectors

Learn Forms

Capturing user input

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

id 속성은 <input>을 <label>과 연결지어준다.
그럼 name이나 type 속성은 무슨 역할을 하는가?

The name attribute

사용자가 컨트롤로 입력하는 데이터를 식별하려면 name 속성을 사용한다.
form을 제출할 때, 이 name이 요청에 포함된다. 예를 들어, fruit라는 이름의 input에 사용자가 strawberry라고 입력을 한 경우라면 요청에 이 정보가 fruit=strawberry로 포함될 것이다.

Input types

fieldset

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

autofill

<main>
  <div class="wrapper">
    <form>
      <div>
        <label for="address-one">Address line</label>
        <input autocomplete="address-line1" required type="text" id="address-one" name="address-one">
      </div>
      <div>
        <label for="city">City</label>
        <input autocomplete="address-level2" required type="text" id="city" name="city">
      </div>
      <div>
        <label for="state">State / Province / Region (optional)</label>
        <input autcomplete="address-level1" type="text" id="state" name="state">
      </div>
      <div>
 <label for="zip">ZIP / Postal code (optional)</label>
        <input autocomplete="postal-code" type="text" id="zip" name="zip">
      </div>
      <div>
 <label for="country">Country</label>
        <input autocomplete="country" type="text" id="country" name="country">
      </div>
      <button>Save address</button>
    </form>
  </div>
</main>

회원가입 또는 유저 인증 시 사용하는 SMS 코드를 input에서 바로 자동완성 시키는 경험을 한 적이 있다면?
=> Safari 14 이후부터는 autocomplete='one-time-code'를 사용하면 된다.
=> 크롬이나 안드로이드의 경우, WebOTP API를 사용하면 된다.
=> 참고 사항 : SMS OTP from best practices

Help users enter the right data in forms

Communicate your validation rules

<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
  name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>

모든 사용자가 유효성 검사 규칙을 이해할 수 있도록 해야한다.
위 예시의 경우, form의 id를 사용한 aria-describeby 속성을 추가해서 규칙을 알게 한다.
그렇다면 조금더 복잡한 규칙을 적용하고 싶을 땐 어떻게 할까?
아래의 Pattern attribute를 사용하면 된다.

Pattern attribute

정규표현식과 같은 형태로 HTML attribute pattern 규칙을 적용할 수 있다.
아래의 예시에서 input은 소문자 알파벳으로 이루어진 2~20자의 입력값을 규칙으로 하게 된다.

<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">

만약 대문자도 허용하고 싶다면, pattern을 다음과 같이 변경하여야 한다.
pattern="[a-zA-Z]{2-20}"

How to style a required form field

사용자에게 해당하는 input이 필수입력 항목인 경우를 보여주고자 하는 경우는 어떻게 해야할까?
아래와 같이 :required라고 하는 pseudo-class를 사용하면 된다.

input:required {
  border: 2px solid;
}

Style invalid form controls

유효하지 않은 form 상태를 표시하고 싶은 경우는 다음과 같이 적용하면 된다.
:invalid라는 pseudo-class이다.
반대로 유효한 form의 경우라면 :valid pseudo-class를 적용하면 된다.

input:invalid {
  border: 2px solid red;
}

물론 유효하지 않은 경우에 대하여 빨간 색으로 처리하는 것이 완전한 해결법은 아니다.
적녹색맹 사용자와 같은 경우는 전혀 구별이 안 되기 때문에, 명확한 아이콘이나 텍스트를 추가하는 것이 좋다.

Validation with Javascript

Provide meaningful error messages

브라우저마다 유효성 검사에 따른 에러 메시지가 동일하지 않다는 걸 알 수 있다.
어떻게 하면 항상 같은 메시지를 모두에게 보여줄 수 있을까?

Constraint Validation API의 setCustomValidity() 메서드를 사용하면 가능하다.
아래의 예시는 name이라는 name을 가지는 요소가 invalid 상태가 될 경우 보여줄 에러 메시지를 javascript로 정의하고 있다.

const nameInput = document.querySelector('[name="name"]');

nameInput.addEventListener('invalid', () => {
    nameInput.setCustomValidity('Please enter your name.');
 });

Test forms across devices and platforms

Ensure your form works with different devices, browsers, platforms, and different contexts.

Accessible tap targets

Avoid multi column forms

A/B Testing

Accessibility

1. form field의 목적을 이해하게 하라

2. meaningful HTML(semantic tag)을 사용해라

3. 기대하는 데이터 포맷을 알려줘라

일반적으로는 form control 아래에 정보를 제공하고, assistive 장치들을 위해서는 form control에 aria-describedby 속성을 사용해라.

4. 에러 메시지를 찾을 수 있도록 도와라

일반적으로는 에러 메시지를 form control 근처에 배치한다. assistive 장치들을 위해서는 에러 메시지에 aria-live='assertive'를 사용해라. ARIA 라이브 영역은 오류가 표시되는 순간 화면 판독기 사용자에게 에러를 알린다.
다만 aria-live를 사용하면, 여러 filed가 있을 때 항상 첫번째 에러에 대해서는 알려주는 문제가 있다.
이럴 경우는 다음 글에서처럼 여러 에러들을 합쳐서 하나의 메시지로 만드는 방법이 있다.

5. 사용자가 확실히 에러를 인지할 수 있게 하라

붉은 색 표시와 같은 것 보다 더 나아가 아이콘 / 에러 메시지들을 에러 타입에 맞게끔. 추가하는 것이 좋다.

6. form을 탐색할 수 있도록 도와라

7. 현재 focus 상태인 form을 알 수 있게 도와라

기본 :focus 스타일을 제거하고 focus indicator를 키보드 사용자에게 보여주고 싶을 때에는 :focus-visible pseudo-class를 사용해라.