現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

フォーム

【JavaScript入門】value・defaultValue・textの使い方|入力値・初期値・選択肢文字列を扱う方法

投稿日:2019年6月9日 更新日:

JavaScriptのvalue・defaultValue・textとは?入力値と初期値、選択肢の文字列を扱う方法

valuedefaultValuetext は、フォーム要素の文字列を参照/設定するためのプロパティです。
入力欄の値、テキストエリアの初期値、セレクトメニューの項目名などを扱う際に必須の知識です。



valueプロパティとは?

value は、入力欄(input・textarea・select など)に現在入力されている値を参照/設定するプロパティです。

使用例:入力チェック

// エレメント名 mail が空の場合、警告を表示
if (document.enqForm1.mail.value === “”) {
  alert(“メールアドレスを入力してください”);
}

→ 入力チェックで最もよく使われるプロパティ。



defaultValueプロパティとは?

defaultValue は、テキストエリア(<textarea>)に
ページ読み込み時に設定されていた初期文字列 を返します。

ユーザーが入力内容を変更しても、defaultValue は変わりません。

使用例:初期値の確認

// textarea の初期文字列を表示
alert(document.enqForm1.comment.defaultValue);

textプロパティとは?

text は、セレクトメニュー(<select>)内の
option の表示文字列 を参照/設定するプロパティです。

項目は options[番号] で参照します。番号は 0 から始まります。

使用例:選択肢の文字列を変更

// セレクトメニュー enqMenu の1番目の項目の文字列を変更
document.enqForm1.enqMenu.options[0].text = “quality”;

→ 動的に選択肢の内容を変更したいときに便利。



実際のフォーム例

<form name=”enqForm1″>
  メール:<input type=”text” name=”mail”><br>

  コメント:<textarea name=”comment”>初期コメントです</textarea><br>

  選択メニュー:
  <select name=”enqMenu”>
    <option>選択肢1</option>
    <option>選択肢2</option>
  </select>

  <input type=”button” value=”メール値確認” onclick=”alert(document.enqForm1.mail.value)”>
  <input type=”button” value=”コメント初期値確認” onclick=”alert(document.enqForm1.comment.defaultValue)”>
  <input type=”button” value=”選択肢変更” onclick=”document.enqForm1.enqMenu.options[0].text=’quality'”>
</form>

まとめ

  • value:入力欄の現在の値を参照/設定
  • defaultValue:textarea の初期文字列を参照
  • text:セレクトメニューの option の表示文字列を参照/設定
  • 入力チェック・初期値確認・動的な選択肢変更などに必須

関連リンク

-フォーム
-

執筆者:

関連記事

【JavaScript入門】form.elementsの使い方|エレメント参照・種類判別・lengthの基本を解説

JavaScriptのelementsとは?フォーム内のエレメント参照方法を初心者向けに解説 form.elements は、フォーム内に含まれるすべてのエレメント(input・select・text …

【JavaScript入門】defaultChecked・defaultSelectedとは?フォームの初期状態を取得する方法を解説

JavaScriptのdefaultChecked・defaultSelectedとは?初期状態を取得する方法を解説 defaultChecked と defaultSelected は、フォーム要素 …

【JavaScript入門】form.reset()の使い方|フォーム内容を初期状態に戻す方法をわかりやすく解説

JavaScriptのform.reset()とは?フォーム内容を一瞬で初期化する方法を解説 form.reset() は、フォーム内のすべての入力内容を初期状態に戻すためのメソッドです。 ボタン操作 …

【JavaScript入門】onresetの使い方|フォームリセット時に確認ダイアログを表示する方法

JavaScriptのonresetとは?フォームリセット時に処理を実行する方法を解説 onreset は、フォームがリセットされたときに発生するイベントです。 リセットボタンが押されたとき、または …

【JavaScript入門】checked・selectedの使い方|チェック状態・選択状態を取得・設定する方法

JavaScriptのchecked・selectedとは?チェック状態と選択状態を取得・設定する方法 checked と selected は、フォーム内のチェックボックス・ラジオボタン・セレクトメ …