コース: JavaScript 基本講座

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

フォームのデータを取得する

フォームのデータを取得する - JavaScriptのチュートリアル

コース: JavaScript 基本講座

フォームのデータを取得する

このレッスンでは、 フォーム内の要素から データを取り出してみます。 今開いているこのドキュメントには、 フォームが設定されています。 button 以外にフォーム内の要素が 畳んでありますけれども、 5つあります。 そしてこのJavaScriptコードでは、 button を操作しているので button 以外は畳んであるんですけれども、 form には name として form があり button には name として button と ついていますね。 この name を操作して 要素を取り出しているんですが、 まず form の方は document.forms というプロパティで name の form を指定すると、 form の要素を取得できます。 そして、今度は form の要素に対して button の name、 button と設定すれば button が取り出せる ということになりまして、 それに対して addEventListener で クリックをしたら この関数を実行しなさいということで、 console に button の value、 この値ですね、button となっています。 この button という文字が 表示されるんですが、 それがコンソールに出てくる ということになっています。 確認しましょう。 JavaScriptコンソールは、すでに 開いてますけれども、 「button」をクリックすると この「button」の value ですね、 「button」と表示されていますが、 これがコンソールに出てくると、 ということになっています。 ほかのフォームの要素の設定も 確認しておきましょう。 「text」には「hello, JavaScript form!」 とあって、 「radio」ボタンは「item 1」、 一番先頭が選ばれています。 「checkbox」は「check A」がオンで、 「check B」はオフです。 「select」の方は、一番先頭の項目 「selection 1」が選ばれていて、 「textArea」には 「write some text here」と 書いてあります。 では、button 以外のフォーム要素の値も コンソールに出すことにしましょう。 ということで、値が複数なので…

目次