[웹앱 실무 02] 폼 - input 타입 활용 - TheNullPage(널페이지)

02.1 input에 type이 왜 이렇게 많아요?

HTML을 처음 배울 때는 입력 칸이 그냥 하나인 줄 알아요. <input> 하나면 끝인 줄 알죠. 그런데 실무 폼을 뜯어보면 input마다 type(타입, 종류)이 달라요. type=email, type=number, type=date처럼요.

type을 제대로 고르면 브라우저가 알아서 많은 걸 해줘요. 형식을 검사해주고, 폰에서는 그 입력에 맞는 키보드를 띄워주고, 달력이나 색상 선택기 같은 전용 UI까지 붙여줘요. 그러니 type을 대충 다 text로 두는 건, 브라우저가 공짜로 주는 도움을 걷어차는 셈이에요.

오늘은 실무에서 자주 쓰는 type들을 상황별로 하나씩 볼게요. "이럴 땐 이 type"이 손에 붙도록요.

02.2 이메일이랑 주소는 어떻게 받아요?

이메일을 받을 땐 무조건 type=email이에요. 이걸 쓰면 브라우저가 "@가 들어간 이메일 모양인지"를 기본으로 검사해줘요.

상황: 회원가입에서 이메일을 받아요.
<label for="email">이메일</label>
<input id="email" type="email" required>

결과를 볼게요. 사용자가 "hong"처럼 @도 없는 값을 넣고 제출하면, 제출이 막히고 그 칸에 형식이 잘못됐다는 안내 말풍선이 떠요. 게다가 폰에서 이 칸을 누르면 키보드에 @ 키가 바로 보이는 이메일용 자판이 올라와요. 사용자가 훨씬 편하게 치죠.

웹사이트 주소를 받을 땐 type=url을 써요. 이러면 http:// 같은 형식이 맞는지 검사해줘요.

<input type="url" placeholder="https://...">

02.3 숫자는 그냥 text로 받으면 안 되나요?

나이나 수량처럼 숫자를 받을 땐 type=number가 좋아요. 그냥 text로 받으면 사용자가 "스물다섯"이라고 한글을 넣어버릴 수도 있거든요.

number의 진짜 장점은 min(최솟값), max(최댓값), step(증가 단위)을 같이 줄 수 있다는 거예요.

상황: 1개부터 99개까지 살 수 있는 수량 칸
<input type="number" min="1" max="99" step="1">

이렇게 하면 사용자가 0이나 100을 넣고 제출할 때 범위를 벗어났다며 막혀요. 그리고 칸 옆에 위아래 화살표가 생겨서 클릭으로 숫자를 올리고 내릴 수 있어요.

한 가지 팁이 있어요. 전화번호는 숫자처럼 보여도 type=number를 쓰면 안 돼요. 앞자리 0이 사라지거나 지수 표기로 깨질 수 있거든요. 전화번호는 type=tel을 써요. tel은 형식 검사는 안 하지만, 폰에서 숫자 키패드를 띄워줘서 입력이 편해져요.

<input type="tel" inputmode="numeric">

02.4 날짜랑 시간은 어떻게 받는 게 편해요?

날짜를 텍스트로 받으면 지옥이 열려요. 어떤 사람은 2026-07-11, 어떤 사람은 26/7/11, 또 어떤 사람은 7월 11일이라고 쓰거든요. 이걸 다 처리하느니 type=date를 쓰는 게 백배 나아요.

상황: 예약 날짜를 받아요.
<input type="date" min="2026-01-01" max="2026-12-31">

결과는 이래요. 칸을 누르면 달력이 뜨고, 사용자는 날짜를 클릭만 하면 돼요. 형식은 브라우저가 알아서 통일해주니 우리가 파싱할 걱정이 없어요. min과 max로 고를 수 있는 날짜 범위도 제한할 수 있고요.

비슷하게 type=time은 시:분을, type=month는 연-월을, type=datetime-local은 날짜와 시각을 함께 받아요. 상황에 맞게 골라 쓰면 돼요.

한 가지 알아둘 점은, 이런 날짜·시간 UI의 생김새가 브라우저마다 조금씩 다르다는 거예요. 크롬에서 보던 달력이 사파리에선 살짝 다르게 나오죠. 하지만 브라우저가 우리에게 넘겨주는 값의 형식은 항상 똑같아요. type=date는 언제나 2026-07-11 같은 모양으로 값을 주거든요. 그래서 화면 생김새가 조금 달라도 우리가 데이터를 다루는 방식은 하나로 통일돼요. 이게 텍스트로 날짜를 받는 것보다 훨씬 마음 편한 이유예요.

02.5 비밀번호랑 선택지는 뭘로 받아요?

비밀번호는 type=password예요. 입력한 글자가 점(●)으로 가려져서 어깨너머로 훔쳐보는 걸 막아줘요. 검색창은 type=search를 쓰면 칸 안에 지우기(x) 버튼이 생겨요.

여러 선택지 중 하나만 고르게 할 땐 라디오 버튼(radio)을 써요. 같은 name으로 묶는 게 핵심이에요.

상황: 성별을 하나만 고르게 해요.
<input type="radio" name="sex" value="m"> 남
<input type="radio" name="sex" value="f"> 여

name을 "sex"로 똑같이 맞췄죠? 그래서 둘 중 하나만 선택돼요. 하나를 고르면 다른 하나는 자동으로 풀려요. 여러 개를 동시에 고르게 하고 싶으면 type=checkbox(체크박스)를 쓰고요. 값이 정해진 긴 목록은 <select>로 드롭다운을 만들면 깔끔해요.

상황: 국가를 목록에서 하나 고르게 해요.
<select name="country">
<option value="kr">대한민국</option>
<option value="jp">일본</option>
</select>

이 밖에도 재밌는 type이 더 있어요. type=range는 좌우로 끄는 슬라이더를 만들어줘서 볼륨이나 밝기 같은 값을 받을 때 좋아요. type=color는 색상 선택기를 띄워주고, type=file은 파일 첨부 버튼을 만들어줘요. 받고 싶은 게 뭔지에 딱 맞는 type이 대부분 이미 있으니, 만들기 전에 "이거 전용 type이 있나?"부터 떠올려보는 습관이 좋아요.

02.6 자동완성이랑 키보드는 어떻게 도와줘요?

type을 잘 골랐어도, 실무에선 두 가지를 더 챙기면 폼이 확 편해져요. autocomplete와 inputmode예요.

autocomplete는 브라우저에게 "이 칸엔 이런 정보가 들어간다"고 알려줘요. 그러면 브라우저가 저장된 값을 제안해줘서 사용자가 타이핑을 덜 하죠.

inputmode는 폰에서 어떤 키보드를 띄울지를 정해요. 예를 들어 카드 번호처럼 숫자만 받고 싶은데 type은 text여야 할 때, inputmode="numeric"을 주면 숫자 키패드가 올라와요. placeholder(칸 안 흐린 안내글)까지 곁들이면 사용자가 뭘 넣어야 할지 한눈에 알아요.

02.7 오늘 배운 type을 정리해볼게요

input의 type 하나만 잘 골라도 검증과 UX가 같이 좋아진다는 게 핵심이에요. 상황별로 다시 묶어볼게요.

이메일은 email, 주소는 url, 숫자는 number(min/max/step), 전화번호는 tel이에요. 날짜와 시간은 date, time, month, datetime-local로 달력을 공짜로 얻고요. 비밀번호는 password, 선택지는 radio, checkbox, select로 받아요. 여기에 autocomplete와 inputmode, placeholder까지 얹으면 사용자 손이 훨씬 편해져요.

당장 만들고 있는 폼을 열어서, 지금 text로만 되어 있는 칸이 없는지 훑어보세요. 이메일 칸, 숫자 칸, 날짜 칸을 제 type으로 바꾸는 것만으로도 검증 코드를 한 줄도 안 짜고 폼이 튼튼해져요. 브라우저가 주는 공짜 도움을 놓치지 마세요.