이 글에서는 HTML(HyperText Markup Language) 에서 사용자로부터 값을 어떻게 입력받을 수 있는 인풋(Input) 태그의 여러가지 속성, 타입에 대해 정리했습니다.

HTML: Input

input 태그는 사용자로부터 텍스트, 이메일, 숫자 등의 여러가지 타입의 값을 입력받을 때 사용하는 HTML 태그입니다.

Input: 여러가지 속성

• type: 어떤 형태의 데이터를 입력받을지를 결정 하는 속성.

    <input type="email" />
    <input type="number" />
  

• name: 데이터의 고유 이름을 설정하는데 사용하는 속성.

  <input type="text" name="username" />
  <input type="password" name="password" />
  

• value: input 태그가 현재 가지고 있는 값을 나타내는 속성. 기본값을 설정할 때도 사용된다.

  <input type="text" name="nickname" value="baklibra" />
  

• placeholder: 예시/힌트 텍스트를 보여주는 속성. 실제 입력값은 아니며 값을 입력하면 사라진다.

  <input
    type="text"
    name="username"
    placeholder="아이디를 입력하세요"
  />
  

• disabled: input 태그를 비활성화되어 클릭/입력이 불가능하며, 폼 전송 시 값이 전송되지 않는다.

  <button type="submit" disabled>제출하기</button>
  

• required: 값 필수 여부를 나타내는 속성으로 값을 입력되지 않으면 브라우저가 기본으로 검증 메세지를 띄워준다.

  <input
    type="password"
    name="password"
    required
  />
  

Input: 여러가지 타입

input의 type 값에 따라 텍스트, 비밀번호, 이메일 등 용도에 맞는 전용 입력 필드를 만들 수 있고, 브라우저가 각 타입에 맞는 UI와 기본 검증을 함께 제공해 줍니다.

Input: 텍스트 타입

text 는 한줄 텍스트를 입력받을 때 사용하는 타입 속성입니다.

• text 타입 예시

  <input type="text" />
  

Input: 패스워드 타입

password 는 사용자 계정의 패스워드를 입력받을 때 사용하는 타입 속성으로, 입력 내용이 ●●● 으로 가려집니다.

• password 타입 예시

  <input type="password" />
  

Input: 이메일 타입

email 은 이메일 정보를 입력받을 때 사용하는 타입 속성으로 이메일 형식 검증을 지원하고, 모바일에서 이메일 입력에 어울리는 키보드를 보여줍니다.

• email 타입 예시

  <input type="email" />
  

Input: 넘버 타입

number 는 숫자 정보를 입력받을 때 사용하는 속성으로, 스핀 버튼이 표시되고 숫자가 아닌 값은 기본 검증에서 막히게됩니다.

• number 타입 예시

  <input type="number" />
  

Input: 체크박스 타입

checkbox 는 여러 값을 다중 선택 으로 받는 타입으로, 각 체크박스는 체크 여부만 true/false 로 표현됩니다. 같은 name 을 가진 checkbox 들 중 선택된 checkbox 의 value 가 서버로 리스트처럼 묶여 전송되며, 폼이 application/x-www-form-urlencoded 로 전송될 때는 stack=frontend&stack=backend 같이 한 줄의 쿼리 스트링으로 인코딩됩니다.

• checkbox 예시

    <input type="checkbox" name="stack" value="frontend" />
    <input type="checkbox" name="stack" value="backend" />
    <input type="checkbox" name="stack" value="devops" />
  

Input: 라디오 타입

radio 타입은 여러 선택지 중에서 딱 하나만 고르게 할 때 사용하는 타입으로, 같은 name을 가진 라디오 버튼들은 서로 연결되어 한 그룹이 되고, 그 그룹 안에서는 항상 하나 선택 또는 전부 해제 선택하도록 강제됩니다.

• radio 타입 기본 예시

  male: <input type="radio" name="gender" value="male" />
  female: <input type="radio" name="gender" value="female" />
  other: <input type="radio" name="gender" value="other" />
  

동일한 name 값을 가지는 radio 타입의 input 은 하나의 그룹 이 되고 사용자는 해당 그룹의 항목 중 오직 하나만 선택 할 수 있습니다.

Input: 날짜/시간 타입

날짜·시간 관련 인풋 타입들은 브라우저가 전용 피커 UI 를 띄워줍니다. 덕분에 사용자가 직접 형식을 맞춰 입력하지 않아도 되고, 기본적인 형식 검증도 함께 처리됩니다.

• type="date": 날짜(년/월/일)를 선택하는 달력 UI.

    <input type="date" name="birthday" />
    <input type="time" name="meeting_time" />
    <input type="datetime-local" name="event_at" />
  

• type="time": 시/분(필요시 초)만 선택하는 시간 피커.

    <input type="date" name="birthday" />
    <input type="time" name="meeting_time" />
    <input type="datetime-local" name="event_at" />
  

• type="datetime-local": 날짜 + 시간까지 한 번에 선택하는 입력 필드.

    <input type="date" name="birthday" />
    <input type="time" name="meeting_time" />
    <input type="datetime-local" name="event_at" />
  

Input: 파일 타입

file 는 이미지, 동영상과 같은 파일을 입력받을 때 사용하는 타입 속성입니다.

• file 타입 예시

  <input type="file" />
  

Input: Label과 함께

input만 둔다면 사용자가 어떤 값을 써야 하는지 알기 어렵기 때문에, 설명 텍스트를 함께 두는 것이 좋습니다. label은 해당 인풋을 설명하는 텍스트 로, "이 칸에 어떤 값을 입력해야 하는지"를 명확하게 알려 줍니다.

• label 사용 시 좋은 점
  • label을 클릭해도 input에 포커스가 가기 때문에 클릭 영역이 넓어져 사용성이 좋아진다.
  • 스크린 리더는 input에 포커스가 갈 때 label의 텍스트를 함께 읽어 줘서 접근성이 올라간다.

Label: Input을 감싸자

<label>
  사용자 이름
  <input type="text" name="username" />
</label>

label 안에 input을 포함시키면 둘이 암묵적으로 연결되어, label 전체(텍스트 영역 포함)를 클릭해도 해당 input이 활성화됩니다.

Label: for/id 속성과 Input 을 함께

<label for="agree-terms">이용약관에 동의합니다</label>
<input id="agree-terms" type="checkbox" name="agree" />

for와 id 값을 맞추면, label과 input이 명시적으로 연결되며 label을 클릭해도 해당 input이 활성화됩니다.

Input: Best Practice

1. 중요한 인풋에는 가능하면 항상 label을 붙인다.
2. 단순 스타일용 <span> 대신, 의미를 살릴 수 있도록 label로 필드 이름을 표시한다.
3. 체크박스·라디오는 반드시 라벨과 함께 사용 해 선택 영역과 접근성을 확보한다.
4. placeholder는 “설명”이 아니라 예시 텍스트 로만 쓰고, 필드 이름은 label로 제공한다.
5. for와 id를 쓸 때는 페이지 내에서 중복되지 않는 고유 id 를 사용한다.
6. 시멘틱 관점에서 “입력 필드”는 input, “필드의 이름/설명”은 label로 역할을 분리하는 것이 좋다.

주의할 점

1. type을 생략하면 기본값 text가 적용된다

이메일 필드에 type="email"을 지정하지 않으면 모바일에서 이메일 키보드가 나오지 않고, 브라우저 기본 검증도 동작하지 않는다.

2. label과 input을 연결하지 않으면 접근성이 깨진다

<label for="id">와 <input id="id">를 매칭하지 않으면 스크린 리더가 필드의 용도를 알 수 없다.