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을 아래와 같은 모습으로 변환해준다.
