checkbox, radio 에서의 name 속성

input type checkbox

<form> 태그 내의 <input> 요소에서 checkbox를 사용하려면 type 속성을 "checkbox"로 설정하고, name 속성은 이 체크박스의 데이터를 서버로 전송할 때 중요한 역할을 합니다. name 속성은 체크박스에 대해 고유한 이름을 부여하여, 서버가 어떤 값이 선택되었는지 인식할 수 있도록 합니다.

다음은 체크박스에 name 속성을 사용하는 예입니다:

<form action="/submit" method="post">
  <label>
    <input type="checkbox" name="subscribe" value="newsletter"> 뉴스레터 구독
  </label>
  <br>
  <label>
    <input type="checkbox" name="subscribe" value="offers"> 특별 할인 제공
  </label>
  <br>
  <button type="submit">제출</button>
</form>

설명:

• <input type="checkbox" name="subscribe" value="newsletter">: 이 체크박스는 "subscribe"라는 이름을 가지며, 선택 시 "newsletter" 값이 전송됩니다.
• <input type="checkbox" name="subscribe" value="offers">: 이 체크박스도 "subscribe"라는 이름을 가지며, 선택 시 "offers" 값이 전송됩니다.

name="subscribe" 속성을 동일하게 설정하면, 여러 개의 체크박스가 같은 이름 아래 전송될 수 있습니다. 선택된 체크박스의 값은 배열 형태로 서버로 전달됩니다. 예를 들어, 사용자가 "뉴스레터 구독"과 "특별 할인 제공"을 모두 선택하면, 서버는 subscribe=["newsletter", "offers"]와 같이 받을 수 있습니다.

name 속성은 서버에서 데이터를 처리할 때 중요한 역할을 하므로, 일관성 있게 잘 설정해야 합니다.

input type radio

<input type="radio">에서 name 속성은 여러 라디오 버튼을 그룹화하는 데 사용됩니다. 동일한 name 속성을 가진 라디오 버튼들은 서로 상호 배타적(mutually exclusive)으로 동작하는데, 즉, 한 그룹 내에서는 하나의 라디오 버튼만 선택될 수 있습니다.

name 속성의 역할:

• 그룹화: 동일한 name 속성을 가지는 라디오 버튼들은 서로 그룹을 형성하고, 그룹 내에서 한 번에 하나의 버튼만 선택할 수 있게 됩니다.
• 서버 전송: 라디오 버튼이 선택되었을 때, 해당 name에 해당하는 값이 서버로 전송됩니다.

예시:

<form action="/submit" method="post">
  <label>
    <input type="radio" name="gender" value="male"> 남성
  </label>
  <br>
  <label>
    <input type="radio" name="gender" value="female"> 여성
  </label>
  <br>
  <label>
    <input type="radio" name="gender" value="other"> 기타
  </label>
  <br>
  <button type="submit">제출</button>
</form>

설명:

• 위의 예시에서 name="gender"는 세 개의 라디오 버튼을 그룹화합니다. 사용자가 "남성", "여성", "기타" 중 하나를 선택하면, 서버에는 선택된 라디오 버튼의 value 값이 "gender"라는 이름 아래 전송됩니다.
• 예를 들어, 사용자가 "여성"을 선택하면, 서버로는 gender=female이라는 데이터가 전송됩니다.

중요한 점:

1. 한 그룹에서 하나만 선택: name 속성이 동일한 라디오 버튼들 중에서는 하나만 선택할 수 있습니다. 다른 그룹의 라디오 버튼은 영향을 미치지 않습니다.
2. value 속성: 각 라디오 버튼은 선택될 때 그 value 값이 서버로 전송됩니다. 이 값은 선택된 버튼에 따라 달라집니다.

라디오 버튼을 여러 개 사용할 때는 각 그룹을 구분하기 위해 다른 name 값을 사용해야 하며, 이로써 서로 다른 그룹에서 각기 다른 값을 선택할 수 있습니다.