19. jQuery Mobile 폼 양식

Index

17. jQuery Mobile Collapsible 블록

18. 터치 이벤트

19. jQuery Mobile 폼 양식

20. HTML5 에서 추가된 폼 양식

21. range 양식, slider

 

 

jQuery Mobile의 폼(form)양식은 표준 HTML 컨트롤에 기반을 둔다. jQuery Mobile은 표준 HTML폼 양식을 그대로 사용하면서 모바일 UI에 맞게 터치하기 편리한 형태로 최적화 한다.

 

 

필드 컨테이너

jQuery Mobile은 폼 양식을 정의할 때 각 양식의 간격을 유지하고 구분하기 위해서 라벨과 양식을 감싸는 <div data-role="fieldcontain"> 태그를 제공한다. 필드 컨테이너는 폭이 좁으면 라벨을 양식의 위에 놓고 양식과 양식을 수평선으로 구분한다.

 

폭이 좁은 경우

 

폭이 충분한 경우

 

<div data-role="fieldcontain">

    <label for="name">Name :</label>

    <input id="name" type="text" name="name" value="" />

</div>

 

필드 컨테이너 안에서 <label>태그의 속성 for의 값과 <input>태그의 속성 id의 값을 일치 시키면 두 태그는 서로 연결된다.

 

 

폼 양식 사용 예

 

<div data-role="content">

    <form id="form" method="post" action="#">

        <div data-role="fieldcontain">

            <label for="name">Name :</label>

            <input id="name" type="text" name="name" />

        </div>

        <div data-role="fieldcontain">

            <label for="memo">Memo :</label>

            <input id="memo" type="textarea" name="memo" />

        </div>

    </form>

</div>

 

 

<input type="text">, <textarea> 태그에서 사용가능한 data-* 속성

data-* 속성	설명	값
data-theme	양식 테마	swatch letter (a-z)