Input Tag type 속성 (2/2)

 

🔵  <input> 태그의 type 속성

 

🔸 텍스트 및 정보 입력 타입

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

• text: 일반 텍스트 입력칸.(한 줄)
• password: 입력 텍스트 숨김. (*, ●로 가려져 보인다.)
• search: 검색어 입력창. (일부 브라우저는 입력 필드 안에 ‘×’ 버튼을 자동으로 표시해 텍스트를 쉽게 지울 수 있게 한다.)
• url: URL 형식 자동 검사.
• email: 이메일 형식 자동 검사.
• tel: 전화번호 입력창. (모바일 기기에서 숫자 키패드를 띄우는 용도로 주로 사용)

 

🔸 선택 타입 (Check & Radio)

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

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

 

🔸 숫자 및 범위 타입

수치 데이터를 다룰 때 사용한다.

• number: 숫자 입력 전용. (일부 브라우저는 상/하 화살표가 생겨 숫자를 쉽게 증가/감소 가능)
  
  • min: 입력 가능한 최소 값.
  • max: 입력 가능한 최대 값.
  • step: 숫자를 증가/감소시키는 단위.
  • required: 필수 입력 여부.
  • placeholder: 입력 힌트.
• range: 슬라이더(막대형 선택기) 형태의 숫자 입력창.

 

🔸 날짜 및 시간 타입

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

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

 

🔸 전송 및 버튼 타입

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

• submit: 폼에 입력된 데이터를 서버로 전송.
• reset: 폼의 입력된 데이터를 초기화.
• image: 이미지 형태의 전송 버튼. (src 속성 필수)
• button: 클릭만 가능한 일반 버튼. (자바스크립트와 연동하여 사용)

 

🔸 특수 타입

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

• file: 사용자가 컴퓨터나 기기에서 파일을 선택하도록 하는 입력.
  • accept: 허용할 파일 형식 지정. (jpg, png, image 등)
  • multiple: 여러 파일 선택  허용.
• hidden: 사용자 화면에는 보이지 않지만, 폼 데이터를 서버로 전송할 때 포함되는 입력.

 

 

📍  POINT 📍 

✔️ email, url 등 타입은 제출 시 브라우저가 1차로 자동 검사. ✔️

✔️ radio 타입은 여러 항목 중 하나만 선택되도록 반드시 name 속성을 동일하게 맞춰야 한다.✔️

✔️ hidden 타입은 이용자에게 노출할 필요는 없지만 서버 처리에 필요한 정보를 전달 시 사용한다. ✔️

 

---

 

⚙️ 실 전 예제 코드 ⚙️

<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>

 

+

 

<label for="user-id"></label>
<input type="text" id="user-id">

요소	성격
<label>	고정 키워드
for	속성 키워드
"user-id"	값 (이름, 변수처럼 사용)
<input>	고정 키워드
type="text"	입력 타입 지정
id="user-id"	변수 역할

즉,
"text" → 고정 값 (입력 타입)
"user-id" → 개발자가 정하는 값 (변수처럼 사용)