HTML 폼 값 가져오기
HTML 양식(폼)의 입력 값을 가져오려면 value 속성을 사용하면 됩니다. 먼저 다음과 같은 텍스트 입력창이 있다고 가정해 보겠습니다.
<input type="text" id="getValues" value="My Name is John Smith" />
이제 이 입력창에 담긴 값 "My Name is John Smith"를 브라우저 콘솔에 출력해 보겠습니다.
전체 예제 코드
아래 예제는 외부 라이브러리 없이 순수 JavaScript만으로 구현할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="getValues" value="My Name is John Smith" />
<script>
// id가 "getValues"인 요소의 값을 가져옵니다
var originalvalue = document.getElementById("getValues").value;
// 가져온 값을 콘솔에 출력합니다
console.log("The value in the text box is =" + originalvalue);
</script>
</body>
</html>
코드 설명
- document.getElementById("getValues") : id가 getValues인 HTML 요소를 선택합니다.
- .value : 해당 input 요소에 설정된 값을 문자열로 반환합니다.
- console.log() : 전달받은 값을 브라우저 개발자 도구 콘솔에 출력합니다.
실행 방법
위 코드를 작성한 뒤 파일을 "index.html"로 저장합니다. VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 메뉴를 선택하면 브라우저에서 바로 실행됩니다. Live Server 확장이 설치되어 있지 않다면 HTML 파일을 브라우저로 직접 열어도 동일하게 확인할 수 있습니다.
실행 결과
프로그램을 실행하면 콘솔에 다음과 같이 출력됩니다.
The value in the text box is =My Name is John Smith
이처럼 value 속성과 document.getElementById()만 활용하면 HTML 폼의 값을 간단히 읽어올 수 있습니다. 참고로 사용자가 입력창의 값을 변경한 경우에도 value 속성은 항상 현재 입력된 최신 값을 반환한다는 점을 기억해 두면 유용합니다.