정의 및 사용 방법

value 속성은 해당 요소의 값을 지정합니다.
사용 가능한 요소는 정해져 있으며 그 값의 의미는 요소마다 다릅니다.

사용 가능한 요소

value 속성은 모든 요소에 공통으로 적용할 수 있는 글로벌 속성이 아닙니다.
사용 가능한 요소가 정해져 있고 그 값의 의미는 요소마다 다르며, 일부 요소는 유형별로도 값의 의미가 다릅니다.

value 속성의 사용 가능한 요소와 그 값의 의미
요소값의 의미
<button> 폼 제출 시, 버튼의 name과 함께 전송되는 값을 정의합니다.
<data> 요소의 콘텐츠와 동일한 의미를 기계가 처리할 수 있는 형식으로 제공되는 값입니다.
<input> 해당 컨트롤 요소가 가지는 값입니다.
이 요소의 type 속성으로 나타내는 유형별로 값의 의미가 정의되어 있습니다.
<li> <ol>에 의해 정의된 목록 항목의 현재 순서 값을 나타냅니다.
<meter> 해당 컨트롤 UI에 표시되는 현재값입니다.
<option> 해당 옵션을 선택했을 때 폼과 함께 제출될 값입니다.
<progress> 해당 컨트롤 UI에 표시되는 현재값입니다.

참고하세요!
<textarea>는 value 속성이 사용 가능한 요소에 포함되지 않습니다.

예제

다음은 value 속성이 사용 가능한 요소별로 그 값의 의미는 내용을 살펴보겠습니다.

<button>

<button>에서 value 속성은 폼 제출 시, 버튼의 name과 함께 전송되는 값을 정의합니다.
폼 제출에 사용되는 버튼은 <button type="submit">입니다. 폼 제출에 사용되는 버튼에 지정하는 value 속성은 폼이 제출되는 데이터가 어떤 제출 버튼으로 제출되었으며, 그 값이 무엇인지 구별할 때 사용됩니다. 특히 아래의 예제처럼 제출 버튼이 여러 개일 때 유용합니다.

HTML 
<form action="submit_url" method="post">
    <p>
        <label for="user-name">이름</label>
        <input type="text" id="user-name" name="user-name">
    </p>
    <p>
        <!-- 각 버튼은 다른 값을 전송함 -->
        <button type="submit" name="action" value="save">저장</button>
        <button type="submit" name="action" value="delete">삭제</button>
    </p>
</form>

<data>

<data>에서 value 속성은 필수이며, 요소의 콘텐츠와 동일한 의미를 기계가 처리할 수 있는 형식으로 제공되는 값입니다. 이 값은 화면에 표시되는 콘텐츠와 같은 의미를 갖는 객관적이면서 정형화된 값으로 제공해야 합니다. 반드시 이 속성에 기계가 읽을 수 있는 형식의 값으로 지정되어 있어야 합니다.

먼저 예제로 살펴본 후 기계가 읽을 수 있는 형식이 무엇인지 살펴보겠습니다.

HTML 
<table>
    <caption>상품 재고 상태</caption>
    <thead>
        <tr>
            <th>상품명</th>
            <th>재고 상태</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>고급 블렌딩 커피</td>
            <td><data value="250">매우 많음</data></td> 
        </tr>
        <tr>
            <td>콜롬비아 싱글 오리진</td>
            <td><data value="6">부족</data></td> 
        </tr>
        <tr>
            <td>브라질 세하도</td>
            <td><data value="52">보통</data></td> 
        </tr>
    </tbody>
</table>
기계가 읽을 수 있는 형식

<data>의 value 속성은 화면에 표시되는 콘텐츠와 같은 의미를 갖는 객관적이면서 정형화된 값을 제공해야 합니다.
즉, 사람이 보는 텍스트와 동일한 정보를 프로그램(예: 검색 엔진이나 스크린 리더 등)이나 스크립트가 바로 식별할 수 있는 형태로 나타냅니다.

  • 주관적(예: 작음, 보통)이지 않고 객관적인(예: 99, SKU-12345) 문자열이나 수치를 사용해야 합니다.
  • 예들 들면, 상품 재고 관리 단위(SKU), 내부 데이터베이스 ID, 회원 등급 코드 등 사람이 읽는 이름(예: "작은 마요네즈") 대신 사용되는 고유하고 불변적인 코드가 해당됩니다.
스크립트와 함께 사용할 경우

<data>는 페이지의 스크립트와 함께 사용할 수도 있습니다.
스크립트에 사람이 읽을 수 있는 값과 함께 저장할 데이터 값이 있는 경우입니다. 이 경우, value 속성에 사용할 형식은 스크립트의 필요에 따라 달라집니다. data-* 속성을 사용하는 것도 유용할 수 있습니다.

구조화된 데이터(structured data)와의 결합 시

Google, Microsoft(Bing), Yahoo, Yandex 등 주요 검색 엔진은 웹 콘텐츠를 명확하게 이해하고 리치 스니펫(Rich Snippets) 같은 향상된 검색 결과를 제공하기 위해 Schema.org라는 공통된 어휘집을 사용합니다. 여기에는 명세서에서도 이미 표준화(정의)한 microformats 또는 microdata 속성을 사용하기 때문에 HTML에 마크업하면 검색 엔진은 페이지의 콘텐츠를 파악하기가 쉬워집니다. 이렇게 HTML에 추가하는 데이터를 '구조화된 데이터'라고 말합니다.

<data>에 구조화된 데이터와의 결합하는 경우 value 속성에 사용되는 형식은 사용하는 구조화된 데이터(단, 명세서에서 정의된 데이터로만)에 따라 결정됩니다.

<input>

<input>에서 value 속성은 해당 컨트롤 요소가 가지는 값입니다.
이 요소의 type 속성으로 나타내는 유형별로 값의 의미가 정의되어 있습니다. 유형별로 그 값의 의미는 내용을 살펴보겠습니다.

다음의 유형은 value 속성을 지정한다고 하더라도 아무런 효과가 없습니다.

예제: 페이지 로드 시 요소에 표시될 초깃값을 지정하는 의미

다음은 value 속성이 페이지 로드 시 요소에 표시될 초깃값을 지정하는 의미의 유형으로 대표적인 <input type="text">의 예제입니다.

HTML 
<input type="text" value="홍길동">
실제 적용된 모습
예제: 페이지 로드 시 요소에 표시될 초깃값을 지정하는 의미

다음은 value 속성이 폼 제출 시 해당 요소가 체크된 상태인 경우 전송되는 값을 지정하는 의미의 유형으로 대표적인 <input type="radio">의 예제입니다.

HTML 
<fieldset>
    <legend>관심이 있는 웹 개발 언어를 선택하세요.</legend>
    <div>
       <input type="radio" id="html" name="interest" value="html">
       <label for="html">HTML</label>
    </div>
    <div>
       <input type="radio" id="css" name="interest" value="css">
       <label for="css">CSS</label>
    </div>
    <div>
       <input type="radio" id="js" name="interest" value="js">
       <label for="js">JavaScript</label>
    </div>
</fieldset>
실제 적용된 모습
예제: 버튼에 표시되는 레이블의 값을 지정하는 의미

다음은 value 속성이 버튼에 표시되는 레이블의 값을 지정하는 의미의 유형으로 대표적인 <input type="button">의 예제입니다.

HTML 
<input type="button" value="클릭하세요!">
실제 적용된 모습

<li>

<li>에서 value 속성은 <ol>에 의해 정의된 목록 항목의 현재 순서 값을 나타냅니다.
이 속성에는 숫자만 지정할 수 있으며, 목록이 로마 숫자나 문자로 표시되는 경우에도 마찬가지입니다. 이 항목 이후의 목록 항목은 설정된 값부터 번호가 매겨집니다.

주의할 점으로 이 속성은 순서 없는 리스트 요소(<ul>)이나 메뉴(<menu>)에는 적용되지 않습니다.

HTML 
<p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
<ol>
    <li>라면</li>
    <li>김밥</li>
</ol>
<p>그 다음으로 맛있는 순서입니다.</p>
<ol>
    <li value="3">돈까스</li>
    <li>김치볶음밥</li>
</ol>
실제 적용된 모습

<meter>

<meter>에서 value 속성은 해당 컨트롤 UI에 표시되는 현재값입니다.

  • 지정된 경우 최솟값과 최댓값(min 속성 및 max 속성) 사이에 있어야 합니다.
  • 지정되지 않았거나 형식이 잘못된 경우 값은 0입니다.
  • 지정되었지만 min 속성 및 max 속성에서 지정한 범위 내에 없는 경우 값은 범위의 가장 가까운 끝과 같습니다.
min과 max 속성 사용 시
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage" min="0" max="100" value="40" low="20" high="80" title="백분율">40%</meter>
실제 적용된 모습
min과 max 속성 미사용 시
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage" value="0.5">50%</meter>
<!-- min 속성을 지정하지 않으면 min="0"입니다. -->
<!-- max 속성을 지정하지 않으면 max="1"입니다. -->
실제 적용된 모습

<option>

<option>에서 value 속성은 해당 옵션을 선택했을 때 폼과 함께 제출될 값입니다. 화면에서는 그 값이 표시되지 않습니다.

HTML 
<form>
    <label for="user-color">색상 선택</label>
    <select id="user-color">
        <option value="red">빨강</option>
        <option value="blue">파랑</option>
        <option value="yellow">노랑</option>
        <option value="green">초록</option>
    </select>
</form>
실제 적용된 모습

<progress>

<progress>에서 value 속성은 해당 컨트롤 UI에 표시되는 현재값입니다.

  • 지정하는 경우 0보다 크고 max 값 이하의 숫자나 부동 소수점 숫자이어야 합니다.
HTML 
<label for="setup">설치 진행률</label>
<progress id="setup" max="100" value="75" title="백분율">75%</progress>
실제 적용된 모습

브라우저 호환성

value 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
value 예 예 예 예

명세서

value 속성의 명세서 사양
명세서 사양
value HTML Standard
#attr-button-value
value HTML Standard
#attr-data-value
value HTML Standard
#attr-input-value
value HTML Standard
#attr-li-value
value HTML Standard
#attr-meter-value
value HTML Standard
#attr-option-value
value HTML Standard
#attr-progress-value

참고문헌

같이 보기