HTML id name의 차이와 name의 3가지 주요 역할
남들이 작성한 HTML 파일을 보다 보면 가끔 <select>, <input>, <textarea>와 같은 태그에 id와 name 속성이 같이 선언된 경우를 가끔 볼 수 있습니다.
<form>태그 안쪽 이거나 라디오 버튼도 아닌데 name이 있어서 이런 의문이 들었습니다.
‘내가 모르는 HTML id name의 차이점이 더 있나? name이 뭔가 특별한 역할을 더 하나?’
HTML id name의 차이
id는 HTML 문서 전체에서 단 하나만 존재해야 하는 고유한 식별자라는 거고, name은 고유하지 않다는 것이 핵심입니다.
용도도 약간 다른데 id의 용도는 워낙 다양하고, name의 용도는 3가지로 정해져 있습니다.
name의 3가지 주요 역할
1. 폼 데이터 전송 시 데이터 항목의 키값 역할
가장 대표적인 역할입니다. 폼 데이터 전송하는 부분이 있으면 당연히 데이터 항목의 키값 역할을 하는 name 속성이 있어야 합니다.
<form action="/submit" method="POST">
<input type="text" name="username" value="꼴레">
<input type="submit" value="제출">
</form>2. 라디오 버튼 그룹 키
라디오 버튼은 여러 개 중 한 개만 선택할 수 있으므로 그룹 키가 필수로 있어야 합니다.
<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성3. CSS 스타일링
name 속성값이 일치하는 요소를 선택해서 CSS 스타일링을 할 때 사용될 수 있습니다. 기술적으로 가능은 하지만 권장되지는 않는 방법입니다.
name 속성값으로 CSS 스타일링 하는 걸 권장하지 않는 이유
- name 속성의 주목적은 <form>태그로 데이터 전송 시 각 항목의 키 역할을 하는 것과 라디오 버튼의 그룹 키 역할을 하는 것입니다. 엉뚱하게 name 속성으로 CSS 스타일링을 하게 되면 추후에 예상치 못한 문제가 발생할 가능성이 생깁니다.
- class 속성으로도 충분히 CSS 스타일링이 가능하고, 더 권장되는 방법입니다.
- <form>태그로 데이터 전송하는 부분이 없는데 name 속성이 있으면 다른 개발자가 봤을 때 불필요한 고민을 할 수 있습니다.
<head>
<style>
input[name="username"] {
border: 1px solid;
}
</style>
</head>
<body>
<input type="text" name="username" id="username1">
<input type="text" name="username" id="username2">
</body>마무리: name 속성이 불필요하게 있는 경우가 많다.
결론은 <form>태그도 없고, 라디오 버튼도 없으면 name 속성은 전혀 필요가 없다는 것입니다.
그리고 HTML id name의 차이는 위에 언급된 정도가 다이지만 용도에 맞지 않거나 의미 없는 name 속성의 사용이 은근히 많다는 것입니다.
이 글을 쓰게 된 계기는 새로 온 프로젝트에 name 속성이 너무 많은 곳에 선언돼 있는데 사용하는 곳이 없어 보여서였습니다. 내가 모르는 뭔가가 있나 해서 여러모로 조사를 해봤지만 name 속성의 역할은 명확했습니다.
결국은 누군가가 습관적으로 name 속성을 넣었고, 그걸 복사한 다른 개발자들이 또 필요 없는 name 속성을 넣었다고 밖에 생각할 수밖에 없었습니다.
제가 잘못 알고 있는 부분이 있으면 댓글로 공유 부탁드립니다.
참고 자료
MDN Web Docs: id 속성
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/id
MDN Web Docs: name 속성
https://developer.mozilla.org/ko/docs/Web/API/Window/name
