<form>タグ

PHPの勉強を始めました。
PHPはサーバーサイドの言語ですが、クライアント側で入力したデータをサーバーに送る時にformタグが介されます。
そのため、PHPを勉強する上でformタグは前提知識と言えます。
formタグについてちょっと勉強してみたので、備忘録のため記事にしてみました!

<form>タグの役割

お客さんが入力した情報をサーバーへ送るのがformタグの仕事です。
皆さんもご経験あると思いますが、Amazonや楽天などのECサイトで物を買う時に自分の名前や電話番号、メールアドレス、それから送付先の住所などを入力枠に入力しますよね。
あの入力枠はformタグで作られています。
そして入力された情報は「OK」ボタンや「注文確定」ボタンを押すと同時にサーバーへ送られています。
サーバーへ送られた情報はサーバー側で動く処理プログラム(PHPなど)が受け取り、入力したメールアドレスにご注文完了メールを送ったりします。

ここで補足
サーバーとクライアントって何?
サーバーとは文書や画像、動画など多くの情報を保管している図書館みたいな物です。ただ、図書館のように開館時間はなく、基本的に休むことなく常に私たちが欲しい情報を提供してくれます。
一方でクライアントとはネットやECサイトなどを利用している私たちです。
借りたい本を図書館職員に「貸してください!」とお願いすると、職員がバーコードをピッとしてすぐに貸し出してくれるのと同じで、クライアントが欲しい情報をサーバーに「見せて!」とお願いすると、サーバーは保管している場所からその情報を取り出して送ってくれます。
というわけで、私たちクライアントが欲しい情報をすぐに手に入れたり、欲しい物をネットでポチっとするだけですぐに届くのはサーバーが頑張ってくれているおかげなのです。サーバーさまさまですね笑

このようにネット大好きな私たちの欲望はクライアント側で情報を受け取るformタグとサーバー側で動くPHPなどの処理プログラムの連携プレーで満たされていると言っても過言ではありません!

<form>タグの使い方

<form action=”asdsurvival.php” method=”post”>
    情報の送り先  サーバーに対するリクエスト方式の指定

のように記述します。
詳しく書かれている内容を見て見ましょう。

まず、formタグの中には

action属性
method属性

があります。

action属性

action属性の中にはクライアントが入力した情報の送り先を指定します。
例では
action=”asdsurvival.php”
と記述しましたので、情報はサーバーにある「asdsurvival.php」というファイルに送られます。


method属性

method属性ではサーバーに対してのリクエスト方式を決めます。
決めると言ってもpostかgetの2択しかありません。

クライアントから受け取った情報を媒介するのに重要なformタグですが、実はformタグだけでは何も機能しません。
ではどうしたら良いかですが、他のパーツをくっつける必要があります。

<form>タグのパーツ

HTML5には約25種類のパーツが定義されてますがが、よく使うのは以下のタグだと思います。

  • inputタグ
  • selectタグ
  • labelタグ
  • textareaタグ

inputタグ

inputタグはクライアントに情報を入力してもらうスペースを形成します。
先ほどECサイトなどで住所等を打ち込む入力白い枠はformタグで作られると書きましたが、
正しくはformタグに付け加えられるinputタグパーツで作られます。

使い方

<input name=”email” type=”text”>

のように記述します。
一般的に属性にはnametypeを加えます。


name属性

name属性には好きな名前を入れます。
入れる名前は何でも良いです。
しかし、普通は何のデータが入力されているかが分かり、かつ短めの名前を入れることが勧められています。

なぜ、名前なんかを付けなければならないのかとお思いですか?

それは、サーバー側の処理プログラムで入力データを判別するために名前を付けます。
PHPでは入力された情報を受け取る方法として$_POST[‘(ここにname属性に付けた名前を入れる)’]という書き方があります。
つまりサーバー側の処理プログラムはname属性の名前を見てデータを選択し、取得するというわけです。


type属性

type属性はinput属性で作られる入力枠の形を決めます。

例を見てください!
まずはソースコードを示します。

これらを実行すると、

(typeにnumberを指定してます。)

    typeにradioを指定してます。

    typeにcheckboxを指定してます。

  •   

こんな感じになります。


あれ。
typeに「text」、「email」、「tel」を指定すると作られる入力枠は全て同じに見えるな。
そうなんだよ。
見た目はほぼ同じです。(というよりか全く一緒ですね笑)
でも、機能は異なります。


テキストフィールド(type=”text”を指定した場合)
→入力枠にテキストを入力できるようになります。入力枠の基本形と言えます。

メールアドレスフィールド(type=”email”を指定した場合)
→メールアドレス以外のテキストを入力すると警告のポップアップが出ます
(スマホやタブレットで表示した場合、メールアドレスを入力するのに適したキーボードが表示されます。)

電話番号フィールド(type=”tel”を指定した場合)
→(スマホやタブレットで表示した場合、電話番号を入力するのに適した数字だけのキーボードが表示されます。)

パスワードフィールド(type=”password”を指定した場合)
見た目がテキストフィールドなどにそっくりなパスワードフィールドがあります。type=”password”と設定するとパスワードフィールドが作成されます。
パスワードフィールドに入力された文字や数字は全て「・」で表示されるため、盗み見等に効果的です。

selectタグ

予め用意されてある選択肢の中から選べるボックス(セレクトボックス)を作成します。

使い方

<select name=”season” size=”3″ multiple >

selectタグには name 属性、size属性、multiple属性があります。


name属性

selectタグ同様、サーバー側の処理プログラムが入力情報を見分けるために設定します。
しかし、inputタグとは異なる点が1点あります。
まず、selectタグは後述するoptionタグとセットで使います。
理由はselectタグだけではメニューの枠しか作れず、肝心の選択肢の中身を表示するには、optionタグの力が必要になるからです。
そのため、サーバーの処理プログラムに渡す際はselectタグのname属性とoptionタグのvalue属性がセットになって送られます。
分かりづらいので、例を見てみましょう。

使用例

<select name=”season”>
<option value=”summer”>夏</option>
<option value=”winter”>冬</option>
</select>

このように書くと夏と冬の2択のセレクトボックスができます。

もし夏を選んだ場合、season = summerといった具合にセットで送られます。

selectタグのname属性とoptionタグのvalueはセットと覚えましょう。


size属性

size属性では表示する選択肢の数を指定します。

上の使用例で言うと、
もしsize=”1″を指定すると「夏」の選択肢しか見えませんが、
size=”2″と指定すると、「夏」と「冬」の2択が出てきます。


multiple属性

multiple属性を指定すると複数選択が可能になります。

指定するにはselectタグの中に「 multiple 」と記載すれば大丈夫です。


では、実際に ソースコード を見てみましょう!

これを実行すると

こんな感じになります。

labelタグ

labelタグは入力フォームに対してラベルをつけるために使用します。
そのため、inputタグとセットで使います。

使い方

<label for=”inquiry-field“>お問い合わせ番号</label>
<input type=”text” name=”opinion” id=”inquiry-field“>

for属性

for属性はlabelタグと入力フォームを結びつけるために付けます。
結びつけ方は上にあるように、
labelタグのfor属性の名前と入力フォーム(ここではinputタグ)のid属性の名前を一致させます。

こうしてlabelタグとinputタグが結びつけられると、
入力フォーム内だけでなくlabelタグをクリックしても、inputタグで作成した入力フォームに入力が可能になります。

textareaタグ

テキストエリアは複数行の入力を可能にするタグです。
ご意見やお問い合わせを受け付ける時などに使用されます。

使い方

<label for=”opinion-field”>
<textarea name=”opinion” id=”opinion-field”></textarea>


※参考にした本

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です