html의 name과 value에 관한 공부

<input type="radio" name="lecture" value="html" checked> HTML <br>
<input type="radio" name="lecture" value="css"> CSS <br>
<input type="radio" name="lecture" value="java"> JAVA <br>
<input type="radio" name="lecture" value="cpp"> C++

 

<input>요소에서 type="radio"와 함께 name과 value 속성을 사용하는 이유는 라디오 버튼이 그룹으로 동작하면서 특정 값을 전송할 수 있도록 하기 위해서다.

1. name 속성이 동일한 이유

HTML에서 type="radio"인 입력 요소는 같은 name 값을 공유하는 버튼들 끼리 하나의 그룹으로 묶입니다.

이 그룹 내에서는 한 번에 하나의 버튼만 선택 가능하게 동작합니다. 예를 들어 name="lecture" 인 라디오 버튼 4개는 하나의 그룹을 형성하며 이 그룹에서는 동시에 하나의 옵션만 선택할 수 있습니다. 

2. value 속성이 필요한 경우

라디오 속성인데 왜 value 속성이 필요한 것인가 의문이 들때도 있다. 겉보기에는 별로 필요없이 보인다. 하지만 라디오 버튼은 사용자가 선택한 옵션에 해당하는 값(value)을 서버로 전송한다. value 속성은 각 라디오 버튼의 실제 값을 정의합니다.  즉, 서버로 어떤 선택지가 선택되었는지 알리기 위해 필요하다. 

3. 왜 value가 없으면 안되나?

라디오 버튼의 value는 선택지가 무엇인지 서버에 전달하는 유일한 정보입니다. 만약 value 속성이 없으면, 폼을 제출했을때 라디오 버튼의 선택 값이 빈 값으로 전송됩니다. 

 

라디오 버튼의 동작 메커니즘

name: 같은 그룹으로 묶기 위해 사용, 동일한 name을 가진 라디오 버튼 그룹에서 하나만 사용할 수 있음 

value: 선택된 라디오 버튼의 값을 식별하고 서버에 전송