Form
HTML의 모든 폼 요소를 모바일 환경에 최적화된 UI로 제공한다.
폼을 사용할 때는 여러 페이지가 하나의 DOM 에 속할 수 있으므로
id 속성을 사이트 범위에서 유일한 값으로 지정해야 한다.
기본코드
전자정부 모바일 표준프레임워크를 이용하여 폼을 생성하면 레이블 및 폼 구성요소가 화면의 너비에 맞게 자동으로 배열된다.
폼 요소 배열의 구성을 향상시키려면 <div data-role="fieldcontain"> Tag 내부에 레이블 및 폼 요소를 포함시킨다.
- <form id="form-1" action="#" method="get">
- <div data-role="fieldcontain">
- <label for="text">Text :</label>
- <input type="text" id="text"/>
- </div>
- <div data-role="fieldcontain">
- <label for="password">Password :</label>
- <input type="password" id="password"/>
- </div>
- <div data-role="fieldcontain">
- <button id="submit" type="submit">Submit</button>
- </div>
- </form>
레이블과 폼 구성요소
화면의 너비가 좁을 경우 레이블이 폼 구성요소의 상단에 위치하게 되고
화면의 너비가 넓을 경우에는 레이블과 폼 구성요소가 한 줄에 나타나게 된다.
이때 레이블과 폼 요소가 짝을 이룰 수 있도록 폼 구성요소의 id 속성과 <label> Tag의 for 속성 값을 일치시켜야 한다.
- <form id="form-2" action="#" method="get">
- <label for="text1">Text : </label>
- <input type="text" id="text1"/>
- <label for="password1">Password :</label>
- <input type="password" id="password1"/>
- <label for="text2">Text : </label>
- <input type="text" id="text2"/>
- <label for="password2">Password :</label>
- <input type="password" id="password2"/>
- <button data-theme="b" id="submit" type="submit">Submit</button>
- </form>
리스트 형태의 폼
<form> Tag 내부에 리스트 태그(ul, ol)를 두고 <li> Tag에 폼 요소를 배치하여
리스트 형태로 구분된 폼을 생성할 수 있다.
- <form id="form-4" action="#" method="get">
- <ul data-role="listview" data-inset="true">
- <li data-role="fieldcontain">
- <label for="text">Text :</label>
- <input type="text" id="text"/>
- </li>
- <li data-role="fieldcontain">
- <label for="password">Password :</label>
- <input type="password" id="password"/>
- </li>
- <li data-role="fieldcontain">
- <label for="slider">Slider:</label>
- <input type="range" id="slider" value="0" min="0" max="100" />
- </li>
- <li data-role="fieldcontain">
- <button data-theme="b" id="submit" type="submit">Submit</button><
- </li>
- </ul>
- </form>
향상된 Input Type
HTML5 의 다양한 Input Type 을 사용하면
모바일 기기에서 자동으로 해당 Input Type 에 맞는 입력 도구를 제공한다.
폼 구성요소
폼 형식으로 주어진 레이아웃에 Tag를 추가하여 폼 구성요소를 추가한다.
폼 구성요소의 종류는 Text inputs, Search inputs, Sliders, Switches,
Radio buttons, Check boxes, Selectors 가 있다.
폼 버튼
<button> Tag 를 사용하거나 <input> Tag 에
"button", "submit", "image" 속성을 추가하여 폼 버튼을 생성할 수 있으며 button의 경우 onclick으로 submit 이벤트를 걸어준다.
button의 summit이벤트는 Ajax가 false인 방법으로 전송된다.
또한 이들은 Anchor 태그 형식의 버튼과 마찬가지로 data-inline, data-icon 등의 버튼 속성을 적용할 수 있다.
HTML 스타일의 폼
폼의 각 요소에 data-role="none"으로 속성 값을 지정하면
기존 HTML 에서 제공하는 고전적인 형태의 폼을 생성할 수 있다.