G&W Design Life

フォームにphpを組みこもう

バックエンドにはノータッチでしたが、サイト制作に必須のお問い合わせフォームをもっと理解すべくphpの組み込みを学習してみました。form周りのタグとphpを手順ごとにまとめました。

(1)formタグを使用して送信先やメゾットを定義します。

送信フォームを作成したい時に使うタグ。この中に記載された情報はCGIプログラムなどに送信されて処理されます。

■処理の仕方を属性で指定
– action属性 [ 必須 ]
フォームの送信ボタンを押して送信されるデータの送信先を指定する。この時指定するのはデータを受け渡す処理をしてくれるサーバーのCGIプログラムのURI

– method属性 [ 必須ではない ]
method属性を省略した場合は、初期値は「get」です。
送信するときの転送方法を指定する。

get = 
URIに記述されたプログラムへリクエストが送られる時にそのリクエストの後ろにデータを付けて送信するのが特徴です。一概には言えないがgetはサーバー側にあるデータの取得に適している。

post = 
メソッドの場合はURIにデータを付けるのではなく別の方法でデータは送られます。その為データの量に制限がありません。入力したフォーム内容のデータは外側からの表示では見ることができないので安全性が高いので、何か新しいデータをサーバに送信して登録するといった用途には「post」を利用します。

<form action="送信先url" method="postかgetを入れる">
</form>

(2)フォーム内の入力部分を作る

formで作成したフォームの中の、テキスト入力や実行ボタンなどの各フォーム部品を表示します。
type属性の値によって、見栄えや動作の異なる部品となります。
なお、inputには閉じタグはありません。

– tyupe属性 [ 必須 ]
入力のスタイルを指定する

– namez属性 [ 必須ではない ]
スクリプト言語などから参照できるよう名前を指定する

– value属性
初期値設定、送信される値。
この属性をform内で使用できる要素は以下
・button 要素
・input 要素

[例]

<form method="POST" action="xxx.cgi">
<table>
<tr>
 <td>名前:</td>
 <td><input type=text name="namae"></td>
</tr>
<tr>
 <td>パスワード:</td>
 <td><input type=password name="passwd"></td>
</tr>
<tr>
 <td>転送ファイル:</td>
 <td><input type=file name="tensou"></td>
</tr>
<tr>
 <td>性別:</td>
 <td>
  <input type=radio name="seibetsu" value="male" checked>男
  <input type=radio name="seibetsu" value="female">女
 </td>
</tr>
<tr>
 <td>趣味:</td>
 <td>
  <input type=checkbox name="shumi" value="PC">パソコン
  <input type=checkbox name="shumi" value="SP">スポーツ
  <input type=checkbox name="shumi" value="RD">読書
 </td>
</tr>
<tr>
 <td></td>
 <td>
  <input type=submit value=" 送信 ">
  <input type=reset value=" 取消 ">
 </td>
</tr>
</table>
</form>

[参照]
http://www.tohoho-web.com/html/input.htm

(3)フォームボタンの送信ボタンを作る

– disabled ボタン無効化(値は不要)

<input type="submit" value="送信する" name="button1">
<input type="reset" value="入力リセット" name="button2">
<button type="button">ノーマルなボタン</button>

(4)フォームのデータを受け取る

出力する際はphp内となります。

・GETメソッドで送信されてきた場合
フォームのエレメントで「name=”abc”」であればその値は、$_GET[‘abc’] で受け取れます。

・POSTメソッドで送信されてきた場合
フォームのエレメントで「name=”xyz”」であればその値は、$_POST[‘xyz’] で受け取れます。

[例]

      <div class="form-item">■ 名前</div>
      <?php
        echo $_POST&#91;"name"&#93;;
      ?>
      
      <div class="form-item">■ 内容</div>
      <?php
        echo $_POST&#91;"body"&#93;;
      ?>

フォームでのバリデートjavascriptもまとめて見ようと思います!

Profile

エディトリアルデザイン・グラフィックデザインを経て数年前Webデザイナーに転身した30代デザイナーです。現代アートや地域とデザイン、ヒト・モノ・コト全般に興味があり。
イラストを描くのが好き。プログラミングはまだまだわからない事も多く初心者なんでメモ&学習としてこのブログを開設しました。どうぞよろしくお願い致します!

Recent Entries

Category