最終更新日：2022.08.24
公開日：2019.03.20

ワークショップ

ひと言掲示板を作る(2)

メッセージの入力フォームを作る

「ひと言掲示板」にメッセージを投稿するためのフォームについて、枠組みとなるHTMLを作成していきます。

この記事のポイント

フォームの枠組みになるHTMLを作成する
form要素と送信ボタンがあればデータは送信される

メッセージの入力フォームを作る

今回から「ひと言掲示板」のメッセージを投稿するためのフォームのHTMLから作っていきます。

「ひと言掲示板を作る」の概要については「ひと言掲示板を作る」をご覧ください。
デモはこちら

掲示板は誰かが書いたメッセージを読むことができますが、まずはとにかくメッセージを投稿するためのフォームを用意する必要があります。
これがないと始まりません。

メッセージの入力フォームは次のように3つのステップで作成していきますが、今回は1つ目のHTMLを作成します。

入力フォームのHTMLを作成 ← 今回
メッセージのデータを受け取る
ファイルへデータを書き込み

メッセージを入力するフォームはページの赤枠で囲っている部分です。
このエリアを作っていきましょう。

まずはHTMLの骨格を用意する必要がありますが、下記ページの「outline.php」からコードをそのままコピペなどして「index.php」というファイル名で保存してください。
outline.php – Github

CSSを含むためやや長いですが、内容は「<!DOCTYPE html>」から始まるごく普通のHTMLのみでPHPなどのコードはありません。
コードの下の方にある、コメントアウトされた「ここにメッセージの入力フォームを設置」のところに今回の入力フォームのHTMLが入ります。

index.php

<h1>ひと言掲示板</h1>
<!-- ここにメッセージの入力フォームを設置 -->
<hr>

ちなみに、すぐ下にある「ここに投稿されたメッセージを表示」には投稿されたメッセージが入りますが、こちらは後の章で作成します。

フォームのHTMLを作る

それでは今回の本題である入力フォームを作成していきましょう。
各HTML要素の役割についてはこの後すぐに解説しますが、まずは「index.php」を開いて、以下のコードを全て入力してください。

index.php

<form method="post">
	<div>
		<label for="view_name">表示名</label>
		<input id="view_name" type="text" name="view_name" value="">
	</div>
	<div>
		<label for="message">ひと言メッセージ</label>
		<textarea id="message" name="message"></textarea>
	</div>
	<input type="submit" name="btn_submit" value="書き込む">
</form>

全体を囲ったform要素はフォームに絶対不可欠な要素で、ブラウザはこの要素で囲った部分をフォームとして認識します。

index.php

<form method="post">
	<div>
		<label for="view_name">表示名</label>
		<input id="view_name" type="text" name="view_name" value="">
	</div>
	<div>
		<label for="message">ひと言メッセージ</label>
		<textarea id="message" name="message"></textarea>
	</div>
	<input type="submit" name="btn_submit" value="書き込む">
</form>

form要素の中にあるmethod属性はフォームのデータを送信する通信方式を指定します。
通信方式は「GET」や「POST」を使用することができますが、今回は「POST」による送信を行います。

form要素の中は3つの入力フォームが入った構成になります。

表示名を入力するエリア
ひと言メッセージを入力するエリア
フォームに入力されたデータを送信するボタン

「表示名」と「ひと言メッセージ」は投稿として次の箇所に表示されます。

表示名を入力するエリア

まずは表示名を入力するフォームから確認していきます。

index.php

<div>
	<label for="view_name">表示名</label>
	<input id="view_name" type="text" name="view_name" value="">
</div>

入力フォームに名前をつけるためのlabel要素、実際にデータを入力するinput要素、そしてこれらを1つにまとめるdiv要素から構成されます。

特に重要なのはinput要素です。
type属性で「1行テキスト」というフォームの種類を指定し、PHPで入力データを受け取ったときにデータを引用するための名前をname属性で指定しています。

フォームの種類はメールアドレス、パスワード、ファイルなど様々な入力形式に対応するために多くの種類が用意されています。
後で解説する送信ボタンもtype属性が「submit」になったinput要素です。

id属性の「view_name」はlabel要素のfor属性と結び付けるためのもので、この値が等しいとお互いが関連した要素になります。

ひと言メッセージを入力するエリア

続いて、メッセージを入力するためのフォームを解説します。
とはいえ、先ほどのinput要素がtextarea要素に置き換わっただけでほとんど同じです。

index.php

<div>
	<label for="message">ひと言メッセージ</label>
	<textarea id="message" name="message"></textarea>
</div>

textarea要素は複数行のテキストを入力するためのフォームです。
先ほどのinput要素は1行分の入力エリアなのでたくさんのテキストを入力したいときはやや不便ですが、こちらの要素であれば改行をしても快適に入力することができます。

textarea要素でもPHPで入力データを判別するためのname属性と、label要素に関連づけるためのid属性を同じように指定します。

フォームに入力されたデータを送信するボタン

最後に、入力された「表示名」と「ひと言メッセージ」を送信するためのボタンです。

index.php

<input type="submit" name="btn_submit" value="書き込む">

「表示名」と同じinput要素ですが、type属性に「submit」を指定すると送信ボタンになります。
新しくvalue属性が登場しましたが、ここで指定した名前がボタンのラベルとして表示されます。

このボタンを押すと、フォームに入力されている値は実際にデータとして送信されます。
あとはPHPで送信されたデータを受け取ってメッセージとして保存したり、保存したデータを引き出して掲示板として表示するようにしていきます。

以上でメッセージを入力するフォームのHTMLが完成しました。
次回はこのフォームから送信されたデータを受け取る機能を追加します。

今回作成したコード：Github

こちらの記事は役に立ちましたか？

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます！
運営の参考にさせていただきます。

メッセージの入力フォームを作る

この記事のポイント

目次

メッセージの入力フォームを作る

index.php

フォームのHTMLを作る

index.php

index.php

表示名を入力するエリア

index.php

ひと言メッセージを入力するエリア

index.php

フォームに入力されたデータを送信するボタン

index.php

こちらの記事は役に立ちましたか？

記事一覧