フォームの値をリアルタイムに取得するサンプル

結果

onkeyupを利用してテキストエリア内の値をリアルタイムに取得しています

HTML

<form name="testForm"><input id="input" name="textData" type="text" value=""
onkeyup="getText()" /></forms>
<p id="log">結果</p>

CSS

#input{
font-size:1.2em;
width:300px;
padding: 1em;
box-sizing:border-box;
}

#log{
font-size:1.2em;
width:300px;
padding: 1em;
box-sizing:border-box;
border-bottom: solid 1px #808080;
}

JavaScript

function getText(){

//document.forms.フォーム名.要素名.valueで中身を取得できます
let textData = document.forms.testForm.textData.value;

document.getElementById('log').innerHTML = textData;
}