더 강력한 양식 제어 기능

새로운 이벤트와 맞춤 요소 API를 사용하면 양식에 참여하는 것이 훨씬 쉬워졌습니다.

많은 개발자는 브라우저에 내장되지 않은 컨트롤을 제공하거나 내장된 양식 컨트롤로 가능한 것 이상의 모양과 느낌을 맞춤설정하기 위해 맞춤 양식 컨트롤을 빌드합니다.

하지만 기본 제공 HTML 양식 컨트롤의 기능을 복제하기는 어려울 수 있습니다. <input> 요소를 양식에 추가할 때 자동으로 제공되는 몇 가지 기능을 살펴보세요.

• 입력한 내용은 양식의 컨트롤 목록에 자동으로 추가됩니다.
• 입력 값은 양식과 함께 자동으로 제출됩니다.
• 입력이 양식 유효성 검사에 참여합니다. :valid 및 :invalid 가상 클래스를 사용하여 입력에 스타일을 지정할 수 있습니다.
• 양식이 재설정되거나, 양식이 새로고침되거나, 브라우저에서 양식 항목을 자동 완성하려고 할 때 입력에 알림이 전송됩니다.

맞춤 양식 컨트롤에는 일반적으로 이러한 기능이 거의 없습니다. 개발자는 양식 제출에 참여하도록 양식에 숨겨진 <input>를 추가하는 등 JavaScript의 일부 제한사항을 해결할 수 있습니다. 하지만 다른 기능은 JavaScript만으로는 재현할 수 없습니다.

두 가지 새로운 웹 기능을 사용하면 맞춤 양식 컨트롤을 더 쉽게 빌드하고 기존 맞춤 컨트롤의 제한사항을 없앨 수 있습니다.

• formdata 이벤트를 사용하면 임의의 JavaScript 객체가 양식 제출에 참여할 수 있으므로 숨겨진 <input>를 사용하지 않고도 양식 데이터를 추가할 수 있습니다.
• 양식 연결 맞춤 요소 API를 사용하면 맞춤 요소가 내장 양식 컨트롤처럼 작동할 수 있습니다.

이 두 가지 기능을 사용하여 더 효과적인 새로운 유형의 컨트롤을 만들 수 있습니다.

이벤트 기반 API

formdata 이벤트는 모든 JavaScript 코드가 양식 제출에 참여할 수 있도록 하는 하위 수준 API입니다. 이 메커니즘은 다음과 같이 작동합니다.

1. 상호작용하려는 양식에 formdata 이벤트 리스너를 추가합니다.
2. 사용자가 제출 버튼을 클릭하면 양식에서 formdata 이벤트를 실행하며, 이 이벤트는 제출되는 모든 데이터를 보유하는 FormData 객체를 포함합니다.
3. 각 formdata 리스너는 양식이 제출되기 전에 데이터를 추가하거나 수정할 수 있습니다.

다음은 formdata 이벤트 리스너에서 단일 값을 전송하는 예입니다.

const form = document.querySelector('form');
// FormData event is sent on <form> submission, before transmission.
// The event has a formData property
form.addEventListener('formdata', ({formData}) => {
  // https://developer.mozilla.org/docs/Web/API/FormData
  formData.append('my-input', myInputValue);
});

Glitch의 예시를 사용하여 이 기능을 사용해 보세요. API가 작동하는 모습을 보려면 Chrome 77 이상에서 실행해야 합니다.

브라우저 호환성

양식 연결된 맞춤 요소

이벤트 기반 API는 모든 종류의 구성요소에서 사용할 수 있지만 제출 프로세스와만 상호작용할 수 있습니다.

표준화된 양식 컨트롤은 제출 외에도 양식 수명 주기의 여러 부분에 참여합니다. 양식 연결 맞춤 요소는 맞춤 위젯과 내장 컨트롤 간의 격차를 해소하는 것을 목표로 합니다. 양식 연결된 맞춤 요소는 표준화된 양식 요소의 많은 기능과 일치합니다.

• <form> 내에 양식 연결 커스텀 요소를 배치하면 브라우저에서 제공하는 컨트롤과 마찬가지로 양식과 자동으로 연결됩니다.
• <label> 요소를 사용하여 요소에 라벨을 지정할 수 있습니다.
• 이 요소는 양식과 함께 자동으로 제출되는 값을 설정할 수 있습니다.
• 요소는 유효한 입력이 있는지 여부를 나타내는 플래그를 설정할 수 있습니다. 양식 컨트롤 중 하나에 잘못된 입력이 있으면 양식을 제출할 수 없습니다.
• 이 요소는 양식이 사용 중지되거나 기본 상태로 재설정되는 경우와 같이 양식 수명 주기의 다양한 부분에 콜백을 제공할 수 있습니다.
• 이 요소는 :disabled 및 :invalid와 같은 양식 컨트롤의 표준 CSS 가상 클래스를 지원합니다.

기능이 정말 많네요. 이 도움말에서는 모든 요소를 다루지는 않지만 맞춤 요소를 양식과 통합하는 데 필요한 기본사항을 설명합니다.

양식 연결된 맞춤 요소 정의

맞춤 요소를 양식과 연결된 맞춤 요소로 바꾸려면 몇 가지 추가 단계를 거쳐야 합니다.

• 맞춤 요소 클래스에 정적 formAssociated 속성을 추가합니다. 이렇게 하면 브라우저가 요소를 양식 컨트롤처럼 처리합니다.
• 요소에서 attachInternals() 메서드를 호출하여 setFormValue() 및 setValidity()와 같은 양식 컨트롤의 추가 메서드와 속성에 액세스합니다.
• 양식 컨트롤에서 지원하는 공통 속성 및 메서드(예: name, value, validity)를 추가합니다.

다음은 이러한 항목이 기본 맞춤 요소 정의에 어떻게 적용되는지 보여줍니다.

// Form-associated custom elements must be autonomous custom elements--
// meaning they must extend HTMLElement, not one of its subclasses.
class MyCounter extends HTMLElement {

  // Identify the element as a form-associated custom element
  static formAssociated = true;

  constructor() {
    super();
    // Get access to the internal form control APIs
    this.internals_ = this.attachInternals();
    // internal value for this control
    this.value_ = 0;
  }

  // Form controls usually expose a "value" property
  get value() { return this.value_; }
  set value(v) { this.value_ = v; }

  // The following properties and methods aren't strictly required,
  // but browser-level form controls provide them. Providing them helps
  // ensure consistency with browser-provided controls.
  get form() { return this.internals_.form; }
  get name() { return this.getAttribute('name'); }
  get type() { return this.localName; }
  get validity() {return this.internals_.validity; }
  get validationMessage() {return this.internals_.validationMessage; }
  get willValidate() {return this.internals_.willValidate; }

  checkValidity() { return this.internals_.checkValidity(); }
  reportValidity() {return this.internals_.reportValidity(); }

  …
}
customElements.define('my-counter', MyCounter);

등록되면 브라우저에서 제공하는 양식 컨트롤을 사용하는 모든 위치에서 이 요소를 사용할 수 있습니다.

<form>
  <label>Number of bunnies: <my-counter></my-counter></label>
  <button type="submit">Submit</button>
</form>

값 설정

attachInternals() 메서드는 양식 컨트롤 API에 대한 액세스를 제공하는 ElementInternals 객체를 반환합니다. 가장 기본적인 메서드는 컨트롤의 현재 값을 설정하는 setFormValue() 메서드입니다.

setFormValue() 메서드는 다음 세 가지 유형의 값 중 하나를 사용할 수 있습니다.

• 문자열 값입니다.
• File 객체
• FormData 객체 FormData 객체를 사용하여 여러 값을 전달할 수 있습니다. 예를 들어 신용카드 입력 컨트롤은 카드 번호, 만료일, 인증 코드를 전달할 수 있습니다.

간단한 값을 설정하려면 다음 단계를 따르세요.

this.internals_.setFormValue(this.value_);

여러 값을 설정하려면 다음과 같이 하면 됩니다.

// Use the control's name as the base name for submitted data
const n = this.getAttribute('name');
const entries = new FormData();
entries.append(n + '-first-name', this.firstName_);
entries.append(n + '-last-name', this.lastName_);
this.internals_.setFormValue(entries);

입력 검증

컨트롤은 내부 객체에서 setValidity() 메서드를 호출하여 양식 유효성 검사에 참여할 수도 있습니다.

// Assume this is called whenever the internal value is updated
onUpdateValue() {
  if (!this.matches(':disabled') && this.hasAttribute('required') &&
      this.value_ < 0) {
    this.internals_.setValidity({customError: true}, 'Value cannot be negative.');
  }
  else {
    this.internals_.setValidity({});
  }
  this.internals.setFormValue(this.value_);
}

내장 양식 컨트롤과 마찬가지로 :valid 및 :invalid 가상 클래스를 사용하여 양식 연결 맞춤 요소의 스타일을 지정할 수 있습니다.

수명 주기 콜백

양식 연결된 맞춤 요소 API에는 양식 수명 주기에 연결할 수 있는 추가 수명 주기 콜백 집합이 포함되어 있습니다. 콜백은 선택사항입니다. 요소가 수명 주기의 특정 시점에 무언가를 해야 하는 경우에만 콜백을 구현합니다.

void formAssociatedCallback(form)

브라우저가 요소를 양식 요소와 연결하거나 양식 요소에서 요소의 연결을 해제할 때 호출됩니다.

void formDisabledCallback(disabled)

이 요소의 disabled 속성이 추가 또는 삭제되었거나 이 요소의 조상인 <fieldset>에서 disabled 상태가 변경되어 요소의 disabled 상태가 변경된 후에 호출됩니다. disabled 매개변수는 요소의 새로운 사용 중지 상태를 나타냅니다. 예를 들어 요소가 사용 중지되면 shadow DOM의 요소를 사용 중지할 수 있습니다.

void formResetCallback()

양식이 재설정된 후 호출됩니다. 요소는 일종의 기본 상태로 재설정되어야 합니다. <input> 요소의 경우 일반적으로 마크업에 설정된 value 속성과 일치하도록 value 속성을 설정하거나 체크박스의 경우 checked 속성과 일치하도록 checked 속성을 설정합니다.

void formStateRestoreCallback(state, mode)

다음 두 가지 상황에서 호출됩니다.

• 브라우저가 요소의 상태를 복원할 때 (예: 탐색 후 또는 브라우저가 다시 시작될 때) 이 경우 mode 인수는 "restore"입니다.
• 양식 자동 완성과 같은 브라우저의 입력 지원 기능이 값을 설정하는 경우 이 경우 mode 인수는 "autocomplete"입니다.

첫 번째 인수의 유형은 setFormValue() 메서드가 호출된 방식에 따라 다릅니다. 자세한 내용은 양식 상태 복원을 참고하세요.

양식 상태 복원 중

페이지로 돌아가거나 브라우저를 다시 시작하는 경우와 같이 경우에 따라 브라우저가 양식을 사용자가 종료한 상태로 복원하려고 할 수 있습니다.

양식 연결 맞춤 요소의 경우 복원된 상태는 setFormValue() 메서드에 전달하는 값에서 가져옵니다. 이전 예와 같이 단일 값 매개변수를 사용하여 메서드를 호출하거나 두 개의 매개변수를 사용하여 호출할 수 있습니다.

this.internals_.setFormValue(value, state);

value는 컨트롤의 제출 가능한 값을 나타냅니다. 선택적 state 매개변수는 컨트롤 상태의 내부 표현으로, 서버로 전송되지 않는 데이터가 포함될 수 있습니다. state 매개변수는 value 매개변수와 동일한 유형을 사용합니다. 문자열, File 또는 FormData 객체일 수 있습니다.

state 매개변수는 값만으로는 컨트롤의 상태를 복원할 수 없는 경우에 유용합니다. 예를 들어 팔레트 또는 RGB 색상환이라는 여러 모드가 있는 색상 선택 도구를 만든다고 가정해 보겠습니다. 제출 가능한 값은 선택한 색상을 표준 형식(예: "#7fff00")으로 나타낸 것입니다. 하지만 컨트롤을 특정 상태로 복원하려면 컨트롤이 어떤 모드에 있었는지 알아야 하므로 상태는 "palette/#7fff00"처럼 보일 수 있습니다.

this.internals_.setFormValue(this.value_,
    this.mode_ + '/' + this.value_);

코드는 저장된 상태 값을 기반으로 상태를 복원해야 합니다.

formStateRestoreCallback(state, mode) {
  if (mode == 'restore') {
    // expects a state parameter in the form 'controlMode/value'
    [controlMode, value] = state.split('/');
    this.mode_ = controlMode;
    this.value_ = value;
  }
  // Chrome currently doesn't handle autofill for form-associated
  // custom elements. In the autofill case, you might need to handle
  // a raw value.
}

더 간단한 컨트롤 (예: 숫자 입력)의 경우 값이 컨트롤을 이전 상태로 복원하는 데 충분할 수 있습니다. setFormValue()를 호출할 때 state를 생략하면 값이 formStateRestoreCallback()에 전달됩니다.

formStateRestoreCallback(state, mode) {
  // Simple case, restore the saved value
  this.value_ = state;
}

작동하는 예

다음 예에서는 양식 관련 맞춤 요소의 여러 기능을 종합적으로 보여줍니다. API가 작동하는 모습을 보려면 Chrome 77 이상에서 실행해야 합니다.

기능 감지

기능 감지를 사용하여 formdata 이벤트와 양식 관련 맞춤 요소를 사용할 수 있는지 확인할 수 있습니다. 현재 두 기능에 대해 출시된 폴리필은 없습니다. 두 경우 모두 숨겨진 양식 요소를 추가하여 컨트롤의 값을 양식으로 전파할 수 있습니다. 양식 관련 맞춤 요소의 고급 기능 중 상당수는 폴리필하기 어렵거나 불가능할 수 있습니다.

if ('FormDataEvent' in window) {
  // formdata event is supported
}

if ('ElementInternals' in window &&
    'setFormValue' in window.ElementInternals.prototype) {
  // Form-associated custom elements are supported
}

결론

formdata 이벤트 및 양식 연결 맞춤 요소는 맞춤 양식 컨트롤을 만드는 새로운 도구를 제공합니다.

formdata 이벤트는 새로운 기능을 제공하지 않지만 숨겨진 <input> 요소를 만들지 않고도 제출 프로세스에 양식 데이터를 추가할 수 있는 인터페이스를 제공합니다.

양식 연결 맞춤 요소 API는 내장 양식 컨트롤처럼 작동하는 맞춤 양식 컨트롤을 만드는 새로운 기능 집합을 제공합니다.

히어로 이미지: Unsplash의 Oudom Pravat 제공