Input tag type

사용자가 실제로 데이터를 입력하는 가장 핵심적인 도구인 **<input> 태그의 다양한 타입(type)**에 대해 알아보겠습니다.

type 속성에 어떤 값을 넣느냐에 따라 입력창은 단순한 글자 상자에서 달력, 선택 버튼, 파일 업로드 버튼 등으로 변화합니다.

---

1. 텍스트 및 정보 입력 타입

가장 기본적인 형태로, 특정 형식의 텍스트를 입력받을 때 사용합니다.

• text: 일반적인 한 줄 텍스트 입력창입니다.
• password: 입력한 글자가 *이나 ●로 가려져 보입니다.
• search: 검색어 입력창입니다. 우측에 입력 내용을 지우는 'X' 버튼이 생기기도 합니다.
• url: 웹 주소 형식인지 자동으로 검사합니다.
• email: @를 포함한 이메일 형식인지 자동으로 검사합니다.
• tel: 전화번호 입력창입니다. 모바일 기기에서 숫자 키패드를 띄우는 용도로 주로 쓰입니다.

---

2. 선택 타입 (Check & Radio)

여러 옵션 중 하나 또는 여러 개를 선택할 때 사용합니다.

• checkbox: 여러 개를 동시에 선택할 수 있는 체크 박스입니다.
• radio: 여러 개 중 하나만 선택할 수 있습니다. (같은 name 그룹끼리 연동됩니다.)

---

3. 숫자 및 범위 타입

수치 데이터를 다룰 때 유용합니다.

• number: 숫자만 입력 가능하며, 상/하 화살표 버튼이 생깁니다. (min, max, step 속성 사용 가능)
• range: 슬라이드 바 형태의 숫자 입력창입니다.

---

4. 날짜 및 시간 타입

브라우저에서 제공하는 달력이나 시간 선택기를 띄워줍니다.

• date / month / week: 연-월-일, 연-월, 연-주 단위의 날짜를 선택합니다.
• time: 시-분 단위의 시간을 선택합니다.
• datetime-local: 날짜와 시간을 동시에 선택합니다.

---

5. 전송 및 버튼 타입

폼의 동작을 실행하거나 취소합니다.

• submit: 폼에 입력된 데이터를 서버로 전송합니다.
• reset: 폼의 모든 내용을 초기값으로 되돌립니다.
• image: 이미지 형태의 전송 버튼을 만듭니다. (src 속성 필수)
• button: 아무 동작도 없는 버튼입니다. 보통 자바스크립트와 연결하여 사용합니다.

---

6. 특수 타입

기타 특수한 목적을 가진 타입들입니다.

• file: 내 컴퓨터의 파일을 선택하여 업로드할 때 사용합니다.
• hidden: 화면에는 보이지 않지만, 서버로 전송할 때 특정 데이터(예: 사용자 ID)를 몰래 담아 보낼 때 씁니다.

---

🖥️ 실전 예제 코드: "사용자 상세 정보 등록"

HTML

 

<form action="/register" method="post" enctype="multipart/form-data">
  <p>아이디: <input type="text" name="uid" placeholder="ID"></p>
  <p>비밀번호: <input type="password" name="upw"></p>

  <p>이메일: <input type="email" name="uemail"></p>
  <p>홈페이지: <input type="url" name="uweb"></p>
  <p>연락처: <input type="tel" name="utel"></p>

  <p>취미: 
    <input type="checkbox" name="hobby" value="music"> 음악
    <input type="checkbox" name="hobby" value="game"> 게임
  </p>
  <p>성별: 
    <input type="radio" name="gender" value="m"> 남
    <input type="radio" name="gender" value="f"> 여
  </p>

  <p>나이: <input type="number" name="age" min="1" max="100"></p>
  <p>만족도: <input type="range" name="point" min="0" max="10"></p>

  <p>생일: <input type="date" name="birth"></p>
  <p>예약시간: <input type="datetime-local" name="rsv"></p>

  <p>프로필: <input type="file" name="p-img"></p>
  <input type="hidden" name="token" value="abc12345">

  <input type="submit" value="가입하기">
  <input type="reset" value="초기화">
  <input type="button" value="중복확인" onclick="alert('확인중...')">
  <input type="image" src="btn_submit.png" alt="제출">
</form>

---

학습 정리

• email, url 등은 브라우저가 제출 시점에 형식을 1차로 검사해 주어 편리하다.
• radio 타입은 여러 항목 중 하나만 선택되도록 반드시 name 속성을 동일하게 맞춰야 한다.
• **hidden**은 사용자에게 보여줄 필요는 없지만 서버 처리에 꼭 필요한 정보를 전달할 때 유용하다.

---

인풋 태그의 수많은 타입들을 정복하셨습니다!

---