jQuery Mobile - Form basics

Form structure
모든 form들은 action과 method속성을 갖는 form태그로 감싸집니다. 이는 서버상에서 폼 데이터 프로세싱을 다루게 될 것입니다.
<form action="form.php" method="post"> ... </form>

Markup Conventions
JQM에서 form들을 사용할 때, HTTP post방식이나 get방식으로 submit되는 폼의 표준 가이드의 대부분이 사용됩니다. 그러나, 한가지 주의할 점은 폼 컨트롤의 id 속성이 응답페이지에서 유일해야 할 뿐만 아니라 사이트의 페이지들에서도 유일해야 할 필요가 있습니다. 이것은 JQM의 싱글 페이지 네비게이션 모델로서 동시에 많은 다른 페이지들이 하나의 DOM에 표현되는 것을 허용하기 때문입니다. 그래서, 유일한 id속성을 사용할 때 주의해야 합니다. DOM의 각 페이지중에 유일하게 될 것입니다.(물론, for 속성을 통해 label 엘리먼트와 적절하게 쌍을 이루어야 합니다.)

Auto-initialization of form elements
JQM은 모바일 환경에 맞도록 기존 컴포넌트들을 터치 컴포넌트로 자동으로 향상시켜 주는 기능이 있습니다. 이 기능은 폼을 구성하는 태그 이름을 찾아 해당하는 플러그인 함수를 실행하여 다루게 됩니다. 예를들어, select 엘리먼트는 “selectmenu” 플러그인으로 초기화 되어지고, type=”checkbox”인 input 태그는 “checkboxradio” 플러그인으로 향상되어 집니다. 이렇게 향상된 요소들은 jQuery UI widget API Methods를 통해 사용 가능합니다.

Preventing auto-initialization of form elements
만약, 특별한 폼 요소가 JQM에 의해 다뤄지지 않고, 기본적인 동작을 하길 원한다면, 해당 엘리먼트에 data-role=”none” 속성을 사용합니다.
<label for="foo">
<select name="foo" id="foo"  data-role="none">
    <option value="a" >A</option>
    <option value="b" >B</option>
    <option value="c" >C</option>
</select>

또는, 마크업에 속성을 추가하는 방법 외에, jQuery를 이용하여 페이지 플러그인의 keepNative옵션을 셋팅함으로써 자동초기화를 방지할 수 있습니다. 이러한 옵션을 설정할 때에는 mobileinit 이벤트로 바인딩된 이벤트 처리기 안에서 구성해야 합니다.
$(document).bind('mobileinit',function(){
    $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});

위의 샘플은 페이지에 포함되어 있는 모든 select 엘리먼트가 변환되는 것을 방지하고 기본 select 박스로 보여지게 됩니다. 만약에 예외적으로 JQM에 의해 변환되어 보여지길 바라는 엘리멑트가 있다면, $.mobile.nativeSelectMenu를 true로 셋팅하거나 data-native=”true”를 사용하여 변환되도록 할 수 있습니다.

Dynamic form layout
JQM에서 모든 폼 엘리먼트들은 다양한 모바일 장치들의 가로 길이에 대응하기 위해 유연하게 디자인되어 있습니다. 스크린의 가로 길에 따라 labels과 form elements들은 다르게 프레임웍에서 최적화 됩니다.
만약, 페이지가 480px정도의 좁은 상태라면, label들은 수평 사이즈를 절약하기 위해 폼 엘리먼트의 상단에 위치되고, block-level elements 스타일처럼 보여지게 됩니다.
넓은 스크린에서는, label들과 폼 엘리먼트들은 넓은 스크린의 이점을 살려 같은 라인에 2개의 컬럼 레이아웃으로 스타일 됩니다.

Field containers
넓은 스크린에서 label들과 폼 엘리먼트들의 스타일을 개선하기 위해서, data-role=”fieldcontain”속성을 갖는 div태그나 fieldset 태그로 감싸는 것을 추천합니다.
프레임웍은 이 컨테이너의 아래에 얇은 경계선을 추가해줘서 필드 구분자 처럼 보여지게 해주고 구성을 정렬해주어 보기 편하게 만들어줍니다.
<div data-role="fieldcontain">
    ...label/input code goes here...
</div>

Refreshing form elements
모든 form control은 refresh method를 가지고 있습니다. 몇가지 예제를 보면 아래와 같습니다.
Checkboxes:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type=range]").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");

향후에 개별 element들의 refresh가 가능하도록 폼에 refresh method를 추가할 생각이라고 합니다.