대부분의 웹 응용 프로그램은 폼을 사용해 사용자에게서 데이터를 가져옵니다. 폼이 텍스트 상자, 토글, 버튼, 체크박스 또는 사용자 정의 컨트롤 중 어떤 것으로 이루어져 있든 간에 웹 개발자는 폼과 관련해 사용자를 만족시키고 전환을 늘리겠다는 목적 의식이 있어야 합니다.

하지만 훌륭한 폼을 구성하는 것은 쉽지 않습니다. 사용자가 요구하는 정보의 양, 자동 완성 및 유효성 검사, 접근성 및 모바일 장치, 레이아웃 문제 등 설명할 요인이 많습니다.

JavaScript 응용 프로그램에서 입력 컨트롤 사용하기

최신 Wijmo 빌드에서는 wj-labeled-control CSS 규칙을 개선하여 wijmo.css로 이동하였습니다. 따라서 Wijmo를 응용 프로그램에서 사용하기가 그 어느 때보다도 쉬워졌습니다.

wj-labeled-control의 작동 방식을 이해하려면 다음과 같은 단순 폼을 고려하십시오.

<form>
  <label for="email">E-mail</label>
  <input id="email" autocomplete="email" required pattern="\S+@\S+\.\S+"/>
  <br/>
  <label for="country">Country</label>
  <input id="country" required />
  <br/>
  <label for="notifications1">Send me notifications</label>
  <input id="notifications1" type="checkbox"/>
</form>

그러면 다음과 같은 폼이 만들어집니다.

이렇게만 만들어도 기능을 수행할 수 있지만 레이블이 적절히 정렬되어 있지 않고, 제공된 유효성 검사는 기초 단계에 머물러 있습니다.

Wijmo 입력 컨트롤과 wj-labeled-input CSS 클래스를 사용하여 이 폼을 쉽게 개선할 수 있습니다.

<form>
  <div class="wj-labeled-input wide">
    <input id="email" autocomplete="email" required pattern="\S+@\S+\.\S+">
    <label for="email">E-mail</label>
    <div class="wj-error" tabindex="-1">We need a valid e-mail...</div>
  </div>
  <div class="wj-labeled-input">
    <input id="country" items-source="countrie">
    <label for="country">Country</label>
  </div>
  <div class="wj-labeled-input-switch">
    <input id="notifications" type="checkbox">
    <label for="notifications">Send me notifications</label>
  </div>
</form>

다음 코드를 사용하여 "Country" 입력 요소를 Wijmo ComboBox로 변환합니다(Angular, React 또는 Vue와 같은 프레임워크를 사용하고 있다면 마크업에서 ComboBox를 직접 지정할 수 있음). 

new ComboBox('#country', {< 
  itemsSource: 'US,UK,Japan,Germany,France,Italy,Russia,China'.split(','), 
  isRequired: false, 
  isEditable: true,
  text: '' 
});

그러면 다음과 같은 폼을 얻게 됩니다.

이렇게만 해도 폼이 더 깔끔해 보이고, 체크박스 스타일도 더 나아 보입니다. "스위치" 스타일을 사용해 체크박스를 기존 체크박스가 아닌 스위치 컨트롤로 표시하였습니다.

일반적으로 스위치는 작업을 즉시 수행할 때 기존 체크박스보다 선호됩니다. (원래 이 예시에서 사용하지 말았어야 했지만, 이 옵션을 보여주기 위해 사용해 보았습니다.) 스위치나 체크박스 선택에 관한 자세한 내용은 예시를 포함해 체크박스와 토글 스위치 비교 문서를 참조하십시오.

입력 폼에 CSS 추가

하지만 폼이 그다지 눈길을 사로잡지는 않습니다. 사용자가 이메일 입력을 클릭하면 어떤 일이 발생하는지 보겠습니다.

자리 표시자가 자리를 내어주고(멋진 애니메이션 효과와 함께) 입력 요소 아래에 밑줄이 표시됩니다. 사용자가 이메일 입력을 입력하기 시작하면 어떤 일이 발생하는지 확인하십시오.

이메일 입력이 유효한 이메일 주소가 아니므로 필드에는 유효성 검사 메시지가 표시됩니다.

주소를 입력한 후 사용자는 ComboBox에 입력하거나 드롭다운 목록에서 선택하여(목록에 없는 국가는 입력할 수 없음) 국가를 입력할 수 있습니다.

이렇게 하면 다 마친 것입니다. 이제 폼이 다음과 같이 완성되었습니다.

wj-labeled-input CSS는 모든 종류의 폼에 사용할 수 있어 일관성 있는 외관과 느낌을 사용자에게 제공합니다. 이 CSS는 체크박스("스위치" 컨트롤로 스타일을 지정할 수 있음), 라디오 버튼과 같은 Wijmo의 입력 컨트롤 및 기본 입력 요소와 함께 작동합니다.

또한 Wijmo의 테마를 지원하므로 어떤 폼을 선택하든 폼이 훌륭한 외관을 갖추게 됩니다. 예를 들어 동일 폼을 "Office" 테마를 사용하여 렌더링하면 다음과 같이 됩니다.

wj-labeled-input CSS를 자유롭게 활용해 유용한 폼을 만드시기 바랍니다.