フォームの操作

Webページに入力フォームがある場合、そのフォームの各要素の内容を変更することができます。
このページでは、その手順を解説します。

テキスト入力系／selectの場合

テキスト入力系の要素(<input type="text"…>やtextarea要素)に入力されている文字列や、select要素で選択されている項目を、プログラムから変更することができます。
それには、「○○の値を○○にする」のブロックを使います。

「○○の値」のパラメータで、変更対象の入力要素を指定します。
「○○にする」のパラメータで、変更後の値を指定します。
テキスト入力系の要素では、変更後の値を直接に指定します。
また、select要素の場合は、変更後の項目(option要素)のvalue属性の値を指定します。

checkbox／radiobuttonの場合

checkbox(<input type="checkbox"…>)や、radiobutton(<input type="radio"…>)のチェック状態を、プログラムから変更することができます。
それには「○○のチェック状態を○○にする」のブロックを使います。

最初の「○○」のパラメータで、変更対象のcheckbox／radiobuttonを指定します。
最後の「○○にする」をクリックしてチェックをオンにすると、対象のcheckbox／radiobuttonのチェックがオンになります。

事例

以下の事例は、フォームの入力要素の値を変更する例です。
この事例はこちらからダウンロードすることができます。
また、このプログラムで開くHTMLのファイルは、こちらからダウンロードすることができます。
HTMLのファイルは、Tsumickyのインストール先フォルダの中に「html」というフォルダを作って、その中に入れます。

プログラムを起動した時点では、以下のフォームが表示されます。

プログラムを起動した直後の表示

radiobutton以外のフォーム上の各要素には、以下の表のIDをつけてあります。
また、はい／いいえのradiobuttonには、それぞれyes／noのIDをつけてあります。
これらのIDを元にして、プログラムで各要素の値を書き換えます。

要素	ID
text	txt
textarea	txtarea
checkbox	chk
select	sel

プログラムを起動して3秒経過すると、以下のように表示が変わります。

プログラムを起動して3秒後の表示

« 前のページ：要素の追加と削除