[Travel] HTML id 속성(역할)과 name속성(역할)

1. id 속성:

• 역할: HTML 요소의 고유 식별자입니다. 페이지 내에서 고유해야 하며, JavaScript나 CSS에서 특정 요소를 선택하거나 참조할 때 주로 사용됩니다.

• 용도: id는 DOM에서 요소를 식별할 때 사용되며, document.getElementById()와 같은 메서드로 해당 요소를 선택할 수 있습니다. 또한, CSS에서 특정 스타일을 적용할 때도 사용됩니다.

• 제약: 동일한 HTML 문서 내에서 id 값은 고유해야 합니다. 즉, 같은 id를 가진 두 개의 요소가 있을 수 없습니다.

<input type="text" id="loginId" placeholder="아이디 입력">

• JavaScript에서 id를 사용:

document.getElementById('loginId').value;

2. name 속성:

• 역할: 폼 데이터를 서버로 전송할 때, 각 입력 필드의 이름을 나타냅니다. 서버에서는 이 name 속성을 통해 전송된 데이터를 구분합니다.

• 용도: name은 주로 폼 제출(form submission) 시 중요합니다. 폼이 제출될 때, name 속성을 통해 해당 입력 필드의 데이터를 서버로 전송합니다. 서버에서 요청 데이터를 받을 때, name 속성을 기반으로 해당 값을 처리합니다.

• 제약: name은 폼에서 고유하지 않아도 됩니다. 동일한 name을 가진 여러 필드가 있을 수 있으며, 그 경우 서버로 배열 형식의 데이터가 전송됩니다.

<input type="text" name="loginId" placeholder="아이디 입력">

• 서버에서 name을 사용하여 데이터 처리:
• 서버에서 전송된 loginId 값:

@RequestParam("loginId") String loginId

3. name과 id의 차이점 요약:

4. 둘 다 필요한 경우:

• 폼 제출 시 데이터 전송을 위해 name 속성은 꼭 필요합니다.

• JavaScript나 CSS로 요소에 접근해야 한다면 id 속성이 필요합니다.

• name: 서버로 데이터를 전송하기 위해 사용.

• id: JavaScript로 DOM에서 요소를 선택하거나 CSS에서 스타일을 적용할 때 사용.

결론: