フォーム内の入力値はどのようにして得られますか？

Question

私はフォームタグに埋め込まれた入力ボックスの値を取得しようとしています。

たとえば、これはうまく動作します。

<div> 
    <label>First Name</label> 
    <input id="firstName" type="text" required /> 
</div> 
<button type="submit" onclick="getName()">Submit</button> 

<script type="text/javascript"> 
    function getName() { 
     var name = document.getElementById('fistName').value; 
     console.log(name); 
    } 
</script> 

これは、送信ボタンがクリックされたときにコンソールに入力される値を出力します。しかし、私はそれを以下のような形で置くと何も返されません。

<form> 
    <div> 
     <label>First Name</label> 
     <input id="firstName" type="text" required /> 
    </div> 
    <button type="submit" onclick="getName()">Submit</button> 
</form> 

フォームタグに保護機能が追加されていますか？フォーム内の入力タグから値を取得するにはどうすればよいですか？

Answer 1

それは何も

はい、それはありませんを返しません。

しかし、はフォームを送信しているため、ページもすぐに更新され、最初からやり直しています。

フォームは何も保護していません。どちらの場合も、コードはまったく同じことを行っています。しかし、2番目のケースでは、formは物理的に結果を見るまでに何か他のことをしています（ページを読み込む）。

Answer 2

ボタンsubmit型のボタンは、ページをリフレッシュします。また、コンソールがクリアされます。したがって、出力は行われますが、すぐにクリアされます。ボタンの種類を「ボタン」に変更してみてください。その後、ページが更新されず、出力が表示されます。