HTML의 <input> 태그는 사용자가 데이터를 입력할 수 있는 입력 필드를 생성합니다. 대표적인 입력 요소로는 텍스트 필드, 체크박스, 라디오 버튼, 이메일 필드 등이 있으며, <input> 태그에는 반드시 <label> 태그를 사용해 레이블을 지정하는 것이 좋습니다.
HTML 폼(Form)이란?
웹사이트에서 폼은 사용자가 사이트와 상호작용할 수 있게 해주는 핵심 요소입니다. 폼을 통해 사용자는 웹사이트에 데이터를 제출할 수 있으며, 제출된 데이터는 클라이언트 측 또는 백엔드 서버와 데이터베이스에서 처리됩니다.
HTML에서 웹 폼은 <form> 요소 안에 선언됩니다. 기본 문법은 다음과 같습니다.
<form> ... 폼 요소들 ... </form>
<form> 태그 내부에는 폼을 구성하는 다양한 요소들이 들어갑니다. 여기에는 텍스트 필드, 제출 버튼, 라디오 버튼, 여러 줄 텍스트 상자 등 HTML에서 허용되는 모든 종류의 입력 요소가 포함될 수 있습니다.
HTML input 태그의 기본 구조
<input> 요소는 방문자가 데이터를 제출할 수 있는 폼 필드를 정의합니다. 날짜 선택기, 체크박스, 버튼, 파일 업로더 등 다양한 형태의 필드를 지원합니다.
<input> 요소의 기본 문법은 다음과 같습니다.
<input type="입력타입">
<input> 요소는 여러 가지 속성을 받을 수 있지만, 반드시 지정해야 하는 핵심 속성은 바로 type입니다. type 속성을 지정하지 않으면 <input> 요소가 웹 페이지에 나타나지 않습니다. 이는 input 요소가 기본적으로 비어 있기 때문입니다.
실습 예제: 매장 피드백 폼 만들기
예제를 통해 <input> 태그가 실제로 어떻게 작동하는지 살펴보겠습니다. 샌드위치와 샐러드 전문점 '수의 샐러드(Sue's Salads)'에서 고객 경험 피드백을 수집하기 위한 폼을 만들어야 한다고 가정해 보겠습니다. 이 폼은 다음 세 가지 정보를 받아야 합니다.
- 고객의 이름 (텍스트)
- 매장 멤버십 프로그램 가입 여부 (체크박스)
- 매장 경험에 대한 1~5점 평점 (숫자)
주요 HTML 입력 타입
<input> 태그는 다양한 입력 타입을 지원하며, type 속성으로 지정합니다. 자주 사용되는 입력 타입은 다음과 같습니다.
- button – 클릭 가능한 버튼
- text – 일반 텍스트 입력 필드
- checkbox – 다중 선택이 가능한 체크박스
- radio – 단일 선택 라디오 버튼
- password – 비밀번호 입력 필드
- number – 숫자 입력 필드
- email – 이메일 주소 입력 필드
- url – URL 입력 필드
- date – 날짜 및 시간 선택기
- file – 파일 업로드
- image – 이미지 형태의 제출 버튼
- submit – 폼 제출 버튼
입력 타입별 실전 예제
1. 텍스트 필드(Text Field)
<input type="text">는 HTML에서 텍스트 입력 필드를 만드는 데 사용됩니다. 고객에게 이름을 묻는 필드를 만들어 보겠습니다.
<input type="text" placeholder="이름을 입력하세요">
위 코드는 두 개의 속성을 가진 텍스트 필드를 생성합니다. type 속성이 text로 설정되어 텍스트 입력을 받을 수 있고, placeholder 속성에는 필드에 표시될 안내 문구가 지정되어 있습니다. placeholder 값은 사용자가 직접 입력을 시작하면 사라집니다.
2. 체크박스(Checkbox)
HTML에서 체크박스는 type이 checkbox인 input으로 작성합니다.
<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> <label for="loyalty">멤버십 프로그램에 가입되어 있으신가요?</label>
이 코드는 클릭하면 선택 표시가 되는 체크박스를 생성합니다. 라벨('멤버십 프로그램에 가입되어 있으신가요?')을 클릭해도 체크박스가 선택되는데, 이처럼 label 태그는 스크린 리더 사용자를 포함한 모든 사용자가 폼의 내용을 쉽게 파악할 수 있도록 돕는 접근성 측면에서 매우 중요합니다.
체크박스와 관련된 주요 속성은 다음과 같습니다.
- type: 반드시 checkbox로 설정해야 합니다.
- id: 하나의 문서 내에서 고유한 값을 가져야 합니다.
- name / value: 폼 제출 후 수집된 데이터를 서버에서 처리할 때 유용하게 사용됩니다.
- checked: 값을 할당하지 않는 불리언(boolean) 속성입니다. checked를 명시하면 자동으로 true(선택됨)가 되며, 기본값은 false입니다. 따라서 초기 상태를 선택된 상태로 만들고 싶을 때만 지정하면 됩니다.
3. 라디오 버튼(Radio Button)
<input type="radio">는 HTML에서 라디오 버튼을 만드는 데 사용됩니다.
흥미롭게도 '라디오 버튼'이라는 이름은 자동차 산업에서 유래했습니다. 과거 차량용 오디오에는 물리적 버튼이 있었는데, 한 번에 하나의 버튼만 누를 수 있었고 다른 버튼을 누르면 이전 선택이 해제되었기 때문입니다.
체크박스와 라디오 버튼의 가장 큰 차이점은 선택 가능한 개수입니다. 라디오 버튼은 하나만 선택할 수 있으며, 하나를 선택하면 나머지는 자동으로 비활성화됩니다. 반면 체크박스는 여러 개를 동시에 선택할 수 있습니다.
체크박스를 라디오 버튼으로 바꾸려면 두 가지만 하면 됩니다. 먼저 input 타입을 radio로 변경하고, 모든 라디오 버튼의 name 값을 동일하게 맞춰주는 것입니다. name 값이 같아야 하나를 선택했을 때 나머지가 자동으로 해제됩니다.
<label for="yes">예</label> <input type="radio" value="yes" id="yes" /> <label for="no">아니요</label> <input type="radio" value="no" id="no" />
위 코드는 두 개의 라디오 버튼을 생성합니다. 첫 번째 버튼은 '예'라는 라벨과 yes라는 값을, 두 번째 버튼은 '아니요'라는 라벨과 no라는 값을 가집니다.
4. 숫자 입력 필드(Number Field)
<input type="number">는 폼에서 숫자 입력을 받을 때 사용합니다. 고객에게 매장 경험을 1~5점으로 평가하게 하는 필드를 만들어 보겠습니다.
<label>수의 샐러드에서의 경험은 얼마나 좋았나요? (1~5점)</label> <input type="number" min="1" max="5" />
위 코드는 1부터 5 사이의 숫자만 입력할 수 있는 필드를 만듭니다. 이 필드에는 숫자만 입력할 수 있으며, 텍스트를 입력하려고 시도하면 입력이 처리되지 않습니다.
또한 number 타입의 필드에는 작은 화살표 두 개가 나타납니다. 위쪽 화살표를 클릭하면 값이 1씩 증가하고, 아래쪽 화살표를 클릭하면 1씩 감소합니다.
마무리
HTML의 <input> 태그는 폼에서 사용자 입력을 받는 데 사용됩니다. 숫자, 텍스트, 날짜, 예/아니오 응답 등 다양한 유형의 데이터를 처리할 수 있습니다.
이 가이드에서는 <input> 태그의 기본 사용법과 함께 텍스트 필드, 체크박스, 라디오 버튼, 숫자 필드 등 주요 입력 타입을 예제와 함께 살펴보았습니다. 이제 여러분도 전문가처럼 <input> 태그를 활용해 다양한 폼 필드를 만들어 볼 준비가 되었습니다!