フォームも作った。
GETとPOSTの違いも、なんとなく分かってきた。
では、入力されたデータを別のPHPファイルへ送ってみましょう。
<form method="post" action="send.php">
<input type="text" name="name">
<button type="submit">送信</button>
</form>受け取り側の send.php も用意しました。
<?php
$name = $_POST['name'] ?? '';
if ($name !== '') {
echo 'こんにちは、'
. htmlspecialchars($name, ENT_QUOTES, 'UTF-8')
. 'さん';
}これまでの授業でやってきたことも入っています。
さあ送信！
ところが――
404 Not Found
send.php が見つからない。
あるはずなのに。
なぜ？
まず疑うのはPHPではない
こんなとき、つい send.php のPHPコードを調べたくなります。
でも今回は、そもそもPHPが実行されるところまで到達していない可能性があります。
ブラウザが、
send.phpって、どこにあるの？
という状態になっているからです。
ここで確認したいのが、ファイルの置き場所です。
たとえば現在の構成がこうだったとします。
example.com/
├─ form/
│ └─ index.php
│
└─ send.phpフォームが書かれているのは、
form/index.phpです。
一方、送りたいファイルは、
send.phpにあります。
ここでフォームには、
action="send.php"と書きました。
これが今回のポイントです。
send.php は「今いる場所から探して」という意味
ブラウザは、
action="send.php"を見ても、サイト全体から send.php を検索してくれるわけではありません。
現在表示しているページが、
https://example.com/form/index.phpなら、
action="send.php"は基本的に、
https://example.com/form/send.phpを意味します。
でも実際の send.php は、
https://example.com/send.phpにあります。
つまりブラウザは、
/form/send.phpを探している。
実際には、
/send.phpにある。
場所が違う。
だから、
404 Not Found
になったわけです。
今日の合格ライン
ここで全部覚える必要はありません。
まずはこれだけです。
ファイル名が合っていても、場所が違えば見つからない。
そして、
action="send.php"のような書き方は、
今いる場所を基準にして探す
と覚えておけば十分です。
これが相対パスです。
ひとつ上へ戻る ../
では今回の構成で send.php へ行くにはどうすればいいでしょう。
example.com/
├─ form/
│ └─ index.php ← 今ここ
│
└─ send.php ← ここへ行きたいform フォルダから一度外へ出る必要があります。
そこで使えるのが、
../です。
フォームを、
<form method="post" action="../send.php">とすると、
今いる
formからひとつ上へ戻って、そこにあるsend.phpを探して
という意味になります。
イメージすると、
form/index.php
↓
../
↓
send.phpです。
../ を見て難しく考える必要はありません。
「ひとつ上へ戻る」
くらいでOKです。
/send.php と書く方法もある
もうひとつあります。
<form method="post" action="/send.php">先頭に / が付きました。
これは、
このWebサイトの一番上を基準にして、send.phpへ行って
という指定です。
今回なら、
https://example.com/send.phpを指します。
そのため、
/form/index.phpからでも、
/contact/index.phpからでも、
/blog/test/index.phpからでも、
/send.phpならサイトのルートにある send.php を指せます。
じゃあ「絶対パス」って？
さらに、URLを全部書くこともできます。
<form method="post" action="https://example.com/send.php">これなら行き先が完全に指定されています。
少なくとも、
「今どのページにいるか」
によって行き先が変わることはありません。
ここで初心者のうちは、大まかに、
send.php
../send.phpは現在位置との関係で指定している。
https://example.com/send.phpは行き先を最初から全部指定している。
と理解しておけば十分です。
/send.php は少しだけ注意
ここは検索していると用語がややこしくなりやすいところです。
/send.phpはサイトのルートを基準にしているので、「絶対パス」と説明されることもあります。
一方で、
https://example.com/send.phpのような完全なURLと区別して、
ルート相対パス
などと呼ばれることもあります。
今は名前を完璧に暗記する必要はありません。
大切なのは、
何を基準にして、その場所を探しているのか
です。
実はこれ、フォームだけの話ではない
ここが今日かなり重要です。
同じ問題はWeb制作をしていると何度も出てきます。
たとえば画像。
<img src="images/logo.png" alt="ロゴ">CSS。
<link rel="stylesheet" href="css/style.css">JavaScript。
<script src="js/app.js"></script>リンク。
<a href="contact/index.html">お問い合わせ</a>全部、
「そのファイルはどこにあるの？」
という話です。
だから、
画像が出ない！
CSSが効かない！
JavaScriptが動かない！
リンクしたら404になった！
フォームを送信したら404になった！
これらは一見まったく違うトラブルに見えても、
パスが間違っているだけ
ということがあります。
「画像が出ない」も同じように考えられる
たとえば、
example.com/
├─ images/
│ └─ okojo.png
│
└─ lesson/
└─ index.html現在、
lesson/index.htmlにいるとします。
ここで、
<img src="images/okojo.png">とすると、ブラウザは、
lesson/images/okojo.pngを探します。
でも本物は、
images/okojo.pngです。
なら、
<img src="../images/okojo.png">あるいは、
<img src="/images/okojo.png">など、実際の構成に合わせて指定する必要があります。
AIに聞くときも「場所」を渡そう
AIに、
send.phpが見つかりません。
だけ伝えても、原因候補がたくさんあります。
そこで、こう聞いてみます。
HTMLフォームを送信すると404になります。
現在のページは/form/index.phpです。
送信先のPHPは/send.phpにあります。
フォームにはaction="send.php"と書いています。
ファイルの位置関係を含めて、初心者向けに原因を説明してください。
これならAIも、
action="send.php"では/form/send.phpを探している可能性があります。
と判断しやすくなります。
コードだけでなく、ファイルの置き場所もAIに渡す。
これもWebトラブルではかなり使えるコツです。
AIに「直して」だけで終わらせない
AIが、
<form action="../send.php">と直してくれた。
動いた！
もちろん、それでも構いません。
ただ、そこで一つだけ聞いてみましょう。
「なぜ
../を付けると動くようになったの？」
これだけです。
すると、
../はひとつ上のディレクトリを表します。
という知識が一つ増えます。
次に画像が表示されなくなったとき、
<img src="../images/photo.jpg">を見ても、
「あ、上の階層に戻って探してるのか」
と読めるようになります。
これがオコジョキャンパスで目指しているところです。
全部自分で書けなくても、何をしているか分かる。
今日覚えて帰ること
今回覚えてほしいのは、この4つだけです。
- ファイル名が正しくても、場所が違えば404になる
send.phpは、現在いる場所を基準に探す../は、ひとつ上へ戻る/send.phpは、サイトのルートを基準に探す
そして一番大切なのは、
「そのファイルは、どこを基準に探している？」
と考えられることです。
これが分かれば、フォームだけでなく、画像・CSS・JavaScript・リンクでも使えます。
今日のワンポイント答え合わせ
今回、
<form method="post" action="send.php">で404になった原因は、
send.php の中身ではありませんでした。
ブラウザが、
/form/send.phpを探していたのに、
実際のファイルは、
/send.phpにあったからです。
つまり、
「動かないコード」ではなく、「たどり着けない場所」だった。
Web制作では、この違いに気付けるだけでも調査がかなり速くなります。
次回
パスを直した。
今度こそ send.php が開いた！
……ところが、
404、403、500……数字が違う。これって何が違うの？
次回は、
第7話「404？403？500？HTTPステータスコードって何？」
です。