jQuery Mobile(PhoneGap) [jQuery Mobile] Form element

황제낙엽 2012.11.15 17:46 조회 수 : 24

sitelink1  
sitelink2  
sitelink3 http://1 


Form이란?

사용자가 입력한 정보를 서버로 전송하기 위한 콤포넌트를 의미한다. 자세한 내용은 생활코딩의 HTML 수업 중 FORM 편을 참고한다. http://opentutorials.org/course/11/14

Form 엘리먼트로 시작하고, 이 엘리먼트의 하위에 Form 컴포넌트들이 위치한다. 아래의 예제는 사용자로부터 입력받은 제목(title)의 값을 form.php 파일로 전송하는 예제. 이 때 method 속성으로 인해서 POST방식으로 데이터를 전송한다.

1
2
3
4
<form action="form.php" method="post">
   <input type="text" name="title" value="jQuery Mobile"/>
   <input type="submit"  value="전송"  />
</form>

jQuery Mobile과 Form

jQuery Mobile은 HTML Form 컴포넌트를 터치 중심인 모바일 운영체제에 최적화된 디자인으로 자동으로 만들어준다.

폼의 크기를 작게 만들려면 data-mini 속성의 값으로 'true'를 준다. 아래를 참고하자.

1
2
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" data-mini="true" />

전체소스

label을 안보이게 하려면 ui-hidden-accessible을 클래스 네임으로 준다. 아래를 참고하자.

1
2
<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username"/>

Form 겔러리

jQuery Mobile은 form을 아래와 같은 모습으로 변환해준다.

이 게시물을
목록
쓰기 태그