はじめに
Webページでユーザーの入力を受け取るために、フォーム（<form>タグ）やその中にあるテキストボックス・チェックボックス・ラジオボタン等が存在します。今回はJavaScriptで、これらのフォーム各項目から「ユーザーが入力した値」や「選択された項目」の情報を取得する方法について記載していきたいと思います。
テキストボックス（<input type="text">）
テキストボックスは、1行の文字列を入力する際に使用される最も基本的なフォーム要素です。ユーザー名やタイトルなど、短いテキストの入力に適しています。「.value」 プロパティを使って、ユーザーが入力したテキストを取得します。
html
<form id="textForm">
<label>ユーザー名：
<input type="text" id="username" placeholder="ユーザー名を入力">
</label>
</form>
JavaScript
let username = document.getElementById("username").value;
console.log("ユーザー名:", username);
テキストエリア（<textarea>）
textarea は複数行のテキストを入力したいときに使います。お問い合わせフォームの自由記述欄やコメント欄などによく使われます。「.value」 プロパティを使って、ユーザーが入力したテキストを取得し、改行を含む文章でも取得できます。
html
<form id="textareaForm">
<label>コメント：
<textarea id="comment" placeholder="ご自由に入力ください"></textarea>
</label>
</form>
JavaScript
let comment = document.getElementById("comment").value;
console.log("コメント:", comment);
パスワード入力欄
type="password" を指定することで、入力された文字が画面上では「●」などに隠されます。ログイン画面などで使われ、セキュリティに配慮した入力欄です。「.value」 プロパティを使って、ユーザーが入力したテキストを取得します。表示は伏せられますが、取得時は平文になります。セキュリティ対策も重要です。
html
<form id="passwordForm">
<label>パスワード：
<input type="password" id="password">
</label>
</form>
JavaScript
let password = document.getElementById("password").value;
console.log("パスワード:", password);
メールアドレス入力（email）
メールアドレスを入力させるフォームで使用します。HTMLのtype="email"を使うことで、ブラウザが形式的な入力チェックを自動で行ってくれるメリットがあります。「.value」 プロパティを使って、ユーザーが入力したテキストを取得します。
html
<form id="emailForm">
<label>メールアドレス：
<input type="email" id="email" placeholder="example@example.com">
</label>
</form>
JavaScript
let email = document.getElementById("email").value;
console.log("メールアドレス:", email);
チェックボックス（checkbox）
複数選択が可能な選択肢に使われます。チェックされているかどうかを .checked プロパティで判定します。真（true）か偽（false）の値でチェック状態を取得できます。
html
<label>
<input type="checkbox" id="subscribe"> メール購読する
</label>
JavaScript
const isSubscribed = document.getElementById("subscribe").checked;
console.log("購読:", isSubscribed); // true or false
ラジオボタン（radio）
複数の選択肢から一つだけ選択させたい場合に使います。name属性でグループ化します。
html
<form id="radioForm">
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
</form>
JavaScript
const gender = document.querySelector('input[name="gender"]:checked')?.value;
console.log("性別:", gender);
セレクトボックス
選択肢から一つを選ぶ形式。
html
<label>都道府県:
<select id="pref">
<option value="tokyo">東京</option>
<option value="osaka">大阪</option>
<option value="kyoto">京都</option>
</select>
</label>
JavaScript
const pref = document.getElementById("pref").value;
console.log("都道府県:", pref);
まとめ
| form | タグ | 取得方法 | 説明 |
|---|---|---|---|
| text | <input type="text"> | .value | 単一行テキスト |
| textarea | <textarea> | .value | 複数行テキスト |
| password | <input type=”password”> | .value | 非表示のテキスト |
<input type="email"> | .value | メールアドレス形式に制限 | |
| checkbox | <input type=”checkbox”> | .checked | true / false |
| radio | <input type=”radio”> | querySelector(...).value | 一つの選択肢のみ取得 |
| select | <select> | .value | プルダウン選択 |
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント