본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
php

jQuery Mobile 입력 타입 — password, number, email, tel, url, search 완전 정리

by 왕진 2026. 6. 24.
반응형

 

 

Web Development · jQuery Mobile

jQuery Mobile 입력 타입 —
password · number · email · tel · url · search

type 속성으로 모바일 키보드와 검증을 자동 전환
시작 오늘 분석할 코드

같은 input 태그지만 type 속성만 바꾸면 모바일에서 뜨는 키보드 모양과 자동 검증 규칙이 달라진다. 6가지 타입을 한 번에 본다.

<input type="password" id="input1" placeholder="패스워드를 입력하세요"/> <input type="number" id="input2" placeholder="숫자를 입력하세요"/> <input type="email" id="input3" placeholder="이메일을 입력하세요"/> <input type="tel" id="input4" placeholder="전화번호를 입력하세요"/> <input type="url" id="input5" placeholder="URL을 입력하세요"/> <label for="input6" class="ui-hidden-accessible">검색</label> <input type="search" id="input6" placeholder="키워드를 입력하세요">
실제 출력 미리보기
header 영역
footer 영역
용어 핵심 키워드
type 속성input 모드 결정 — 키보드/검증을 동시에 바꿈
placeholder비어 있을 때 보이는 안내 텍스트
자동 검증type별로 form submit 시 형식 검사
ui-hidden-accessible시각적으로 숨기되 스크린리더는 읽음
1 6가지 type 한눈에 보기
type 모바일 키보드 검증 규칙 특징
password 일반 키보드 없음 입력 글자가 ●로 가려짐
number 숫자 패드 숫자만 허용 증감 버튼(spinner) 표시
email @ 키 강조 x@y 형식 검사 입력 자동 보정 (@ 없으면 빨강)
tel 전화 키패드 없음 (숫자만 추천) 전화 발신 가능 환경에서 호출도
url . / 키 강조 http(s):// 형식 도메인 형식 검사
search 일반 + "검색" 버튼 없음 둥근 모양 + 클리어(✕) 버튼
2 왜 type을 구분하는가

같은 텍스트 입력 같지만 type을 정확히 지정하면 다음 효과가 한 번에 따라온다.

  • 모바일 키보드 자동 전환 — 숫자 입력에 글자 키보드가 안 뜸
  • HTML5 자동 검증 — submit 시 잘못된 형식이면 메시지
  • 접근성 — 스크린리더가 입력 종류를 알림
  • OS 통합 — tel은 전화 앱, email은 메일 앱과 연동
💡 한 줄로 끝나는 검증 — type만으로 기본 검증이 되니, 단순한 폼은 JS 검증 코드를 거의 쓰지 않아도 된다.
3 placeholder의 역할

placeholder="..."는 입력칸이 비었을 때만 보이는 회색 안내 텍스트다. 사용자가 클릭하거나 글자를 치면 사라진다.

  • label과 다름 — placeholder는 입력 시 사라지므로 label을 대체할 수 없다
  • label은 항상 보이는 이름표, placeholder는 입력 예시
  • 둘 다 같이 쓰는 게 표준 (UX & 접근성)
⚠ placeholder만으로 안내? — 입력 시작하면 사라지므로 사용자는 무엇을 입력하던 중인지 잊는다. label은 꼭 두자.

 

반응형

 

4 ui-hidden-accessible — 보이지 않는 label

본 코드의 type="search" 박스에는 다른 input과 달리 label이 보이지 않는다. class="ui-hidden-accessible"이 그 비결이다.

  • 화면에서는 안 보임 (검색박스 위에 "검색"이라고 안 뜸)
  • 스크린리더는 그래도 "검색"이라고 읽어줌 — 시각장애 사용자에게 안내
  • HTML5/jQM의 표준 접근성 패턴 — label 자체를 빼지 않는다
5 자주 하는 실수
실수 증상 해결
type="text"로 모든 입력 모바일에서 잘못된 키보드 입력 종류에 맞는 type
placeholder만으로 안내 입력 중 가이드 사라짐 label과 placeholder 둘 다
label 완전 제거 (검색 등) 스크린리더 사용자 혼란 ui-hidden-accessible로 시각만 숨김
type="number"에 한국어 입력 일부 브라우저는 받아들임 — 검증 X pattern 속성 추가
type="tel"에 자동 검증 기대 실제로는 형식 강제 X pattern 또는 JS 검증 추가
6 추가 type — HTML5의 다른 입력
  • date, time, datetime-local, month, week — 날짜/시간 피커
  • color — 색상 피커
  • file — 파일 업로드
  • range — 슬라이더
  • checkbox, radio — 선택 옵션
7 현대식 대안

HTML5 type 속성은 모든 모던 브라우저가 지원한다. jQM 없이도 거의 동일하게 작동한다. 추가 검증이 필요하면 pattern="..."(정규식), minlength, maxlength 등 표준 속성 활용.

핵심 한 줄 요약

type="password"●●● 가린 입력
type="number"숫자 키패드 + spinner
type="email"@ 강조 + 형식 검증
type="tel"전화 키패드 (검증 X)
type="url". / 강조 + http 검증
type="search"둥근 박스 + 클리어 버튼
ui-hidden-accessible시각만 숨김 — 스크린리더는 읽음

Tags

#jQuery-Mobile #input #password #number #email #tel #url #search #ui-hidden-accessible #폼검증 #키패드 #모바일웹 #jQuery #CSS #HTML #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
jQuery-Mobile, input, password, number, email, tel, url, search, ui-hidden-accessible, 폼검증, 키패드, 모바일웹, jQuery, CSS, HTML, 웹개발, 티스토리
반응형

'php' 카테고리의 다른 글

jQuery Mobile 토글 스위치 — select + data-role="slider" 완전 정리  (0) 2026.06.24
jQuery Mobile 텍스트영역 — textarea cols, rows 완전 정리  (0) 2026.06.24
jQuery 기본 선택자 — *, tag, .class, #id 완전 정리  (0) 2026.06.24
jQuery 노드 함수 — length, text, remove, console.log 완전 정리  (0) 2026.06.24
jQuery 기초 — ready, click, css, text 완전 정리  (0) 2026.06.24

관련글

댓글

티스토리툴바