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

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

Form(フォーム操作)

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

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

この記事で分かること

  • value の役割と使い方
  • defaultValue の初期値の仕組み
  • text を使った option 文字列の操作
  • 実際のフォーム例での動作確認

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



value とは?(現在の値)

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

使用例:入力チェック


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

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

defaultValue とは?(初期値)

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

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

使用例:初期値の確認


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



text とは?(option の表示文字列)

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

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

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


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

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

実際のフォーム例


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

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

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

  <br><br>

  <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>

JavaScript 初心者におすすめの学習書籍

書籍で学ぶのが向いている人

  • 紙の本で体系的に学びたい
  • ネット記事だけだと情報が断片的に感じる
  • フォーム操作や DOM の基礎を順序立てて理解したい

valuedefaultValuetext のような
「入力値・初期値・表示文字列」を扱う処理は、JavaScript の基礎(DOM・フォーム要素・イベント)と密接に関係しています。
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。

いちばんやさしい JavaScript の教本

写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
入力欄の値の扱い方、textarea の初期値、セレクトメニューの文字列など、
value / defaultValue / text の理解に直結する基礎が丁寧に解説されています。

この本で解決できること:

  • フォーム要素の文字列操作を視覚的に理解できる
  • DOM を使った値の取得・変更の基礎が分かる
  • 実際に動くサンプルで学べるため挫折しにくい

確かな力が身につく JavaScript「超」入門

JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
入力値の扱い、初期値の仕組み、option の文字列変更など、
実務でも役立つフォーム操作の基礎力がしっかり身につきます。

この本で解決できること:

  • 入力値・初期値・表示文字列の違いを体系的に理解できる
  • DOM を使ったフォーム制御の基礎が身につく
  • 現代的な JavaScript の書き方をまとめて習得

動画で理解を深めたい方へ(Udemy講座)

valuedefaultValuetext のような
「文字列の取得・設定」は、実際の動きを動画で見ると理解が一気に深まります。
Udemy ではフォーム操作・DOM・イベント処理を丁寧に解説した講座が多数あります。

初心者のためのJavaScript 完全入門

JavaScriptの基礎を体系的に学べる人気講座です。
入力欄の値の扱い、textarea の初期値、option の文字列変更など、
value 系プロパティの理解に役立つ内容がしっかり扱われています。

この講座で解決できること:

  • フォーム操作の流れを視覚的に理解できる
  • value / defaultValue / text の扱いが分かる
  • 初心者がつまずきやすいポイントを丁寧に解説

初心者のためのJavaScript 完全入門(Udemy)

超JavaScript 完全ガイド 2026

基礎から応用まで幅広く学べる講座で、フォーム制御や DOM 操作を深く理解したい方に最適です。
value / defaultValue / text を使った実務的な UI 制御も学べます。

この講座で解決できること:

  • 入力値・初期値・表示文字列の取得・変更など実務的なフォーム制御が身につく
  • DOM とイベントを組み合わせた UI 操作を理解できる
  • 現代的な JavaScript の書き方をまとめて習得

超JavaScript 完全ガイド 2026(Udemy)

体系的に学びたい方へ(スクールという選択肢)

独学の限界を感じやすいポイント

  • 入力値・初期値・表示文字列の扱いが曖昧なまま進んでしまう
  • DOM 操作の基礎が理解しきれない
  • イベント処理とフォーム制御の関係がつかみにくい
  • コードレビューを受ける機会がない

スクールでは、プロの講師が学習ロードマップを作成し、
value / defaultValue / text を含むフォーム操作の基礎を
丁寧にサポートしてくれます。

無料相談で得られるメリット

  • あなたのレベルに合わせた学習計画を作成
  • 独学でつまずきやすいフォーム操作のポイントを事前に把握
  • 学習方法の改善点をプロがアドバイス
  • エンジニア転職を視野に入れたキャリア相談も可能

JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。

DMM WEBCAMP 学習コース(無料相談はこちら)



valuedefaultValuetext に関するよくある質問(FAQ)

Q1

valuedefaultValue の違いは?

A

value は現在の値、defaultValue は初期値を返します。

Q2

text プロパティは何に使う?

A

セレクトメニューの option の表示文字列を変更したいときに使います。

Q3

defaultValueinput でも使える?

A

はい。input にも初期値が設定されていれば defaultValue を参照できます。

Q4

textvalue の違いは?

A

textoption の表示文字列、valueoption の値(value 属性)を指します。



まとめ

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



関連記事

【JavaScript入門】selectedIndexの使い方|セレクトメニューで選択された項目番号を取得する方法

この記事で分かること selectedIndex の基本的な役割 選択されている項目番号の取得方法 番号(インデックス)の仕組み 実際のフォーム例での動作確認 selectedIndex は、セレクト …

【JavaScript入門】click・blur・focus・selectの使い方|入力欄の操作を自動化する方法

この記事で分かること click() の役割と使い方 blur() のフォーカス解除処理 focus() のフォーカス移動処理 select() の文字列選択処理 フォーム操作を自動化する実用的な方法 …

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

この記事で分かること defaultChecked の役割と使い方 defaultSelected の役割と使い方 初期状態と現在の状態の違い 実際のフォーム例での初期状態確認方法 defaultCh …

【JavaScript入門】form.actionで送信先を動的に変更する方法|ラジオボタン・条件分岐の実践サンプル付き

この記事で分かること form.action を動的に変更する仕組み ラジオボタン・セレクトボックスで送信先を切り替える方法 onsubmit と組み合わせた実務的なフォーム制御 条件分岐による送信先 …

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

この記事で分かること checked の基本的な役割 selected の基本的な役割 チェック状態・選択状態の取得方法 JavaScript で状態を変更する方法 checked と selecte …

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。

レンタルサーバー エックスサーバー

-Form(フォーム操作)

執筆者: