HTML에서는 type 속성을 사용하여 요소의 유형을 지정할 수 있습니다.
특히 <input> 태그와 함께 사용되는 type 속성은 사용자로부터 입력값을 받을 때 어떤 형태의 입력 요소를 만들지 결정하는 중요한 역할을 합니다.
type 속성이란?
type 속성은 폼(form) 요소와 함께 사용되며, 텍스트 입력창(text), 체크박스(checkbox), 라디오 버튼(radio) 등 다양한 입력 방식을 지정합니다. 이 속성 값에 따라 브라우저에 표시되는 입력 필드의 모양과 동작이 달라집니다.
예제
다음 코드를 실행하면 type 속성이 실제로 어떻게 적용되는지 확인할 수 있습니다. 아래 예제에서는 학생 정보를 입력받는 간단한 폼을 만들어 보았습니다.
<!DOCTYPE html> <html> <head> <title>HTML Forms</title> </head> <body> <p>정보를 입력하세요:</p> <form> 학생 이름:<br> <input type = "text" name = "name"> <br> 학생 과목:<br> <input type = "text" name = "subject"> <br> 등수:<br> <input type = "text" name = "rank"> </form> </body> </html>
코드 설명
위 예제에서 세 개의 <input> 태그는 모두 type="text"로 지정되어 있어 한 줄 텍스트 입력창으로 표시됩니다. 만약 체크박스를 원한다면 type="checkbox", 라디오 버튼이라면 type="radio"처럼 값을 변경하면 됩니다.
자주 사용되는 type 값
- text: 한 줄 텍스트 입력창
- password: 비밀번호 입력창(입력 내용이 가려짐)
- checkbox: 다중 선택이 가능한 체크박스
- radio: 단일 선택 라디오 버튼
- submit: 폼을 제출하는 버튼
- email: 이메일 형식 검증이 포함된 입력창
이처럼 type 속성 하나만으로도 같은 <input> 태그를 다양한 용도로 활용할 수 있으므로, HTML 폼 작성 시 반드시 익혀두면 좋습니다.