checkbox, radio 버튼의 value 속성

input type radio

<input type="radio">에서 value 속성은 사용자가 해당 라디오 버튼을 선택했을 때 서버로 전송될 값을 지정합니다. value 속성은 선택된 라디오 버튼의 값을 나타내며, 서버로 제출될 때 중요한 역할을 합니다.

value 속성의 역할:

• 서버 전송 값: 사용자가 라디오 버튼을 선택하면, 해당 라디오 버튼의 value 값이 서버로 전송됩니다. 이는 폼 데이터를 서버에 보내는 데 사용됩니다.
• 기본값: value 속성을 지정하지 않으면, 선택된 라디오 버튼은 기본적으로 on이라는 값을 전송합니다.

예시:

<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>

설명:

• 각 라디오 버튼에는 value 속성이 지정되어 있습니다.
  • "male": 남성 버튼을 선택하면 "male" 값이 서버로 전송됩니다.
  • "female": 여성 버튼을 선택하면 "female" 값이 서버로 전송됩니다.
  • "other": 기타 버튼을 선택하면 "other" 값이 서버로 전송됩니다.
• 서버로 전송되는 데이터: 사용자가 "여성"을 선택하고 폼을 제출하면, 서버에는 gender=female이라는 데이터가 전송됩니다.

value 속성 없는 경우:

만약 value 속성을 생략하면, 해당 라디오 버튼이 선택되었을 때 기본적으로 on이라는 값이 전송됩니다.

예를 들어, 다음과 같이 value 속성을 지정하지 않은 경우:

<form action="/submit" method="post">
  <label>
    <input type="radio" name="gender"> 남성
  </label>
  <br>
  <label>
    <input type="radio" name="gender"> 여성
  </label>
  <br>
  <button type="submit">제출</button>
</form>

이 경우, 사용자가 선택한 라디오 버튼이 "남성"이든 "여성"이든 서버로는 gender=on이라는 값이 전송됩니다.

요약:

• value 속성은 라디오 버튼이 선택되었을 때 서버로 전송될 값을 정의합니다.
• value 속성을 사용하지 않으면 기본적으로 on 값이 전송됩니다.
• 같은 name 속성을 가진 라디오 버튼들은 서로 상호 배타적이며, 하나만 선택할 수 있습니다.

input type checkbox

 

<input type="checkbox">에서 value 속성은 체크박스가 선택되었을 때 서버로 전송되는 값을 정의합니다. 만약 체크박스가 선택되지 않으면, 해당 체크박스의 값은 전송되지 않습니다. 따라서 value 속성은 체크박스가 선택되었을 때만 서버로 보내질 값을 지정하는 중요한 역할을 합니다.

value 속성의 역할:

• 서버 전송 값: 체크박스가 선택되었을 때, 그 체크박스의 value 값이 서버로 전송됩니다.
• 선택되지 않은 경우: 체크박스가 선택되지 않으면 해당 체크박스의 값은 서버로 전송되지 않습니다. (체크박스가 선택되지 않았다는 정보는 전송되지 않습니다.)

예시:

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

설명:

• name="newsletter"인 체크박스의 value="yes"는 사용자가 이 체크박스를 선택했을 때, "newsletter=yes"라는 데이터가 서버로 전송된다는 뜻입니다.
• name="offers"인 체크박스의 value="yes"는 사용자가 이 체크박스를 선택했을 때, "offers=yes"라는 데이터가 서버로 전송된다는 뜻입니다.

만약 사용자가 두 체크박스를 모두 선택하면, 서버로는 다음과 같은 데이터가 전송됩니다:

newsletter=yes&offers=yes

선택되지 않은 체크박스:

체크박스는 선택된 경우에만 값이 전송됩니다. 예를 들어, 사용자가 "뉴스레터 구독"만 선택하고 "특별 할인 제공"은 선택하지 않으면, 서버로는:

newsletter=yes

이렇게 전송됩니다. offers에 해당하는 데이터는 전송되지 않습니다.

value 속성 생략한 경우:

만약 value 속성을 생략하면, 체크박스가 선택되었을 때 기본적으로 on이라는 값이 전송됩니다. 예를 들어, 다음과 같이 value 속성을 생략하면:

<form action="/submit" method="post">
  <label>
    <input type="checkbox" name="newsletter"> 뉴스레터 구독
  </label>
  <br>
  <button type="submit">제출</button>
</form>

사용자가 체크박스를 선택하면 서버로는 newsletter=on이라는 데이터가 전송됩니다.

요약:

• 체크박스가 선택되었을 때 value 속성의 값이 서버로 전송됩니다.
• 체크박스가 선택되지 않으면, 해당 체크박스의 값은 서버로 전송되지 않습니다.
• value 속성을 생략하면 기본적으로 "on"이 전송됩니다.