Page Comparison

사용자가 문자와 숫자를 입력할 수 있는 텍스트 필드는 가장 기본적인 사용자 입력 컨트롤이다. 사용자 사용자의 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.

...

UI 유형

텍스트 필드 유형은 2가지 스타일로 사용할 수 있다2가지로 구분한다.

No	Basic Text Field	Description
1	Label Side Style	Image Removed Default Text Field	Image Added 일반적인 텍스트 필드
2	Label Up Style	Image RemovedForm 내에 사용되는 텍스트 필드로 라벨이 input field 상단에 위치	Text Field with Tooltip	Image Added 툴팁을 함께 사용하는 텍스트 필드
3		Image Added 텍스트만
		Image Added 텍스트만 https://ant.design/components/input/#components-input-demo-presuffix
		Image Added Status colour Red title tobe 추후 꼭 필요? https://ant.design/components/input/#components-input-demo-password-input

Form이나 Table 내에 있는 텍스트 필드는 라벨이 인풋필드 상단으로 고정된다.

...

텍스트 필드의 필수 입력 여부 설정은 Platform Console에 있는 스키마 메뉴에서 진행 한다. 필수 입력으로 설정된 텍스트 필드는 사용자 입력 시 설정 조건에 따라 경고성 Helper Text가 자동 출력 된다.

...

...

상태 정보

텍스트 필드의 상태는 아래와 같이 8가지로 표현된다.

Normal	Hover
Active	Disabled

Typing	Filled
Success	Error

...

UI 구조

...

1. Label : 입력 필드에 입력 할 정보가 무엇인지 제목 표시

2. Input Field : 라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보가 실시간으로 출력되는 영역

3. Tooltip : 물음표 아이콘이 라벨 옆에 출력되며, 마우스 오버 시 출력되는 안내 문구

4. Placeholder : 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐

5. Helper Text : 필드 하단에 고정되어 노출되는 도움말 문구 (

   Status
   colour Red title asis

   Comment,

   Status
   colour Red title tobe

   Helper Text )

6. Cursor : 사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시

7. Input Text : 사용자가 입력 필드에 작성한 텍스트

8. Status
   colour Yellow title new

   Clear Button : 필드에 입력한 정보를 한번에 삭제

...

...

셋팅 옵션

BackOffice Builder의 Text Field > Setting > [Option] 설정을 통해 입력 텍스트 필드 내용을 변경한다.

...