HTML의 value 속성은 드롭다운 목록을 구성하는 <option> 요소에 전송값을 지정하는 속성입니다. 사용자가 폼(form)을 제출하면, 화면에 표시되는 텍스트가 아니라 여기에서 지정한 value 값이 서버로 전송됩니다.
이 속성을 활용하면 사용자에게는 읽기 쉬운 라벨을 보여주고, 실제로는 데이터 처리에 적합한 코드나 영문 값을 백엔드로 넘길 수 있어 실무에서 매우 유용합니다.
문법(Syntax)
value 속성의 기본 문법은 다음과 같습니다.
<option value="텍스트"></option>
예제
아래는 좋아하는 과목을 선택하는 드롭다운 목록에 value 속성을 적용한 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>HTML option value 속성 데모</h1>
<p>좋아하는 과목을 선택하세요:</p>
<form method="post" action="">
<select>
<option value="Physics">물리학</option>
<option value="Chemistry">화학</option>
<option value="Biology">생물학</option>
</select>
<input type="submit" value="제출" class="btn">
</form>
</body>
</html>실행 결과
위 코드를 실행하면 세 개의 과목(물리학, 화학, 생물학)이 담긴 드롭다운 목록과 제출 버튼이 화면에 나타납니다. 사용자가 '물리학'을 선택한 상태에서 폼을 제출하면, 화면에 보이는 '물리학'이라는 텍스트가 아닌 Physics라는 value 값이 서버로 전송됩니다.
알아두면 좋은 점
- value 생략 시: value 속성을 지정하지 않으면 <option> 태그 안의 텍스트 내용이 그대로 서버로 전송됩니다.
- 라벨과 값 분리: 표시 텍스트와 value를 다르게 설정할 수 있으므로, UI에는 한글 라벨을 보여주고 서버에는 영문 코드를 전달하는 방식으로 활용할 수 있습니다.
- select 요소와 함께 사용: value 속성은 반드시 <select> 요소 내부의 <option> 또는 <optgroup>과 함께 사용해야 의미가 있습니다.