jQuery mobile

Form element

Form이란?

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

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

<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'를 준다. 아래를 참고하자.

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

전체소스

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

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

Form 겔러리

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

 

댓글

댓글 본문
  1. 허공
    감사합니다!
  2. JustStudy
    고맙습니다
  3. imkurtkim
    감사합니다.
  4. 코난도일
    마지막 이미지가 나오지 않습니다.^^;
  5. 서리
  6. 포스만빵
    캡쳐된 이미지가 피곤하셨는지 안나오시네요 ㅋㅋ
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기