목차
value 예제 - <input> 경우 value 정의 value 구문 value 예제 - <button> 경우 value 예제 - <li> 경우 value 예제 - <meter> 경우 value 예제 - <option> 경우 value 예제 - <progress> 경우 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 정의
요소의 값 지정. (태그마다 의미 살짝 다름.)
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">
결과보기
