[46] フォームでユーザにデータ送信してもらおう

今回はまず「フォーム全般」についてまとめます。
フォームの要素や属性は、HTML5から新しいものがたくさん加わって、HTML4, XHTML1 の頃と比べれば、ずいぶん劇的に色々なことができるようになりました。
JavaScriptなど無しで、HTMLの要素だけでフォームを作って高機能なんです。

フォームのサンプルはこちら

クリックでサンプルが開きます。とりあえずザッと作ってみたサンプルフォームです。

Sample46_HTML5のフォーム サンプル
(別ウィンドウ(タブ)で開きます)

フォームは情報をサーバに送ります

フォーム(form)とは、英単語で「型式」「書式」「帳票類」などの意味。
ウェブの場合は、ユーザがブラウザで、情報を送る仕組みをフォームといいます。
アンケートのフォームや、検索フォームなど、書いて送信するアレ。

で、他のHTMLの要素と違うのは、
これだけじゃフォームとして動作しないところ。
フォームのデータを処理するためのプログラム(PHPやCGIなど)が必要です。

また、ブラウザ上でユーザの入力結果に反応する JavaScriptなども使う事があります。
(ただしHTML5では、この入力チェックなどの機能が 要素や属性だけで実現可能になり、
すばらしく使いやすくなりました。)

情報を受けるのは、CGI や PHP などのファイル

「情報をサーバに送る」とは、実際には「サーバにあるファイルに」送ります。
CGI、PHPで作られたプログラムに送るのが一般的です。
HTMLファイルに送る事もあります。また(今ではあまり使いませんが)、フォームから直接メールとして送る事もありました。

で、この「ほんっとに…」では、
CGIやPHPなどに関してはまったく詳しくないので解説できません。ご了承ください。

とはいえ、一応「CGI」「PHP」について調べた事をメモっておきます。

● CGI(Common Gateway Interface)とは
ウェブサーバーの外で起動させ、その出力をクライアント側に送信するプログラムだそうです。歴史が古いです。(クライアントとは各自のパソコンだと思ってください)
CGIを書く言語は、サーバ側で実行可能なもの = Perl、シェル言語、C言語などだそうで、
Perl(Practical Extranction and Report Language) で書かれることが多いのだそうです。
CGIは(ウェブサーバーの「外部プログラム」なので)クライアントからのリクエストごとにプログラムを起動するそうで、サーバーへの負荷が多いんだそうです。

● PHP(Hypertext Preprocessor)とは
今や世界中で使われているオープンソースの汎用スクリプト言語。
サーバーサイドスクリプトの1種だそうです。 コレが存在するサーバーが、受け取ったリクエストを処理して、結果をクライアント側に返すという仕組みだそうです。
(ちなみに「JavaScript」 のように、クライアント側で処理を行うスクリプトは、「クライアントサイドスクリプト」 と言うんだそうです。クライアントサイドって、サーバに対してこっち側。PC側ってことです。)

サーバの内部プロセスとして動作するため、 CGIによるプログラムよりも、サーバへの負荷が少なくて速いんだって。
それから、PHPは HTML内に書く事もできます。(PHPとHTMLを切り替えながら同じファイルに書く事ができる)
そして、自分のPCに「Apache」をインストールすると、自分のPCがサーバになって、自分のPC上でPHPによる動作確認ができるので、CGIよりも初心者は扱いやすいんです。
そのPHPによって作られているのが、WordPress。だから世界中で使われているんですね。

●実際にやってみました。ローカルサーバの構築
自分のパソコン内でWordPressの構築作業をするために、ローカルサーバを構築してみました。
私はMacなので最初からApacheが組み込まれていて、あとは「MAMP」をインストールするだけで簡単でした。
Winの方は「XAMPP」をゲットすれば、Apacheだけではなく、PHPやPerl、MySQLもまとめてインストールされるそうです。
参考URLはこちら。
・Dreamweaver とWordPressを連携させる方法
Win、Macそれぞれに、「XAMPP」または「MAMP」をインストールし、データベースを作り、そこにWordPressをインストールする方法がわかります。 さらに、Dreamweaver で作業していく方法も掲載されています。

フォームのための CGI や PHP をゲットするには

私は自分でCGIなど書けないので、かつては「フリーのCGI」などと検索していました(笑)
メールフォーム用のCGIは、それでいろいろ使わせていただきました。
(事前に自分のサーバで使えるかどうか調べるなど、あくまでも自己責任で使いましょう。)
検索フォームなら、Googleの「カスタム検索」を利用する手もあります。
Googleの検索エンジンで自分のサイト内だけを検索することができて、けっこう便利。

WordPressを使えば、そこはもうPHPの世界。
WordPress用のプラグインもたくさんありますし、メールフォームや検索フォームも簡単に作れます。

いずれにしても、フォームのHTML要素を知ってたほうが編集しやすいです。それは間違いない。
ですので、これからじっくり見ていきましょう。

次回予告

次回は<form>要素です。フォームの部品たちの「親」になる要素。
フォームの情報をどこにどう送るかを指定する大切な要素です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.