jQuery Mobile 네이티브 폼 — data-role="none" 완전 정리

 

 

Web Development · jQuery Mobile

jQuery Mobile 네이티브 폼 —
data-role="none" 완전 정리

jQM 위젯 변환을 끄고 표준 HTML 폼으로 보이기

시작 오늘 분석할 코드

jQM 페이지 안의 form인데 모든 입력에 data-role="none"이 붙어 있다. 이건 jQM의 예쁜 위젯 변환을 끄고 네이티브 HTML 폼 모양을 그대로 두는 패턴이다.

<form method="get" action="form.jsp"> <h1>동아리 회원 가입</h1> <fieldset> <legend>필수 정보</legend> <table> <tr><td><label for="s_id">학번</label></td> <td><input type="text" id="s_id" data-role="none"/></td></tr> <tr><td><label for="s_name">성명</label></td> <td><input id="s_name" data-role="none"/></td></tr> </table> </fieldset> … <input type="submit" value="확인" data-role="none"/> <input type="reset" value="취소" data-role="none"/> </form>

실제 출력 미리보기

header 영역

동아리 회원 가입

필수 정보

학번
성명

부가 정보

전화번호 :
가입날짜 :
성별 : 남자 여자
학년 : 1학년 2학년 3학년 4학년
나이 :

footer 영역

---

용어 핵심 키워드

data-role="none"jQM 위젯 변환 끄기 — 네이티브 그대로

fieldset/legend관련 입력 그룹화 + 그룹 제목

table 기반 정렬label과 input을 td로 정렬 (구식)

type="submit/reset"제출 / 폼 초기화 버튼

method="get"URL의 쿼리스트링으로 전송

action="form.jsp"제출 받을 서버 URL

---

1 왜 data-role="none"?

jQM은 form 요소를 자동으로 둥글고 큰 모바일 위젯으로 변환한다. 보기엔 좋지만 밀도가 낮아 화면 공간을 많이 차지한다. 데이터 입력이 많은 폼에서는 부담이다.

data-role="none"을 붙이면 jQM 변환을 요소별로 끌 수 있다. 결과는 OS 기본 모양 — 작고 빠르게 입력 가능하다.

jQM 변환 (기본)

큰 둥근 박스, 모든 게 큼
화면당 입력 항목 적게
터치 친화적
스타일 일관성 ↑

data-role="none"

OS 기본 모양 — 작고 조밀
화면당 항목 많이
데스크톱-like
관리자 패널 등에 적합

---

2 회원 가입 폼의 구조

본 코드는 fieldset 두 개로 영역을 나눈다 — "필수 정보" / "부가 정보". 사용자가 입력할 항목의 우선순위를 시각적으로 안내한다.

• 필수 정보 — 학번, 성명 (반드시 입력)
• 부가 정보 — 전화번호, 가입날짜, 성별, 학년, 나이 (선택)

⚠ required 속성 누락 — "필수"라고 legend에만 적혀 있을 뿐 required 속성이 없다. 빈 채로 submit 가능하다. 실제로는 required를 추가해야 한다.

---

3 table로 정렬 — 구식 패턴

본 코드는 label/input을 table의 td로 정렬한다. 이건 1990~2000년대 패턴이고, 오늘날엔 CSS grid/flexbox가 표준이다.

// 현대식 — CSS grid <div class="form-grid"> <label>학번</label><input> <label>성명</label><input> </div> <style> .form-grid { display: grid; grid-template-columns: 80px 1fr; gap: 8px; } </style>

---

 

반응형

 

4 다양한 input 타입 모음

본 코드는 한 폼에 6가지 입력을 모았다.

요소	역할
text input	학번, 성명, 전화번호 — 일반 텍스트
date input	가입날짜 — 날짜 피커
select	성별 — 드롭다운 선택
radio	학년 — 4개 중 하나만 (name 같음)
number input	나이 — min, max로 범위 제한
submit / reset	전송 / 초기화 버튼

⚙ radio의 name 통일 — 4개의 radio가 모두 name="syear"다. 같은 그룹이라는 뜻 — 한 번에 하나만 선택된다.

---

5 method="get" vs method="post"

구분	get	post
전송 위치	URL의 쿼리스트링	HTTP body
최대 길이	제한 있음 (~2000자)	거의 무제한
북마크	가능 — URL에 다 있음	불가
적합한 용도	검색, 필터	로그인, 회원가입, 비밀번호

⚠ 회원가입은 post가 맞다 — 본 코드의 method="get"은 학습용. 실제로는 method="post"로 비밀번호·개인정보를 URL에 노출하지 않는 게 표준.

---

6 submit / reset

• type="submit" — 클릭 시 form의 action으로 데이터 전송
• type="reset" — 폼 안의 모든 입력을 초기값으로 되돌림
• type="button" — 아무 기본 동작 없음 (JS로 직접 처리)

⚙ reset의 함정 — 사용자가 잘못 누르면 작성한 내용이 다 날아간다. 현대 폼에선 reset 버튼을 잘 쓰지 않는다.

---

7 자주 하는 실수

실수	증상	해결
form에만 data-role="none"	안의 input은 여전히 jQM 위젯	각 요소마다 명시
radio name 다르게	4개 모두 동시 선택 가능	같은 그룹은 같은 name
method 미지정	기본 GET — 의도 모호	post 명시
required 누락	빈 데이터 제출됨	필수 항목에 required
action 빈 문자열	현재 페이지로 제출	처리 페이지 URL

---

8 현대식 대안

data-role="none" 패턴은 jQM이 EOL이라 거의 쓰지 않는다. 오늘날엔:

• 표준 HTML form이 모바일에서도 잘 작동
• CSS grid/flexbox로 정렬 (table 대신)
• HTML5 검증 속성 — required, pattern, min, max
• SPA 프레임워크 — React Hook Form, Vue v-model 등

---

핵심 한 줄 요약

data-role="none"jQM 위젯 변환 끄기

fieldset / legend입력 그룹화 + 제목

radio name 같게한 번에 하나만 선택

method="get"URL 쿼리 전송 — 회원가입은 post

submit / reset전송 / 초기화 버튼

현대식표준 HTML5 + CSS grid

Tags

#jQuery-Mobile #native-form #data-role-none #fieldset #legend #radio #submit #reset #폼 #GET #POST #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리

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

jQuery-Mobile, native-form, data-role-none, fieldset, legend, radio, submit, reset, 폼, 네이티브, GET, POST, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리