この記事で分かること
valueの役割と使い方defaultValueの初期値の仕組みtextを使ったoption文字列の操作- 実際のフォーム例での動作確認
value・defaultValue・text は、フォーム要素の文字列を参照/設定するためのプロパティです。
入力欄の値、テキストエリアの初期値、セレクトメニューの項目名などを扱う際に必須の知識です。
value とは?(現在の値)
value は、入力欄(input・textarea・select など)に
現在入力されている値 を参照/設定するプロパティです。
使用例:入力チェック
// エレメント名 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 の基礎を順序立てて理解したい
value・defaultValue・text のような
「入力値・初期値・表示文字列」を扱う処理は、JavaScript の基礎(DOM・フォーム要素・イベント)と密接に関係しています。
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
入力欄の値の扱い方、textarea の初期値、セレクトメニューの文字列など、
value / defaultValue / text の理解に直結する基礎が丁寧に解説されています。
この本で解決できること:
- フォーム要素の文字列操作を視覚的に理解できる
- DOM を使った値の取得・変更の基礎が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
入力値の扱い、初期値の仕組み、option の文字列変更など、
実務でも役立つフォーム操作の基礎力がしっかり身につきます。
この本で解決できること:
- 入力値・初期値・表示文字列の違いを体系的に理解できる
- DOM を使ったフォーム制御の基礎が身につく
- 現代的な JavaScript の書き方をまとめて習得
動画で理解を深めたい方へ(Udemy講座)
value・defaultValue・text のような
「文字列の取得・設定」は、実際の動きを動画で見ると理解が一気に深まります。
Udemy ではフォーム操作・DOM・イベント処理を丁寧に解説した講座が多数あります。
初心者のためのJavaScript 完全入門
JavaScriptの基礎を体系的に学べる人気講座です。
入力欄の値の扱い、textarea の初期値、option の文字列変更など、
value 系プロパティの理解に役立つ内容がしっかり扱われています。
この講座で解決できること:
- フォーム操作の流れを視覚的に理解できる
value/defaultValue/textの扱いが分かる- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門(Udemy)
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、フォーム制御や DOM 操作を深く理解したい方に最適です。
value / defaultValue / text を使った実務的な UI 制御も学べます。
この講座で解決できること:
- 入力値・初期値・表示文字列の取得・変更など実務的なフォーム制御が身につく
- DOM とイベントを組み合わせた UI 操作を理解できる
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ(スクールという選択肢)
独学の限界を感じやすいポイント
- 入力値・初期値・表示文字列の扱いが曖昧なまま進んでしまう
- DOM 操作の基礎が理解しきれない
- イベント処理とフォーム制御の関係がつかみにくい
- コードレビューを受ける機会がない
スクールでは、プロの講師が学習ロードマップを作成し、
value / defaultValue / text を含むフォーム操作の基礎を
丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすいフォーム操作のポイントを事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
value・defaultValue・text に関するよくある質問(FAQ)
value と defaultValue の違いは?
value は現在の値、defaultValue は初期値を返します。
text プロパティは何に使う?
セレクトメニューの option の表示文字列を変更したいときに使います。
defaultValue は input でも使える?
はい。input にも初期値が設定されていれば defaultValue を参照できます。
text と value の違いは?
text は option の表示文字列、value は option の値(value 属性)を指します。
まとめ
value:入力欄の現在の値を参照/設定defaultValue:textareaの初期文字列を参照text:セレクトメニューのoptionの表示文字列を参照/設定- 入力チェック・初期値確認・動的な選択肢変更などに必須