폼은 사용자가 데이터를 입력하거나 옵션을 설정하는 등의 작업을 수행할 수 있도록 관련된 컨트롤 요소를 그룹화한 것을 말합니다.
Pattern
필요에 따라 입력 폼, 버튼, 셀렉트 등 다양한 입력 요소를 하나의 양식으로 구성하여 사용합니다. 모든 양식은 일관적인 계층 구조를 유지하고 연관된 항목들로 그룹화하여 사용자의 인지 부하를 최소화 합니다.
#기본 구성
양식은 타이틀과 입력 요소, 그리고 다음 프로세스로 진행을 위한 버튼으로 구성하여 사용합니다.
•
계층 구조를 시각적으로 쉽게 인지하도록 여백이나 폰트를 사용하고 일관성을 유지합니다.
•
양식 내 입력 영역은 균일한 너비로 최대 4분할까지 나누어 사용할 수 있습니다.
•
제출 또는 진행 버튼은 양식 전체를 대상으로 한다는 것을 분명히 인지 할 수 있도록 배치하여 사용합니다.
•
필요에 따라 툴팁, 팝오버, 모달 등 오버레이 요소를 사용할 수 있습니다.
#확장 구성 1
필요에 따라 여러 개의 영역으로 나누어 양식을 구성할 수 있습니다.
•
각 영역은 연관된 요소들의 그룹으로 이루어집니다.
•
영역별 타이틀을 반드시 사용합니다.
•
각 영역 간의 시각적 구분을 위해 구분선 또는 영역별 배경색 등을 사용합니다.
•
영역 안에서 버튼을 사용하는 경우에는 해당 영역 내 요소를 대상으로 기능한다는 것을 분명히 인지할 수 있도록 크기, 색상, 위치 등을 결정합니다.
•
제출 또는 진행 버튼은 양식 전체를 대상으로 한다는 것을 분명히 인지 할 수 있도록 배치하여 사용합니다.
#확장 구성 2
사용자의 선택에 따라 입력 세트를 분류하여 제공하는 경우에는 양식 안에 탭 요소를 사용할 수 있습니다.
•
탭 패널의 영역을 시각적으로 분명히 인지할 수 있도록 구분선, 배경색 등을 사용합니다.
•
하나의 탭 내 속한 입력 요소만 사용할 수 있습니다.
•
모든 탭의 입력 요소에 입력을 했더라도 저장 시점 당시에 활성화 된 탭에 속한 입력 내용만 저장합니다.
