[JavaScript] 자바스크립트에서 텍스트 박스 값 읽어 오기 input, text

154_자바스크립트에서 텍스트 박스 값 읽어 오기 input, text

[적용]

• HTML 폼의 데이터 값을 가져오고 싶을 때
• 텍스트 입력 폼의 데이터를 변경하고 싶을 때

---

[문법]

속성	의미	타입
input요소.value	입력 폼의 문자열	문자열

* input 요소는 <input type='text'/>

---

[내용]

input 요소의 type 속성을 text로 설정하면 텍스트 입력 폼이 표시된다.

텍스트 입력 폼은 유저로부터 임의의 텍스트를 입력받는다.

자바스크립트는 value 속성으로 요소를 참조하여 데이터 값을 확인할 수 있으며, value 속성은 문자열(String)이다.

 

HTML                                                                                                                                                              index.html

<input id="myText" type="text" value="안녕하세요. 여러분!" />

JavaScript                                                                                                                                                          main.js

const element = document.querySelector('#myText');
const value = element.value;
console.log(value);  // 결과: '안녕하세요. 여러분!'

 

값의 대입은 value 속성을 사용해 문자열을 대입한다.

대입한 문자열이 화면의 텍스트 입력 폼이 된다.

 

const element = document.querySelector('#myText');
element.value = '안녕하세요. 여러분!';

---

[Appendix]

전화번호와 E-mail 입력 폼의 표시

input 요소의 type 속성이 email과 tel 지정이 가능하다.

text와 같은 입력 폼이지만 스마트폰에서 폼 형식에 맞는 키보드가 표시된다.

tel은 번호 입력용 키보드가 표시되며, email은 영문 키보드가 표시된다.

 

<input type="email" /> 지정

 

<input type="tel" /> 지정

 

---

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김