まるるん備忘録

プログラミングやインフラ等、IT技術に関して気付いた事を書いているブログです。

まるるん備忘録【Webアプリケーション開発】HTMLのPOSTメソッドで失敗したこと

HTMLのタグの1つである<form>タグ。

その<form>タグの属性の1つ、methodの値を「POST」にしてデータを送信する練習をしてみたのですが、何故だか上手くいかないんですよね……

という訳で、何が悪いのかHTMLの中身を見てみましょう。

使用したHTMLは2つです。

  • signin.html  (ログイン画面(もどき)を表示するHTML。こちらから、もう片方のHTMLへデータを送信します)
  • signin-action.html  (データを受信して何らかのアクションを返すHTML。なお機能は未実装です)

signin.html

<!DOCTYPE html>
<html>
    <head>
        <title>ココはタイトルです</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
    <body>
        <form class="" action="signin.html" method="post">
            <fieldset>
                <legend>ログインID(メールアドレス)</legend>
                <input type="email" name="email-input">
            </fieldset>
            <fieldset>
                <legend>パスワード</legend>
                <input type="password" name="password-input">
            </fieldset>
                <fieldset>
                    <legend>送信ボタン type="submit"</legend>
                    <input type="submit" name="submitInput" value="valueでボタンテキスト">
            </fieldset>
        </form>
    </body>
</html> 

 

signin-action.html


<!DOCTYPE html>
    <html>
        <head>
            <title>ログインが完了しました</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <p>ログイン機能は未実装です……次回の更新をお待ち下さい！</p>
    </body>
</html>

これらを実行してみると、NotFound(エラー番号404)が出てしまいます。

NotFoundとは、和訳すると見つからないという意味ですね。

……そう、HTMLが見つからないのです。

HTMLが見つからないとはどういう事かと言うと、

  • 指定したパスにHTMLを置いていない
  • HTMLがそもそも存在しない
  • HTML名を間違えているので、見つけられない

などが大抵のNotFoundの原因として考えられます。(間違っていたらご指摘お願いします。上から2番目と3番目は似たようなものですが、あまり気にしないで下さい)

今回の場合、指定したパスにHTMLを置いていますし、HTMLはきちんと存在しています。

という事は、1番最後の「HTML名を間違えているので、見つけられない」が怪しそうですね。

という訳でHTML名を指定していた部分をピックアップして見直してみましょう。

 

signin.html

<body>
    <form class="" action="signin.html" method="post">
        中略
    </form>
</body> 

やっぱりHTML名が間違っていましたね(笑)

<form>タグのaction属性の値をよーく見てください。

"signin.html"書いてありますよね？signin-action.htmlにデータを送信したいので、正しくは"signin-action.html"と書かないといけません。

スペルミスを修正して、

signin.html

<body>
    <form class="" action="signin-action.html" method="post">
        中略
    </form>
</body>

はい、スペルミスを修正したらきちんと動作してくれましたね。

 

「おいおい、POSTメソッド関係ないじゃん！」

とあちこちから声が聞こえてきそうですが、実は僕……何を血迷ったか

「NotFoundが出るのはデータ送信が上手くいかなかったからなのではないか？」

と勘違いをしていたんですよね(苦笑)

そのせいでHTMLの指定ミス(スペルミス)なんていう単純なミスだと気付かず、数時間画面とにらめっこをしていたり……

なんて事があったので、あえて上記のような見出しにしました。

気付けば単純なミスなのですが、自分自身への戒めの為にも書き残す事にしておきます。

今回のまとめ

NotFound(エラー番号404)が出たらどう対処すれば良いか？

  • 指定したパスにHTMLを置いているか確認する
  • HTMLがそもそも存在するか確認する
  • HTML名を間違えていないか確認する