jQuery Mobile - Text inputs(텍스트)

Input 태그의 text와 textarea는 기본 HTML 엘리먼트들입니다. JQM에서 모바일에 사용하기 유용하도록 변환해줍니다.

Text input은 문자열을 입력받을 경우에 사용하며, input 태그에 type=”text” 속성을 사용하여 생성합니다. 같이 사용하는 label태그의 for 속성의 값과 input태그의 ID 값으로 매칭됩니다. 이 두가지 엘리먼트를 하나의 그룹처럼 하기 위해 div태그로 감싸고 data-role=”fieldcontain” 속성을 추가합니다.

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>   

Password input은 비밀번호를 입력받을 경우에 사용하며, input 태그에 type=”password” 속성을 추가하여 사용합니다. 마찬가지로 label 태그의 for속성의 값이 input 태그의 ID속성의 값에 매칭되야 하고, div태그에 data-role=”fieldcontain” 속성을 추가하여 그룹으로 만들어줍니다.

<div data-role="fieldcontain">
    <label for="password">Password Input:</label>
    <input type="password" name="password" id="password" value="" />
</div>   

그외에 새로이 HTML5에서 사용되는 input 태그의 type들은 email, tel, number등이 있습니다.

<div data-role="fieldcontain">
<label for="number">Number:</label>
<input type="number" name="number" id="number" value=""  />
</div>

<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" value=""  />
</div>


<div data-role="fieldcontain">
<label for="url">Url:</label>
<input type="url" name="url" id="url" value=""  />
</div>

<div data-role="fieldcontain">
<label for="tel">Tel:</label>
<input type="tel" name="tel" id="tel" value=""  />
</div>

Textarea는 멀티라인을 지원하는 문자열을 입력받을 때 사용하며, 모바일 환경에서 사용하기 어려운 페이지 스크롤을 피하기 위해 textarea를 사용합니다. 글이 길어지면 textarea에 스크롤이 생기면서 페이지의 길이에 영향을 주지 않습니다. 또, textarea의 오른쪽 하단의 크기변환 기능을 이용하여 크기조절을 자유롭게 할 수 있습니다.

<div data-role="fieldcontain">
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>