JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】HTMLフォームの値をJavaScriptで取得してコンソールに表示する方法

HTMLフォームに入力された値を取得するには、valueプロパティを使用します。本記事では、テキストボックスに設定された値をJavaScriptで読み取り、ブラウザのコンソールに出力する方法を、実際のコード例とともに解説します。

取得対象となるHTMLフォームの例

まず、以下のようなテキスト入力フィールドがあるとします。

<input type="text" id="getValues" value="My Name is John Smith" />

このinput要素には、id属性として「getValues」が設定され、初期値として「My Name is John Smith」が入っています。この値をコンソールに表示させるのが今回のゴールです。

ポイント：valueプロパティとgetElementById()

フォームの値を取得する基本の手順は次の2つです。

  • document.getElementById() … id属性を指定してHTML要素を取得する
  • .value … 取得したinput要素の入力値（value）を参照する

この2つを組み合わせることで、ページ読み込み時点でのフォームの値を簡単に取り出せます。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/
4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="text" id="getValues" value="My Name is John Smith" />
<script>
   var originalvalue = document.getElementById("getValues").value;
   console.log("The value in the text box is ="+originalvalue);
</script>
</body>
</html>

コードの解説

スクリプト部分では、まずdocument.getElementById("getValues")によって対象のinput要素を取得し、続けて.valueでその入力値を変数originalvalueに格納しています。最後にconsole.log()を使って、文字列と連結した値をコンソールへ出力しています。

プログラムの実行方法

上記のコードを「index.html」などの任意のファイル名で保存してください。VS Codeを使用している場合は、エディタ上で保存したファイルを右クリックし、「Open with Live Server」を選択するとブラウザでページが開きます。Live Server拡張機能が未インストールの場合は、あらかじめVS Codeの拡張機能から追加しておきましょう。

実行結果

プログラムを実行すると、以下のような出力が得られます。

【初心者向け】HTMLフォームの値をJavaScriptで取得してコンソールに表示する方法

ブラウザの開発者ツール（WindowsならF12キー、MacならOption＋Command＋Iで開けます）の「Console」タブを確認すると、次のようにテキストボックスの値が表示されているはずです。

The value in the text box is =My Name is John Smith

まとめ

HTMLフォームの値を取得するには、document.getElementById()で対象要素を特定し、.valueプロパティを参照するのが基本です。この手法はユーザーが入力した内容の検証や、画面への動的な反映など、さまざまな場面で応用できます。ぜひ実際にコードを書いて、動作を確認してみてください。

  1. JavaScriptでhref属性の値を取得する方法|jQueryのattr()メソッド活用ガイド

    Web開発では、アンカータグ(<a>)に設定されたリンク先URL、つまりhref属性の値を取得したい場面がよくあります。この記事では、jQueryのattr()メソッドを使って、簡単にhrefの値を取得する方法を解説します。対象となるHTMLの例たとえば、以下のようなアンカータグがあったとします。<a class=demo title=get the url href=./mainPage.jsp/1245>href value at console</a>ここで必要なのは、テキスト部分ではなく、URLそのもの、すなわちhref属性の値「./mainPage

  2. JavaScriptでユーザーが入力したHTMLの値を取得・解析して表示する方法

    HTMLの入力フィールドから取得できる値は、常に文字列（string）として扱われます。そのため、取得した値を数値として計算などに利用したい場合は、parseInt()を使って文字列を整数に変換する必要があります。さらに、入力された値が数値として有効かどうかをisNaN()で判定することで、不正な入力へのエラー処理も行えます。実装例以下は、テキストボックスに入力された値を取得し、整数として解析してコンソールに表示するサンプルコードです。<!DOCTYPE html> <html lang="ja"> <head>