[js] JS - value 속성 ★ - INPUT 텍스트 필드의 value 속성값 설정/반환 (= value속성 = 밸류속성) ※ 인풋 밸류 속성

목차

1. value 예제 - INPUT 텍스트 필드의 value값 설정
2. value 정의
3. value 구문
4. value 예제 - INPUT 텍스트 필드의 value값 반환
5. value 예제 - 텍스트 필드의 입력값 유효성 체크
6. value 예제 - SELECT 태그 선택값 표시
7. value 예제 - SELECT 태그 선택값으로 INPUT 입력값 생성
8. 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>

결과보기