HTML에서 id와 name 속성의 차이점
HTML 폼(form)을 작성하다 보면 id 속성과 name 속성의 역할이 헷갈리기 쉽습니다. 두 속성 모두 요소에 이름을 부여하는 것처럼 보이지만, 실제 용도와 동작 방식은 완전히 다릅니다. 이 글에서는 두 속성의 차이점을 명확하게 정리해 드립니다.
id 속성이란?
id는 HTML 요소를 식별(identification)하기 위한 고유한 값입니다. 폼 요소에 지정된 id는 서버로 전송되는 데이터와는 아무런 관련이 없으며, 오직 문서 내에서 해당 요소를 구분하는 역할만 합니다.
id의 주요 활용 분야는 다음과 같습니다.
- CSS 스타일링: 특정 요소 하나에만 스타일을 적용할 때 사용합니다.
- JavaScript 제어: DOM 조작 시 대상 요소를 정확히 찾아내는 데 활용됩니다.
JavaScript에서 id를 참조할 때는 getElementById() 메서드를 사용합니다.
document.getElementById("userId");name 속성이란?
name 속성은 브라우저가 서버로 HTTP 요청(주로 폼 제출)을 보낼 때 사용되는 변수 이름입니다. 즉, name 속성의 값은 해당 요소의 value 속성에 담긴 데이터와 짝을 이루어 "이름=값(name=value)" 형태로 서버에 전송됩니다.
따라서 백엔드에서 폼 데이터를 처리하려면 반드시 name 속성이 설정되어 있어야 합니다.
name 속성의 특징은 다음과 같습니다.
- CSS 선택자나 URL 파라미터로 직접 참조할 수 없습니다.
- JavaScript에서는
getElementsByName()메서드로 참조합니다. 이때 같은 name을 가진 여러 요소가 반환될 수 있습니다.
document.getElementsByName("email");id와 name 비교 요약
| 구분 | id | name |
|---|---|---|
| 주요 용도 | 문서 내 요소 식별 | 서버 전송 시 데이터의 변수명 |
| 고유 여부 | 문서 내 유일해야 함 | 중복 가능 (예: 라디오 버튼 그룹) |
| CSS 참조 | 가능 (#선택자) | 불가능 |
| JS 참조 메서드 | getElementById() | getElementsByName() |
| 폼 데이터 전송 | 관련 없음 | 필수 (name=value 형태) |
마무리
정리하면, id는 클라이언트 측(CSS·JavaScript)에서 요소를 식별하기 위한 것이고, name은 서버 측으로 데이터를 전송할 때 사용되는 키입니다. 두 속성의 목적이 다르므로 상황에 맞게 적절히 사용하는 것이 중요합니다.