jQuery Mobile 표单

jQuery Mobile은 자동으로 HTML 표单에 쉽게 만지는 외관을 추가합니다.

jQuery Mobile 표单 구조

jQuery Mobile은 CSS를 사용하여 HTML 표单 요소의 스타일을 설정하여 더 매력적이고 쉽게 사용할 수 있게 합니다.

jQuery Mobile에서는 다음 표单 컨트롤을 사용할 수 있습니다:

  • 텍스트 박스
  • 검색 상자
  • 라디오 박스
  • 체크 박스
  • 선택 메뉴
  • 스크롤 바
  • 플립 스위치

jQuery Mobile 표单과 상호작용할 때, 다음 정보를 이해해야 합니다:

  • <form> 요소는 method 및 action 속성을 설정해야 합니다
  • 모든 표单 요소는 독특한 "id" 속성을 설정해야 합니다. 이 id는 사이트의 페이지에서 유일해야 합니다. 이는 jQuery Mobile의 단일 페이지 네비게이션 모델이 여러 가지 "페이지"를 동시에 표시할 수 있게 해줍니다.
  • 모든 폼 요소는 레이블이 하나 있어야 합니다. 레이블의 for 속성을 설정하여 요소의 id와 일치시켜야 합니다。

예시

<form method="post" action="demoform.asp">
  <label for="fname">First name:</label>
  <input type="text" name="fname" id="fname">
</form>

본인이 직접 시도해보세요

레이블을 숨기려면 class="ui-hidden-accessible"를 사용하세요. 이는 요소의 placeholder 속성이 레이블 역할을 할 때 자주 사용됩니다：

예시

<form method="post" action="demoform.asp">
  <label for="fname" class="ui-hidden-accessible">이름：</label>
  <input type="text" name="fname" id="fname" placeholder="이름...">
</form>

본인이 직접 시도해보세요

영역 컨테이너

레이블과 폼 요소가 넓은 화면에서 올바르게 표시되도록 하려면 data-role="fieldcontain" 속성을 가진 <div> 또는 <fieldset> 요소로 레이블이나 폼 요소를 감싸세요：

예시

<form method="post" action="demoform.asp">
  <div data-role="fieldcontain">
    <label for="fname">First name:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">Last name:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

본인이 직접 시도해보세요

추천:fieldcontain 속성은 페이지 너비를 기준으로 레이블과 폼 컨트롤의 스타일을 설정합니다. 페이지 너비가 480px 이상이면 레이블과 폼 컨트롤을 같은 줄에 배치합니다. 480px 미만이면 레이블이 폼 요소 위에 배치됩니다.

추천:jQuery Mobile이 자동으로 클릭 가능한 요소에 스타일을 설정하지 않도록 하려면 data-role="none" 속성을 사용하세요：

예시

<label for="fname">First name:</label>
<input type="text" name="fname" id="fname"> data-role="none">

본인이 직접 시도해보세요

jQuery Mobile에서 양식을 제출하다

추천:jQuery Mobile은 자동으로 AJAX를 통해 양식을 제출하고, 서버 응답을 응용 프로그램의 DOM에 통합하려고 시도합니다.