「コーディング作業の中でフォームを作るのが苦手に感じている」
「クライアントや上司から色んな種類の入力項目を求められて毎回大変」
「ReactやVueになってから突然inputタグにvalueが登場して意味が分かっていない」
本日はそんな方に向けてフォームのコーディングを一気に解説していきます。
Webサイトやアプリにフォームを組み込む時に登場しがちな項目を紹介しますので、この記事を読んでもらえれば安心できると思います。
また動画もあるので必要に応じて使ってください。
inputタグを使ったテキスト入力の作り方
まずは一番メジャーなテキストの入力項目についてです。
氏名、電話番号、メールアドレスなど短い文章を入力してもらうときに使います。
<form action="" id="form">
<input type="text" id="inputText" value="" />
<p id="inputResult"></p>
</form>
短いテキストを入力できる欄が出来ました、横幅などはCSSで調整できますのでデザインカンプを確認するようにしましょう。
初学者向けの教材やYoutube動画では紹介されないのですが、inputタグにはvalue属性があり文字などを設定することができます。
<form action="" id="form">
<!-- valueに値を追加 -->
<input type="text" id="inputText" value="テキスト" />
<p id="inputResult"></p>
</form>
valueに設定した「テキスト」という文字が入力欄に入力されている状態で画面が表示されました。
このようにvalueに対して値を管理するのがinputタグの役割です。
実際のフォームのコーディングではvalueに値をそのまま記載することは無いのですが、valueの役割を理解していないと後々困るはずなので共有しました。
特にReactやVueなどモダンJSにも手を出す予定の方は必須の内容です。
ちなみにvalueの値はJavaScript側でも設定できます。
HTML側のvalue属性は空文字に戻しておきます。
<form action="" id="form">
<!-- valueに値を空文字に戻す -->
<input type="text" id="inputText" value="" />
<p id="inputResult"></p>
</form>const inputText = document.querySelector("#inputText");
const inputResult = document.querySelector("#inputResult");
inputText.value = "こんにちは";
JavaScriptでも同じ名前でvalueというプロパティがあり、そちらに文字などの値を設定しておくとブラウザでは入力欄に値が入って表示されます。
またJavaScriptを使うと逆にユーザーが入力した内容を取得することができます。
const inputText = document.querySelector("#inputText");
const inputResult = document.querySelector("#inputResult");
inputText.addEventListener("change", (e) => {
const value = e.target.value;
inputResult.innerHTML = value;
});ブラウザ上から入力欄に「田中太郎」と入力してから、カーソルを入力欄から外すと同じ値が表示されます。
ユーザーが入力した値は「e.target.value」とすれば取得できます。
今回はaddEventListenerのchangeイベントを使って、「ユーザーが入力した値を、カーソルが入力欄から外れたら欄外のpタグに出力する」ということをやってみました。
最近のフォームではこのようにユーザーが入力した内容を画面に出力する仕様がトレンドになっているので、JavaScriptを使った値の操作は覚えておきましょう。
textareaを使った長文の入力方法
inputの他にtextareaを使っても文章の入力欄を作ることができます。
inputと違ってtextareaを使うと「改行するような長文」を扱うことができます。
<form action="" id="form">
<textarea name="" id="textArea" cols="30" rows="10"></textarea>
<p id="textAreaResult"></p>
</form>
相談内容、志望動機、自由記入欄などにtextareaは使われます。
textareaもinputと同様にユーザーの入力内容を取得することができます。
const textArea = document.querySelector("#textArea");
const textAreaResult = document.querySelector("#textAreaResult");
textArea.addEventListener("change", (e) => {
const value = e.target.value;
textAreaResult.innerHTML = value;
});ブラウザ上から長文のテキストを入力してみましょう。
inputと同様に値の取得ができてpタグに出力ができていますが、本来であれば改行も考慮したいですよね。
改行を考慮した値の取得は以下のように修正します。
const textArea = document.querySelector("#textArea");
const textAreaResult = document.querySelector("#textAreaResult");
textArea.addEventListener("change", (e) => {
const value = e.target.value;
// ここを修正
textAreaResult.innerHTML = value.split("\n").join("<br/>");
});
改行が上手く取り入れられていますね、splitとjoinという関数を使って実現しました。
split関数は引数に入れたものを起点にテキストを分割してくれるものです。
今回は「\n」としていますがプログラムの世界では「改行」を意味する記号です。
またjoin関数はバラバラになっているデータを合体させるものです。
split関数で改行を起点にテキストを分割してあったので、それぞれを合体させたわけです。
inputタグを使ってチェックボックスを作る方法
inputタグに戻りますが、inputタグではtype属性というものがありtype属性に指定した内容で色んな入力項目を作ることができます。
一例としてチェックボックスを作るには以下のようにします。
<form action="" id="form">
<label for="">
<input type="checkbox" id="checkBox" />
</label>
<p id="checkBoxResult"></p>
</form>
小さい正方形が表示されましたね、こちらクリックするとチェックを入れることができます。
inputのtype属性には「checkbox」を入れるとチェックボックスを作ってくれます。
inputをlabelで囲っている点については「項目名」を入れるためです。
<form action="" id="form">
<label for="">
<input type="checkbox" id="checkBox" />
規約の同意する
</label>
<p id="checkBoxResult"></p>
</form>
labelタグ単体というよりHTMLの全体の構成として覚えてもらう方が良いかもしれませんね。
さらにチェックボックスについてもJavaScriptで値を取得してみます。
const checkBox = document.querySelector("#checkBox");
const checkBoxResult = document.querySelector("#checkBoxResult");
checkBox.addEventListener("change", (e) => {
const value = e.target.checked;
checkBoxResult.innerHTML = value;
});ブラウザをリロードしてチェックボックスにチェックを入れてみます。
これまでと違って「true」となりました。
同じinputでもチェックボックスについては真偽値で値を取得するようになります。
inputタグを使ってラジオボタンを作る方法
続いてラジオボタンを作っていきます。
性別や職業など、複数回答できない選択肢の項目に使われます。
<form action="" id="form">
<label for="">
<input type="radio" name="radio" value="AAA" />
AAA
</label>
<label for="">
<input type="radio" name="radio" value="BBB" />
BBB
</label>
<label for="">
<input type="radio" name="radio" value="CCC" />
CCC
</label>
<p id="inputRadioResult"></p>
</form>チェックボックス同様にlabelでinputを囲うような構成になります。
inputタグのtype属性は「radio」を使い、value属性に選択肢と同じ値を入れておくことがポイントです。
ラジオボタンについてもJavaScriptで値を取得してみます。
const form = document.querySelector("#form");
const inputRadioResult = document.querySelector("#inputRadioResult");
form.addEventListener("change", (e) => {
const value = form.radio.value;
inputRadioResult.innerHTML = value;
});JavaScriptでのポイントはformタグの要素を取得することです。
これまでのテキスト入力とチェックボックスは単体なので、本体の要素を取得していれば良かったです。
ラジオボタンについては複数で構成される質問項目なので、親要素であるformタグを取得する必要があるのです。
またvalue属性の取得については「radio.value」とすると取得できます。
以上のように選択した値がブラウザに出力されるようになっています。
selectタグを使ってプルダウンを作る方法
ラジオボタンのように複数選択肢を設定するものにプルダウンもあります。
役割はラジオボタンと同じですが、主に都道府県や誕生日など選択肢が多いものにプルダウンは使われます。
プルダウンのHTMLでの作り方はselectタグとoptionタグを使います。
<form action="" id="form">
<select name="" id="select">
<option value="">選択してください</option>
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="CCC">CCC</option>
</select>
<p id="selectResult"></p>
</form>
selectとoptionを使うことでプルダウンを簡単に作ることができました。
クリックすると選択肢が表示されます。
selectはプルダウン全体を担う親要素になっていて、optionが選択肢になります。
selectやoptionなど見慣れないタグがありますが、構成としてはラジオボタンと同じような作りになります。
optionのvalue属性には選択肢の値を入れておくことになります。
またプルダウンの選択肢の一番目に「選択してください」など説明文を入れることもできて、その場合はvalueを空文字にしておけば大丈夫です。
それではJavaScriptで値を取得してみます。
const select = document.querySelector("#select");
const selectResult = document.querySelector("#selectResult");
select.addEventListener("change", (e) => {
const value = select.value;
selectResult.innerHTML = value;
});プルダウンについてはselectタグの要素を取得することになります。
またoptionのvalueについては「value」とすれば取得できます。
ブラウザをリロードしてプルダウンで選択してみます。
選択肢の名前が表示されるようになりました。
加えてサイト制作やアプリ開発でよくある事例として「プルダウンの選択肢をカテゴリーごとに分けたい」という要件もあります。
主に選択肢が多い場合にユーザーの操作性を向上させることが目的です。
今回は都道府県を例にした場合、プルダウンの選択肢をカテゴリーごとに分ける場合は以下のようにします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<form action="">
<label for="">
<select name="" id="select">
<option value="">選択してください</option>
<optgroup label="関東">
<option value="東京">東京</option>
<option value="埼玉">埼玉</option>
<option value="千葉">千葉</option>
</optgroup>
<optgroup label="関西">
<option value="大阪">大阪</option>
<option value="京都">京都</option>
<option value="兵庫">兵庫</option>
</optgroup>
</select>
</label>
</form>
</div>
</body>
</html>selectタグの中ではoptionタグの他にoptgroupタグというものが使えて、optgroupの中が特定のカテゴリーとしてoptionタグを扱うことになります。
またoptgroupタグのlabel属性にはカテゴリー名を指定します。
optgroupタグのlabel属性で指定したカテゴリー名は画面上ではクリックできないようになっていて、実際にクリックできるのはoptionタグで作った選択肢のみです。
ちなみに上図にあるような「選択してください」という部分はoptioinタグで作るのですが、optgroupの外に設置することになりますので注意してください。
inputタグでファイル添付を作る方法
最後にファイル添付の作り方を紹介します。
画像ファイルやPDFファイルを添付させるようなフォームはよくありますが、こちらもinputを使うと簡単に作れます。
<form action="" id="form">
<input type="file" id="inputFile" />
<p id="inputFileResult"></p>
</form>inputのtype属性を「file」とするとファイル添付のボタンが表示されます。
ボタンをクリックすると自分のパソコンからファイルを選択することができます。
まずは選択したファイル名をJavaScriptで取得できるようにしてみます。
const inputFile = document.querySelector("#inputFile");
const inputFileResult = document.querySelector("#inputFileResult");
inputFile.addEventListener("change", (e) => {
const value = e.target.files[0];
inputFileResult.innerHTML = value.name;
});これまでのテキスト入力やラジオボタンと違うのが、取得される値が配列になっていることです。
さらに配列の中に選択したファイルがオブジェクトとして格納されています。
「e.target.files」をコンソールで確認してみたいと思います。
const inputFile = document.querySelector("#inputFile");
const inputFileResult = document.querySelector("#inputFileResult");
inputFile.addEventListener("change", (e) => {
console.log(e.target.files);
});コードを上記のように変更して、ブラウザ上でファイル添付を実行してみます。
ブラウザ上でファイル添付をしてからコンソールを開いてみると以下のように表示されます。
「FileList」という配列になっていて、こちらの中身は以下のようになっています。
ファイル選択は1つしか行わないのでインデックス番号「0」のオブジェクトが格納されているのが分かります。
オブジェクトの中身は色々あるのですが、「name」というプロパティにファイル名が設定されています。
そのためコードを元に戻すのですが、「e.target.files[0]」というオブジェクトの「name」を指定するとファイル名が取得できるわけなんです。
const inputFile = document.querySelector("#inputFile");
const inputFileResult = document.querySelector("#inputFileResult");
inputFile.addEventListener("change", (e) => {
const value = e.target.files[0];
inputFileResult.innerHTML = value.name;
});
出力されるファイル名はご自身が選択されたものによって変わりますが、ファイル名を表示することができています。
画像のプレビューを表示する方法
ちなみに画像ファイルの場合にプレビューを表示することもできます。
画像ファイルでしか使えない方法ですが、それなりに登場するケースなので解説しておきます。
HTMLではプレビューを出力するためにimgタグを用意しておきます。
<form action="" id="form">
<input type="file" id="inputFile" />
<p id="inputFileResult"></p>
<!--ここを追加-->
<p><img id="inputFileImage" src="" alt="" /></p>
</form>またimgタグはJavaScriptで要素の取得を行なっておきます。
const inputFile = document.querySelector("#inputFile");
const inputFileResult = document.querySelector("#inputFileResult");
// ここを追加
const inputFileImage = document.querySelector("#inputFileImage");
inputFile.addEventListener("change", (e) => {
const value = e.target.files[0];
inputFileResult.innerHTML = value.name;
});プレビュー表示のJavaScriptの処理についてはFileReaderという組み込みオブジェクトを使います。
const inputFile = document.querySelector("#inputFile");
const inputFileResult = document.querySelector("#inputFileResult");
const inputFileImage = document.querySelector("#inputFileImage");
inputFile.addEventListener("change", (e) => {
const value = e.target.files[0];
inputFileResult.innerHTML = value.name;
// ここを追加
const reader = new FileReader();
reader.addEventListener("load", () => {
inputFileImage.src = reader.result;
});
reader.readAsDataURL(value);
});FileReaderをインスタンス化すると自分のコード上で画像ファイルを読み込んでくれます。
またインスタンス化したFileReaderにaddEventListenerのloadイベントで、画像ファイルの読み込み結果を取得できます。
最後にreadAsDataURLという関数がありますが、こちらの引数に元のファイルオブジェクトを入れます。
inputタグをクリックして選択したファイルと、FileReaderで読み込んだファイルが同一であることを紐付ける必要があるからです。
ブラウザをリロードしてファイル選択のボタンから画像ファイルを選択すると画像が表示されるはずです。
ちなみに画像ファイルは拡張子が「png」「jpg」「jpeg」となっているファイルのことですので注意してください。