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

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

Form(フォーム操作)

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

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

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

  • 紙の本でじっくり読み込みたい
  • 体系的にまとまった教材で学びたい
  • ネット記事だけだと情報が断片的に感じる

JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。

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

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。

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

  • JavaScriptの基本文法をやさしく理解できる
  • 手を動かしながら学べるため、挫折しにくい
  • 「まず動くものを作ってみたい」が実現できる

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

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

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。

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

  • JavaScriptの基礎を体系的に学び直せる
  • 初心者がつまずきやすい部分を重点的に理解できる
  • 実務で使えるレベルの基礎力を身につけられる

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

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

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

  • エラーの原因が分からず、調べても解決できない
  • 学習の順番に自信が持てない
  • モチベーションが続かず、途中で止まってしまう
  • 実務レベルのコードレビューを受ける機会がない

こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。

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

  • あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
  • 独学で詰まりやすいポイントを事前に教えてくれる
  • 学習方法の改善点をプロがアドバイスしてくれる
  • エンジニア転職を考えている場合、キャリア相談も可能

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。

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



まとめ

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

関連記事

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

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

【JavaScript入門】form.actionの使い方|フォーム送信先URLを動的に変更する方法を初心者向けに解説

JavaScriptのform.actionとは?フォーム送信先URLを動的に切り替える方法を解説 form.action は、フォームが送信されるURL(action属性)を参照・設定するためのプロ …

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

JavaScriptのselectedIndexとは?セレクトメニューで選択された項目番号を取得する方法 selectedIndex は、セレクトメニュー(<select>)で現在選択され …

【JavaScript入門】Formオブジェクトの使い方|forms配列・フォーム名の参照方法をわかりやすく解説

JavaScriptのFormオブジェクトとは?forms配列・フォーム名の参照方法を初心者向けに解説 JavaScript では、Form オブジェクトを使ってフォームを参照・操作できます。 フォー …

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

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

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

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

-Form(フォーム操作)

執筆者: