목차
- value 예제 - INPUT 텍스트 필드의 value값 설정
- value 정의
- value 구문
- value 예제 - INPUT 텍스트 필드의 value값 반환
- value 예제 - 텍스트 필드의 입력값 유효성 체크
- value 예제 - SELECT 태그 선택값 표시
- value 예제 - SELECT 태그 선택값으로 INPUT 입력값 생성
- value 예제 - value / defaultValue 속성 차이
value 예제 - INPUT 텍스트 필드의 value값 설정
사이트: <input type="text" id="hz" value="홈짱닷컴">
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").value = "Homzzang.com";
}
</script>
결과보기
value 정의
INPUT 텍스트 필드의 value 속성값 설정/반환.
1. value값으로 올 수 있는 것들
- 기본 설정값
- 사용자 입력값
- 스크립트에 의해 입력된 값
2.
모든 브라우저 지원.
value 구문
반환
textObject.value
설정
textObject.value = text
[속성값]
text
INPUT 텍스트 필드의 value 속성의 값으로 지정할 텍스트
[반환값]
INPUT 텍스트 필드의 value 속성의 값을 반환.
value 예제 - INPUT 텍스트 필드의 value값 반환
사이트: <input type="text" id="hz" value="홈짱닷컴">
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").value;
document.getElementById("demo").innerHTML = x;
}
</script>
결과보기
value 예제 - 텍스트 필드의 입력값 유효성 체크
<form action="/action_page.php" onsubmit="return homzzang()">
이름 (최대 5글자): <input type="text" id="name" size="20" name="name"><br>
나이 (1~100 가능): <input type="text" id="age" size="20" name="age"><br>
이메일 (E-mail): <input type="text" id="email" size="20" name="email"><br><br>
<input type="submit" value="확인">
</form>
<script>
function homzzang() {
var at = document.getElementById("email").value.indexOf("@");
var age = document.getElementById("age").value;
var name = document.getElementById("name").value;
submitOK = "true";
// 이름 길이 체크
if (name.length > 5) {
alert("최대 5글자 가능.");
submitOK = "false";
}
// 나이 범위 체크
if (isNaN(age) || age < 1 || age > 100) {
alert("나이는 1~100 가능.");
submitOK = "false";
}
// 이메일 형식 체크
if (at == -1) {
alert("이메일 형식 X");
submitOK = "false";
}
if (submitOK == "false") {
return false;
}
}
</script>
결과보기
value 예제 - SELECT 태그 선택값 표시
※ 실렉트 태그에서 선택한 옵션값 표시
<form>
자신있는 언어 선택:
<select id="hz" onchange="homzzang()">
<option></option>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>PHP</option>
<option>SQL</option>
</select>
<p>나의 자신있는 언어: <input type="text" id="demo" size="20"></p>
</form>
<script>
function homzzang() {
var hz = document.getElementById("hz");
document.getElementById("demo").value = hz.options[hz.selectedIndex].text;
}
</script>
결과보기
value 예제 - SELECT 태그 선택값으로 INPUT 입력값 생성
<form>
번호 선택:
<select id="num">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<input type="button" onclick="homzzang()" value="━▶">
<input type="text" id="result" size="20">
</form>
<script>
function homzzang() {
var num = document.getElementById("num");
var option = num.options[num.selectedIndex].text;
var txt = document.getElementById("result").value;
txt += option;
document.getElementById("result").value = txt;
}
</script>
결과보기
value 예제 - value / defaultValue 속성 차이
사이트: <input type="text" id="hz" value="홈짱닷컴">
<button type="button" onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var hz = document.getElementById("hz");
var defaultVal = hz.defaultValue;
var currentVal = hz.value;
if (defaultVal == currentVal) {
document.getElementById("demo").innerHTML = "defaultValue: "
+ hz.defaultValue + " / value: " + hz.value
+ "<br>이젠 Homzzang.com 입력 후 확인해 보세요.";
} else {
document.getElementById("demo").innerHTML = "defaultValue: " + defaultVal + " / value: " + currentVal;
}
}
</script>
결과보기
