Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

JavaScript
実践編

トップページ
JavaScript実践編 - JSとAjaxを使った投稿フォームの構築(1) HTMLのおさらい

JSとAjaxを使った投稿フォームの構築(1) HTMLのおさらい

みなさまどうも。

これまで『Ajax』の基本的なとこを確認してきましたね。今回の記事では『Ajax』の実践編をやっていきましょう。『フォーム』ってやつを構築して『Ajax』を使いつつJSで制御してみます。

基本的な処理の流れは「送信ボタンがクリックされたらフォームに入力されてるデータを全て取得してさらにそれをJSON化してぶん投げて受け取った結果をコンソール画面に出力」って感じになります。

『フォーム』は以下のようなやつですね。以下はCSSとかを何も使っていない素の状態になり、他の呼び方としては『投稿フォーム』なんて言われる事もあります。

サンプルを見る

多分『フォーム』は誰でも1度は見たことあるのではないかと思うのですが、この子はブラウザで提供するウェブサービスの超重要事項と言っても過言ではない存在になります。

ウェブサービスっていうと内容は多岐にわたるので一言では言えないわけなのですが、多分世界に存在するウェブサービスの95%以上に何かしらの『投稿フォーム』的な動作が組み込まれているはずです。

そして当サイトをご覧の皆様は「プログラミングの技術をビジネス的な用途に使いたい」という方が大多数だと思いますがそんな熱い野望を持っている皆様にはぜひ『フォーム』の構成方法を覚えて頂きたい次第でございます。

『フォーム』を作れるようになるとネットショップ(ECサイト)や有料会員システムなどビジネスとして有用なサービスを作れるって事になり、可能性の幅が非常に広がりますのでまじでおすすめなわけです。そして『Ajax』な処理で一番王道っていうとやはり『フォーム』になりますのでそういう勉強面でもとってもグッドですね。

では最初にHTML要素の確認をしていきましょう。HTMLにおけるフォーム部品はHTML5でものすごーく数が増えたりしたのですが基本的に以下のフォーム部品をおさえておけば大体イケる感じになります。

<form>
	<h5>テキストボックス</h5>
	<div><input type="text" name="textbox"></div>

	<h5>パスワードなテキストボックス</h5>
	<div><input type="password" name="password"></div>

	<h5>テキストエリア</h5>
	<div><textarea name="textarea"></textarea></div>

	<h5>チェックボックス</h5>
	<div><label><input type="checkbox" name="checkbox" value="0">チェックボックス0</label><label><input type="checkbox" name="checkbox" value="1">チェックボックス1</label><label><input type="checkbox" name="checkbox" value="2">チェックボックス2</label></div>

	<h5>ラジオボタン</h5>
	<div><label><input type="radio" name="radio" value="0">ラジオボタン0</label><label><input type="radio" name="radio" value="1">ラジオボタン1</label><label><input type="radio" name="radio" value="2">ラジオボタン2</label></div>

	<h5>セレクトボックス</h5>
	<div><select name="selct">
		<option value="0">セレクトボックス0</option>
		<option value="1">セレクトボックス1</option>
		<option value="2">セレクトボックス2</option>
	</select></div>

	<h5>サブミットボタン</h5>
	<div><input type="submit" value="サブミットボタン"></div>

	<h5>button要素</h5>
	<div><button>button要素</button></div>
</form>

んで上記のサンプルだとform要素に各フォーム部品が内包されてる形になっていますよね。実はJSで制御するとなるとform要素があろうとなかろうともどうとでもなるのでそこは必須ではございません。

ただJSで制御する場合のちょっとおすすめな構築方法があるので著者的にはform要素の内部に書いたほうが処理が組みやすいかなーって感じです。これについては先の記事でサンプルを出しますので一緒に体験してみましょう。

そしてform要素にはいくつか属性を書くことができます。その中で『action属性』と『method属性』って子が居るのですがここは知っておいた方が良いのでちょいと確認してみましょう。記述するとなると以下のような感じになります。

<form action="./result.php" method="post">

</form>

この『action属性』の値についてなんですがこれは「『フォーム』に入力されたデータをどのファイルに送るか」という設定になります。

そして『method属性』には『HTTP通信』のメソッドを指定します。こちらの記事とかでやった『GET』とか『POST』とかを書く感じですね。

ちょいとサンプルを用意したのでこちらを開いてみて下さい。

上記のサンプルの構成は入力フォームが用意してある『index.html』と

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>送信テスト</title>
<body>

<form action="./result.html" method="get">
	<h5>テキストボックス</h5>
	<div><input type="text" name="textbox"></div>

	<h5>パスワードなテキストボックス</h5>
	<div><input type="password" name="password"></div>

	<h5>テキストエリア</h5>
	<div><textarea name="textarea"></textarea></div>

	<h5>チェックボックス</h5>
	<div><label><input type="checkbox" name="checkbox" value="0">チェックボックス0</label><label><input type="checkbox" name="checkbox" value="1">チェックボックス1</label><label><input type="checkbox" name="checkbox" value="2">チェックボックス2</label></div>

	<h5>ラジオボタン</h5>
	<div><label><input type="radio" name="radio" value="0">ラジオボタン0</label><label><input type="radio" name="radio" value="1">ラジオボタン1</label><label><input type="radio" name="radio" value="2">ラジオボタン2</label></div>

	<h5>セレクトボックス</h5>
	<div><select name="selct">
		<option value="0">セレクトボックス0</option>
		<option value="1">セレクトボックス1</option>
		<option value="2">セレクトボックス2</option>
	</select></div>

	<h5>サブミットボタン</h5>
	<div><input type="submit" value="サブミットボタン"></div>

	<h5>button要素</h5>
	<div><button>button要素</button></div>
</form>

</body>
</html>

その遷移先の『result.html』になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>遷移画面</title>
<body>
<p>遷移しました！</p>
</body>
</html>

そしてサンプルの中の『フォーム』な部品に適当に文字とかを入れてサブミットボタンかbutton要素をクリックしてみて下さい。

すると『https://wp-p.info/reps/js-practice/samples/18_02/index.html』から『https://wp-p.info/reps/js-practice/samples/18_02/result.html』に画面遷移したと思います。

さらに『result.html』に遷移した後のURLを確認してみると『https://wp-p.info/reps/js-practice/samples/18_02/result.html?textbox=test&password=&textarea=test&selct=0』みたいに『GETパラメーター』が追記されていますよね。

このように「form要素内部の送信ボタン的なものをクリックするとaction属性に書かれたファイルにページ遷移する」というのがデフォルトの動きになります。ページ遷移した時は『フォーム』に入力されたデータもちゃんとセットで飛ばしてくれていますのでそれを受け取ってサーバー側の言語(PHPとかRubyとか)で処理を行なったり〜って感じですね。

そしてなぜページ遷移がデフォルトの動作になっているのかというと『Ajax』やJavaScriptを使わなかった1990年代あたりになるとページ遷移させないと入力データが受け取れなかったんですね。

なのでデフォルトの動きはページ遷移になり、『action属性』と『method属性』の設定は必須項目になっていました。

んでここが重要なのですがJavaScriptや『Ajax』で制御する場合はこの2つの属性を書く事は必要項目ではございません。昔の時代のHTMLを知ってる方は間違いやすいとこなのでちょいとご注意になります。

もちろんaction属性の値をJSで拾ってデータの送信先を決める感じにすればaction属性は必須になるのですがこれは構成方法で色々と変えられる部分なのでやはり必須項目には該当しない感じになっちゃってますね。

というわけで少し短いですがここらで一旦記事を切ります。続いての記事ではJavaScriptを書いてみて色々とこにょこにょしていきましょう。

ではまたお会いしましょう。

この記事は桜舞が執筆致しました。