コンテンツにスキップ

JavaScript：フォームの中身を操作しよう

フォームのデータを扱うには？

JavaScriptからフォームのデータを扱うには以下のようにします。

フォームに id をつけておく
document.getElementById() でそのフォームを取り出す
value で中身を操作する。

関連項目

フォームの中身を取り出す

<input type="text" id="form1">
<script>
// form1というidのフォームからデータを取り出す
let form1 = document.getElementById("form1");
alert(form1.value);
</script>

フォームにデータを入れる

<input type="text" id="form1">
<script>
// form1というidのフォームにデータを入れる。
let form1 = document.getElementById("form1");
form1.value = "ここに入力してください。";
</script>

まとめ

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>フォームの中身を操作しよう</title>
 <script>
 function check() {
 let form1 = document.getElementById("form1");
 alert(form1.value + "さん、こんにちは");
 }
 </script>
</head>
<body>
 <input type="text" id="form1">
 <button onclick="check()">送信</button>
</body>
</html>