adminschool.net wiki

문서의 이전 판입니다!

---

기존의 HTML과 CSS만으로 모바일에 최적화 된 폼을 만들기 위해서는 많은 시간과 노력이 선행된다. 하지만 jQuery mobile은 적은량의 학습과 적은량의 코드로 하단 그림과 같은 다이나믹한 폼을 구성하는데 도움을 준다.

1. Dynamic form layout

<리스트 1> Dynamic form layout 사용 방법

<DIV data-role="fieldcontain">
<LABEL for="txtFirstName">First Name:</label>
<INPUT type="text" name="txtFirstName" id="txtFirstName" value="" />
</DIV>
<DIV data-role="fieldcontain">
   <LABEL for="txtLastName">Last Name:</label>
   <INPUT type="text" name="txtLastName" id="txtLastName" value="" />
</DIV>
<DIV data-role="fieldcontain">
   <LABEL for="txtPhoneNo">Phone No:</label>
   <INPUT type="tel" name="txtPhoneNo" id="txtPhoneNo" value="" />
</DIV>
<DIV data-role="fieldcontain">
   <LABEL for="txtEmail">Email:</label>
   <INPUT type="email" name="txtEmail" id="txtEmail" value="" />
</DIV>

1. 기본 텍스트 입력 : 기존의 html문법에서는 input=“text” 만을 지원 했다면 html5에서는 좀더 다양한 형식의 텍스트 입력을 지원한다.

• input=“text” : 하단 그림의 첫번째 화면으로 일반적인 키보드 입력을 지원
• input=“tel” : 하단 그림의 두번째 화면으로 전화번호를 받기위해서 자동으로 숫자 입력 키보드를 보여준다.
• input=“email” : 하단 그림의 세번째 화면으로 첫번째 그림과 비슷해 보이지만 이메일을 입력받기위해서 @ 버튼이 보인다.