231025 TIL) name, id, class 사용

개인 프로젝트하면서 당연히 구글링도 많이 하게 되었다. 그 중에서 내 코드의 뼈대가 되어주신 코드(?)가 있는데 처음 보는 코드들도 종종 보여서 공부해야할 필요성을 느꼈다. 이미 내가 맡은 프로젝트 부분은 기능구현까지 끝났지만 온전히 내가 친 코드가 아닌 이상 항상 찜찜한 마음이 든다. 알고 베끼는 거랑 모르고 베끼는 거는 큰 차이가 난다고 생각해서 요즘은 좀 불안하다. 개인프로젝트, 팀 프로젝트를 다 제출한다고 해서 그게 완전히 내 실력은 아닌거니까. 오늘 TIL도 작성해놓고 21시까지 제출을 못했는데 지금이라도 내려고 한다. 

 

 

HTML <form> 요소에는 name, id, 또는 class를 사용할 수 있다. 그동안은 class나 id만 봤었는데 오늘 name 을 처음 보고 정리할 필요가 있다고 생각이 들었다. 이 셋 속성은 서로 다른 목적을 가지고 있고 일반적으로 사용되는 방식을 정리한다.

1. name:

<form> 요소에 name 속성을 설정하면 해당 폼에 이름을 부여할 수 있다. name으로 폼 요소를 식별할 수 있다. 폼을 자바스크립트에서 찾거나 서버로 전송할때 사용할 수 있다. 그리고 HTML에서 name을 가진 입력필드는 해당 폼에서 서버로 제출될 시 KEY-VALUE 페어로 전송된다.

 

<form name="myForm">
   <!-- Form elements here -->
</form>

id: 

폼 요소에  ID 속성을 설정하면 해당 폼의 고유한 식별자를 줘서 JS 와 CSS에서 해당폼을 찾거나 스타일을 적용할 수 있다. 주로 폼을 식별하는데 사용하고 폼안의 개별요소를 식별하기 위해 사용하지 않음!

<form id="myForm">
   <!-- Form elements here -->
</form>

class:

폼 요소에 class 속성을 설정하면 해당 폼에 하나 이상의 클래스 이름을 할당할 수 있다. 주로 css 스타일 지정을 위해 사용되며 여러 요소에 동일한 스타일 적용할 때 유용함.

<form class="my-form special-form">
   <!-- Form elements here -->
</form>

 

 

<결론>
일반적으로, 폼을 식별할 때는 id를 사용하는 것이 가장 흔한 방법이며, CSS 스타일을 적용할 때 class를 사용한다. name 속성은 주로 서버로 데이터를 제출하거나 JavaScript를 사용하여 폼 요소에 접근할 때 사용한다.