• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>


결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012