Home Back

egovframework

Form

HTML의 모든 폼 요소를 모바일 환경에 최적화된 UI로 제공한다. 폼을 사용할 때는 여러 페이지가 하나의 DOM 에 속할 수 있으므로 id 속성을 사이트 범위에서 유일한 값으로 지정해야 한다.

기본코드

전자정부 모바일 표준프레임워크를 이용하여 폼을 생성하면 레이블 및 폼 구성요소가 화면의 너비에 맞게 자동으로 배열된다. 폼 요소 배열의 구성을 향상시키려면 <div data-role="fieldcontain"> Tag 내부에 레이블 및 폼 요소를 포함시킨다.

레이블과 폼 구성요소

화면의 너비가 좁을 경우 레이블이 폼 구성요소의 상단에 위치하게 되고 화면의 너비가 넓을 경우에는 레이블과 폼 구성요소가 한 줄에 나타나게 된다. 이때 레이블과 폼 요소가 짝을 이룰 수 있도록 폼 구성요소의 id 속성과 <label> Tag의 for 속성 값을 일치시켜야 한다.

리스트 형태의 폼

<form> Tag 내부에 리스트 태그(ul, ol)를 두고 <li> Tag에 폼 요소를 배치하여 리스트 형태로 구분된 폼을 생성할 수 있다.

향상된 Input Type

HTML5 의 다양한 Input Type 을 사용하면 모바일 기기에서 자동으로 해당 Input Type 에 맞는 입력 도구를 제공한다.

기타 속성

Input 요소 안에 옅은 색상으로 입력해야 될 내용에 대한 부가적인 설명을 위해 placeholder 를 사용할 수 있다.
또한 disabled 속성을 통해 폼 요소들을 비활성화할 수 있다.
※ ( 현재 오페라 브라우저에서는 slider component가 비활성화 상태에서도 값이 변경되는 문제가 있음. )

폼 구성 요소들 중 Slider에 대해 색상을 부여하고자 할 때, Slider 원형부분 색상은 data-theme="a~g", Slider 트랙 배경 색상은 data-track-theme="a~g"를 적용할 수 있다.
또한, 이동이 진행된 slider만큼을 색상으로 표현하고 싶을 때, data-highlight="true" 를 적용할 수 있다.

폼 구성요소

폼 형식으로 주어진 레이아웃에 Tag를 추가하여 폼 구성요소를 추가한다. 폼 구성요소의 종류는 Text inputs, Search inputs, Sliders, Switches, Radio buttons, Check boxes, Selectors 가 있다.

Radio Button:
Check Box :
Check Box :
Check Box :
Radio Button:

작은 폼 구성요소

폼 구성요소 내에 data-mini="true" 의 속성 값을 지정하면 보다 작은 폼 구성요소를 만들 수 있다.

Radio Button:
Check Box :
Check Box :
Check Box :
Radio Button:

폼 버튼

<button> Tag 를 사용하거나 <input> Tag 에 "button", "submit", "image" 속성을 추가하여 폼 버튼을 생성할 수 있으며 button의 경우 onclick으로 submit 이벤트를 걸어준다. button의 summit이벤트는 Ajax가 false인 방법으로 전송된다. 또한 이들은 Anchor 태그 형식의 버튼과 마찬가지로 data-inline, data-icon 등의 버튼 속성을 적용할 수 있다.

HTML 스타일의 폼

폼의 각 요소에 data-role="none"으로 속성 값을 지정하면 기존 HTML 에서 제공하는 고전적인 형태의 폼을 생성할 수 있다.

Radio Button:
Check Box :

Copyright(c)2012 Ministry of Security and Public Administration.