jQuery Mobile 기본 input — fieldcontain, ui-disabled 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 기본 input —
label · fieldcontain · ui-disabled

텍스트 입력박스를 정렬·비활성화하는 3가지 패턴

시작 오늘 분석할 코드

같은 텍스트 입력박스를 3가지 다른 방식으로 배치하는 코드다. label만 쓴 기본형, fieldcontain으로 감싼 형, ui-disabled로 잠근 형 — 차이를 비교한다.

<label>(1)도시이름 <input type="text" id="txt1"> </label> <div data-role="fieldcontain" class="ui-disabled"> <label for="txt2">(2)도시이름</label> <input type="text" id="txt2" data-role="none"> </div> <div data-role="fieldcontain"> <label for="txt3">(3)도시이름</label> <input type="text" id="txt3" value="서울"> </div>

실제 출력 미리보기

header 영역

(1)도시이름

(2)도시이름

(3)도시이름

footer 영역

---

용어 핵심 키워드

label입력박스의 이름표 — 클릭하면 input에 포커스

fieldcontainlabel과 input을 가로로 정렬해주는 컨테이너

ui-disabled시각적으로 흐릿 + 입력/클릭 차단

data-role="none"jQM 스타일링 끄기 — 기본 HTML로 표시

---

1 (1) label 안에 input — 기본형

가장 단순한 형태다. label 태그가 input을 감싸고 있으면 별도의 for 속성 없이도 자동으로 연결된다 — label을 클릭하면 안의 input에 포커스가 간다.

하지만 label과 input이 세로로 쌓이고, 정렬을 직접 CSS로 잡아야 한다. 모바일 폼처럼 깔끔하게 보이지 않는다.

---

2 (2) fieldcontain + ui-disabled

data-role="fieldcontain"는 label을 왼쪽, input을 오른쪽으로 자동 정렬하는 jQM 컨테이너다. 모바일 가로 화면에서 두 줄이 한 줄로 합쳐져 깔끔해진다.

여기에 ui-disabled 클래스를 같이 붙이면 전체가 흐릿해지고 입력이 막힌다. 표시는 되지만 손댈 수 없는 "읽기 전용 안내" 같은 효과를 낸다.

⚙ label/input 연결 — fieldcontain을 쓸 때는 label for="id"와 input id="id"가 매칭되어야 정확히 묶인다.

⚠ data-role="none"의 의미 — 본 코드의 (2)에는 data-role="none"이 추가됐다. 이건 jQM에게 "이 input은 너의 위젯으로 변환하지 마"라는 뜻이다. 그래서 (2)는 jQM 둥근 스타일 없이 그냥 네이티브 input 모양이 된다.

---

3 (3) fieldcontain + value 초기값

활성 상태의 표준 폼이다. value="서울"로 기본값을 미리 채워둘 수 있다. 사용자가 가장 자주 입력할 값을 미리 넣어주면 입력 부담이 줄어든다.

---

 

반응형

 

4 세 패턴 비교

형태	정렬	활성화	스타일
label 감싸기 (1)	세로 쌓임	활성	jQM 위젯
fieldcontain + ui-disabled (2)	가로 정렬	비활성	네이티브 (data-role=none)
fieldcontain 단독 (3)	가로 정렬	활성	jQM 위젯

---

5 자주 하는 실수

실수	증상	해결
label for 없이 fieldcontain 사용	label 클릭해도 포커스 안 감	for="id"와 input id="id" 매칭
ui-disabled를 input에 직접	스타일 안 먹힘	fieldcontain div 자체에 클래스
읽기 전용에 disabled 속성	서버로 값 전송 안 됨	readonly 속성 또는 ui-disabled 클래스 사용

---

6 현대식 대안

오늘날에는 flexbox/grid + label[for] 조합으로 같은 구조를 만든다. fieldcontain 대신 display: grid; grid-template-columns: 100px 1fr;로 충분하다. 비활성화는 HTML 표준 disabled 속성이 표준 방식이다.

---

핵심 한 줄 요약

label 감싸기세로 쌓임 — 가장 기본

fieldcontainlabel/input 가로 정렬

ui-disabled시각·기능 모두 잠금

data-role="none"jQM 위젯 변환 차단

value초기값 미리 채우기

Tags

#jQuery-Mobile #input #fieldcontain #ui-disabled #data-role-none #label #value #가로정렬 #폼입력 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

jQuery-Mobile, input, fieldcontain, ui-disabled, data-role-none, label, value, 가로정렬, 폼입력, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리