input name 차이 구분하기

<p><input /></p>

위 태그는 XHTML 1.0 Strict 유효성을 통과한다.

name이나 id 속성을 넣어줄 필요가 없다.

그러면 name이나 id는 왜 쓰는걸까??

이는 특정 요소에 스타일이나 동적 변화에 대한 대상이 되게 하려고 쓰는 것이다.

또한 페이지 전환 시 데이터 전송을 위해서도 쓰인다.

 

그런데 name 이나 id는 보통 같은값으로 하는 경우가 많다.

두 속성이 같은 기능을 하는것은 아닌데, 왜 그러는 걸까??

그럴려면 name과 id의 기능을 먼저 알아야 한다.

name	- image, div, table 등 다양한 요소에 사용 가능  - form 태그를 이용하여 다른 페이지로 값을 전달할 때 사용  - checkbox의 값을 전달할 때 배열로 전달시킴  - 자바스크립트의 getElementsByName을 활용할 때 사용
id	- image, div, table 등 다양한 요소에 사용 가능  - css와 연동하여 스타일을 지정할 때 사용  - 자바스크립트의 getElementById를 활용할 때 사용

name이나 id를 사용하는 요소로 span, div, img, a, ul, li, table, th, tbody, td 등 많은데, 대부분이 각각 상황에 따라서 변화가 필요한 경우가 많다.

그럴 경우에 id를 지정하여 상황에 맞게 요소들의 스타일을 변화시키거나 값을 변화시키고,

요소안에 담긴 값을 다른 페이지로 전달하는데 어느 요소에서 전달한것인지 이름을 구분하기 편하게 하기 위해서

name과 id의 값을 같게 한다고 생각한다. 이런것 처럼

<input type="text" name="pw" id="pw" />

물론 상황에 따라서 name과 id의 값은 다르게 할 수 있다.

아래에 예시를 적어보겠다.

<input type="checkbox" name="pw" id="pw1" />
 
<input type="checkbox" name="pw" id="pw2" />

checkbox인 경우에는 pw라는 name으로 묶여서 form을 통해 다음 페이지로 값이 전달된다.

만일 다음페이지로 넘길 필요가 없이 내부에서 처리를 할 것이라면, name이 없어도 된다.

<input type="checkbox" id="pw1" />
 
<input type="checkbox" id="pw2" />

만일 내부에서의 처리과정은 필요없고, 다음페이지로 넘기기만 해도 된다면 name만 써도 된다. 이때 다음페이지에 전달되는 pw의 순서는 먼저 출력된 순서대로다.

<input type="checkbox" name="pw" />
 
<input type="checkbox" name="pw" />

요약:
1) 어떤 객체에 있어 id는 자바스크립트의 getElementById를 활용할 때 사용된다.
2) 폼태그에 있어 name은 폼값을 넘기기 위해서 사용된다.
3) 따라서, 폼값을 굳이 넘겨야 할 필요가 없는 폼에 name은 군더더기에 불과하다.