JavaScript

【JavaScript講座】フォーム部品を操作する

フォーム部品を操作する

前回は、要素を生成する方法について紹介しました。

要素を生成する

【JavaScript講座】要素を生成する

2019年9月26日

今回は、フォーム部品を操作する方法を紹介していきます。

それでは、見ていきましょう。



フォーム部品を操作する

それでは、フォーム部品を操作していきます。

テキスト入力欄

テキスト入力欄を操作してみます。

サンプルを書いていきます。

まずは、HTML から。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript サンプル</title>
</head>
<body>
  <input type="text" value="test">
  <script src="js/sample.js"></script>
</body>
</html>

続いて、Javascript です。

const text = document.querySelector('input[type="text"]');

text.value = "test2";

結果は以下の通りです。

フォーム部品を操作する

JavaScript からテキスト入力欄の値を test2 に変更しています。

次にテキストを全選択したい場合は、以下のようにしておきます。

const text = document.querySelector('input[type="text"]');

text.select();

結果は以下の通りです。

フォーム部品を操作する

ちなみにテキストを入力できなくすることもできます。

const text = document.querySelector('input[type="text"]');

text.disabled = true;

結果は以下の通りです。

フォーム部品を操作する

チェックボックス・ラジオボタン

チェックボックス・ラジオボタンを操作していきます。

サンプルを書きます（HTML）。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript サンプル</title>
</head>
<body>
  <input type="radio" name="性別" value="男">男
  <input type="radio" name="性別" value="女">女
  <script src="js/sample.js"></script>
</body>
</html>

続いて、JavaScript です。

document.querySelectorAll('input[type="radio"]')[1].checked = true;

配列と同じような感じで 0 から数えて、添字を使ってアクセスしていきます。

結果は以下の通りです。

フォーム部品を操作する

添字に 1 を指定しているので、2番目のラジオボタンがチェックされています。

ちなみにチェックボックスの場合は、type を checkbox とすれば、同じような処理が可能です。

ドロップダウンリスト

ドロップダウンリストを操作していきます。

サンプルを書いていきます（HTML）。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript サンプル</title>
</head>
<body>
  <select>
    <option selected>日本</option>
    <option>アメリカ</option>
    <option>中国</option>
  </select>
  <script src="js/sample.js"></script>
</body>
</html>

続いて、JavaScript です。

document.querySelectorAll('select > option')[1].selected = true;

結果は以下の通りです。

フォーム部品を操作する

今回も添字に 1 を指定したので、2番目のアメリカが選択されています。

最後に

いかがでしょうか。

このようにフォームの部品に関しても、JavaScript で操作できます。

コツコツやってきましょう。



シェア！

RECOMMENDこちらの記事も人気です。