[attribute] HTML - value 속성 ★★★ - 요소값 지정 (= value속성 = 밸류속성) ※ 초기값/기본값/현재값

1. value 예제 - <input> 경우
2. value 정의
3. value 구문
4. value 예제 - <button> 경우
5. value 예제 - <li> 경우
6. value 예제 - <meter> 경우
7. value 예제 - <option> 경우
8. value 예제 - <progress> 경우
9. value 예제 - <param> 경우

value 예제 - <input> 경우

 

<form action="/action_page.php">

  <label for="ko">한글:</label>

  <input type="text" id="ko" name="ko" value="홈짱닷컴"><br>

  <label for="en">영문:</label>

  <input type="text" id="en" name="en" value="Homzzang.com"><br>

  <input type="submit" value="확인">

</form>

 

value 정의

 

요소의 값 지정. (태그마다 의미 살짝 다름.)

• <button>, <input>, <option> - 요소의 초기값 지정
• <li> - <ol> 태그 안에서 사용 시, 시작값 설정 역할.
• <meter> - 게이지 현재값 지정.
• <progress> - 업무 완성도 지정.
• <param> - 파라미터 값 지정.

 

---

 

1. value 속성 사용 가능 태그

<button>, <input>, <meter>, <li>, <option>, <progress>, <param>

 

PS. <textarea> 태그는 value 속성 사용 X

 

2.

주요 최신 브라우저 모두 지원.

 

value 구문

 

• <button value="value">
• <input value="text">
• <meter value="number">
• <li value="number">
• <option value="value">
• <progress value="number">
• <param value="value">

 

---

[속성값]

 

• <button> 경우, 버튼 초기값 지정.
• <input> 경우, 기본값 문자열 지정.
• <meter> 경우, 게이지 현재값 나타내는 부동소수 지정. (필수)
• <li> 경우, 리스트 시작값 숫자 지정. (다음 li는 이어서 자동증가)
• <option> 경우, 선택 시 서버로 보내지는 값 지정.
• <progress> 경우, 업무 완성도 나타내는 부동소수 지정.
• <param> 경우, 파라미터 값 지정.

 

value 예제 - <button> 경우

(예) 클릭 시 다른 값 전송하는 name 값 같은 버튼

 

<form action="/action_page.php" method="get">

한글/영문 선택:

    <button name="hz" type="submit" value="홈짱닷컴">한글홈짱</button>

    <button name="hz" type="submit" value="Homzzang.com">영문홈짱</button>

</form>

 

value 예제 - <li> 경우

 

<ol>

  <li value="100">HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

  <li>jQuery</li>

  <li>PHP</li>

  <li>SQL</li>

</ol>

 

결과보기

value 예제 - <meter> 경우

 

<p><label for="a">A 만족도:</label>

<meter id="a" min="0" low="40" high="90" max="100" value="95"></meter></p>

<p><label for="b">B 만족도:</label>

<meter id="b" min="0" low="40" high="90" max="100" value="65"></meter></p>

<p><label for="c">C 만족도:</label>

<meter id="c" min="0" low="40" high="90" max="100" value="35"></meter></p>

결과보기

---

PS1. 관련속성 의미

• high 속성 - 게이지 값이 높다 간주되는 값 지정.
• low 속성 - 게이지 값이 낮다 간주되는 값 지정.
• max 속성 - 게이지 상한 지정.
• min 속성 - 게이지 하한 지정.
• value 속성 - 게이지 현재값 지정.

 

PS2. 게이지바 색깔

• (value < low) 또는 (high < value)  경우 - 노란색
• (low ≤ value ≤ high) - 녹색

 

value 예제 - <option> 경우

 

<form action="/action_page.php">

    <label for="hz">좋아하는 코딩언어?</label>

    <select id="hz" name="hz">

        <option value="html">HTML</option>

        <option value="css">CSS/option>

        <option value="js">JavaScript</option>

    </select>

    <input type="submit" value="확인">

</form>

 

value 예제 - <progress> 경우

 

<label for="file">다운 진행도:</label>

<progress id="file" value="70" max="100"> 70% </progress>

 

결과보기

value 예제 - <param> 경우

 

<object data="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3">

<param name="autoplay" value="true">

 

결과보기