HTML에서 요소에 값을 지정하려면 value 속성을 사용합니다. 이 속성은 <button>, <input>, <li>, <option>, <meter>, <progress>, <param> 등 다양한 요소와 함께 사용할 수 있습니다.
value 속성이란?
value 속성은 폼 요소가 서버로 전송할 초기값을 정의하는 역할을 합니다. 라디오 버튼이나 체크박스에서는 선택된 항목의 value 값이 함께 제출되며, 텍스트 입력 필드에서는 화면에 미리 채워질 기본값을 설정할 수 있습니다.
예제
다음 코드를 실행하면 value 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html> <html> <body> <head> <title>HTML value attribute</title> </head> <p>Gender</p> <form> <input type = "radio" name = "gender" value = "male">Male <br> <input type = "radio" name = "gender" value = "female">Female </form> </body> </html>
실행 결과
위 예제에서는 성별을 선택하는 라디오 버튼 두 개를 만들었습니다. 각 버튼에는 "male"과 "female"이라는 value 값이 지정되어 있으며, 사용자가 선택한 항목의 값이 폼 제출 시 함께 전송됩니다. 이처럼 value 속성을 활용하면 화면에 보이는 텍스트와 실제 전송되는 데이터를 다르게 관리할 수 있어 폼 처리가 훨씬 유연해집니다.