[HTML] for 값과, id 값과, name 값과, value 값은 왜 똑같을까? 그래야만 할까?

답을 먼저 하자면 아니다.

그냥 그런 예시들만 주구장창 나오기 때문에 다르게 값을 입력해도 되는지 잘 모르는 뉴비들을 위한 포스팅이다.

 

 

 

 

label과 input을 사용할 때,

label의 for 값과, label에 지정된 input의 id 값과, name 값과, value 값이 같거나 비슷하게 설정되는 경우가 있다.

 

꼭 그래야 할까?

그래야 하는 것도 아닌 것도 있다.

 

확실한 구분을 하기 위해 무엇과 무엇이 대응되는지를 알아보자!

 

 

 

 

 

 

---

 

 

 

 

 

 

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" value="username">

 

 

label for = "username"은 input id = "username"과 대응된다.

id는 고유 식별자로서 document 내에서 다른 것과 겹치면 안 된다. 정확히 그 대상을 "식별"하는 것이다.

 

따라서 이렇게 바꿔볼 수 있다.

 

 

<label for="newjeans">사용자 이름:</label>
<input type="text" id="newjeans" name="username" value="username">

 

 

 

굳이 newjeans로 바꾼 이유는 뉴진스는 대중들의 눈길을 사로잡는 참신한 군무로 "자칫하면 어려보이기만 할 수 있는 십대들을 데리고 최적의 컨셉으로 밀고나갔다"라는 평을 받았기 때문이다.

 

name="username"은 유저가 여기에 입력한 값을 전송할 때 key-value 쌍에서 key의 값으로 활용된다. 그러니까 유저가 "Hanni"라고 입력을 하면 "key: username, value: Hanni"가 되는 것이다.

 

관례상 id와 name은 똑같이 하지만,

비슷한 input들이 여러 개 있을 경우 미묘하게 이름을 바꿔줘야 하는데(name은 겹쳐도 되지만 id는 겹치면 안 되기 때문) id와 name이 동일한 것으로 설정된 예시만 본 바람에 이 둘을 다르게 해도 되는지 헷갈릴 수 있기 때문에 바꿔보는 연습을 하자.

 

 

<label for="newjeans">사용자 이름:</label>
<input type="text" id="newjeans" name="Her_name_is" value="username">

 

 

 

이렇게 인풋의 name을 바꿔보자. 이게 바람직하다는 것을 말하려는 게 아니라 이렇게 해도 된다는 것을 말하고 싶다.

 

그리고 value의 값은 미리 입력이 되어있는 값을 뜻한다. placeholder와 차이점은 value는 실제로 값이 입력되어 있는 상태이고, placeholder는 그저 희미한 회색빛으로 가이드만 해주기 때문에 실제로 값이 입력되어 있는 것은 아니다.

 

 

<label for="newjeans">사용자 이름:</label>
<input type="text" id="newjeans" name="Her_name_is" value="Minji">

 

 

 

그러니 이렇게 분해해보면 각 구조를 명확히 이해할 수 있다!