입력 폼은 사용자가 정보를 입력할 수 있도록 제공하는 요소를 지칭합니다.
Usage
특정 작업을 수행하기 위해 사용자가 정보를 입력해야 하는 경우에 사용합니다.
입력 정보의 종류에 따라 다양한 유형으로 사용합니다.
•
한 줄의 텍스트 입력이 필요한 경우에는 text 유형으로 사용합니다.
•
숫자, 비밀번호, 이메일, 검색, 파일, 날짜 등의 입력은 각각의 유형으로 사용합니다.
•
목적에 따라 헤더, 툴팁, 팝오버, 버튼 등 다른 구성요소와 함께 양식(forms)을 구성하여 사용합니다.
Anatomy
1.
입력 폼을 설명하는 텍스트 레이블을 표시합니다.
2.
포커스 시 입력 상태가 됩니다.
3.
힌트 메시지가 되는 텍스트를 표시합니다. 포커스 시 사라집니다.
4.
입력 폼 유형에 따라 필요한 컨트롤을 표시합니다.
5.
에러 메시지가 발생할 경우 표시합니다.
Variants
Text type
한 줄의 텍스트 입력이 필요한 경우에 사용합니다. 줄바꿈 텍스트는 입력값에서 자동으로 제거됩니다.
1.
1자 이상 입력한 경우에 표시됩니다. 입력한 내용을 제거(remove) 합니다.
Number type
숫자만 입력해야 하는 경우에 사용합니다. 숫자가 아닌 경우에는 입력되지 않습니다.
1.
설정한 min-max 및 step 값에 따라 입력할 수 있는 컨트롤 입니다.
(예 : step=10 일 경우 1클릭에 10 단위로 입력)
Password type
비밀번호 입력에 사용합니다.
1.
hidden/show 상태를 전환하는 토글 아이콘을 표시합니다.
디폴트는 hidden 상태이며, hidden 상태에서는 입력한 문자를 *로 표시합니다.
Search
검색 양식에 사용합니다.
1.
1자 이상 입력한 경우에 표시됩니다. 입력한 내용을 제거(remove) 합니다.
2.
아이콘 버튼과 컨트롤 요소의 구분을 위해 구분선을 표시합니다.
3.
검색 실행을 발동하는 아이콘 버튼을 표시합니다.
States
Guidelines
•
사용자의 인지를 돕기 위해 모든 검색 형식을 제외한 모든 입력 폼에는 텍스트 레이블을 표시합니다.
•
텍스트 레이블은 폼 좌측 상단에 위치하며, 필요에 따라 폼 좌측에 위치할 수도 있습니다.
•
입력 폼에 대해 부가적인 설명이 필요한 경우 입력 폼 하단에 표시합니다. 중요도가 낮은 설명의 경우에는 툴팁을 사용하여 표시합니다.
