HTMLフォームのaction属性エラーの対策法：リンク未設定時に役立つコツ〜初学者のエラー奮闘記〜

はじめに

こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。今回はHTML,CSSでウェブサイトを模倣してみた時、Errorを読む時のコツについて考えてみました。

直面したエラー

Webサイトを作成した時に、自分で書いたコードにエラーが無いかチェックしました。その時は下記のサイトを使用しました。

その際に下記のエラーと直面しました。

エラーが発生した時の状況について説明します。
エラー発生箇所：formタグのaction属性部分
エラーの概要：action属性が空のままでフォームを作成しており発生

エラーメッセージの読み方

エラーメッセージをどのように読むと読みやすいか考えてみました。
エラーメッセージは通常、以下のように「:」で区切られて構成されています。

Bad value for attribute action on element form: Must be non-empty

「:」より左に、今の状況についての説明があります。
今回だと「要素のアクション属性の値が悪い」になります。
「:」より右に、どのような状態が正しいか示してくれます。
今回だと「空であってはいけません」になります。

要するに、formタグのaction属性が空であるために問題が発生していることを示しています。

action属性は、フォーム送信時にデータを送るURLを指定する重要な部分です。

エラーの原因

このエラーは主に、フォームを作成した際にaction属性を設定しなかった、または設定する予定だったリンクを忘れてしまったときに発生します。

例えば、以下のようなコードでは、action属性が空であるためにエラーが発生します。

<form action="">
  <!-- フォーム内容 -->
</form>

対策：仮のリンクを設定する方法

開発中にaction属性をまだ指定できない場合は、仮のリンクを設定することが推奨されます。action="#"のように設定すると、リンクがクリックされた際にページのトップに移動します。これにより、フォーム送信時のエラーを回避できます。

<form action="#">
  <!-- フォーム内容 -->
</form>

これは仮の設定であり、後から実際のリンク先に変更する必要があります。

注意点：バリデーションエラーになることも

一部のバリデーションツールやブラウザによっては、#が適切なURLでないと認識され、エラーとして扱われることがあります。これを避けたい場合は、プレースホルダーのURLを指定する方法もあります。

<form action="https://example.com/submit">
  <!-- フォーム内容 -->
</form>

開発中であれば、ダミーのURLを指定しておくことも効果的です。

バリデーションエラーとは？

バリデーションエラーは、Web開発やプログラミングにおいて、入力データやコードが定められた基準や規則に合致していない場合に発生するエラーのことを指します。具体的には、以下のような状況でバリデーションエラーが発生することがあります：

• HTMLバリデーションエラー: HTMLのコードがW3C（World Wide Web Consortium）の仕様に準拠していない場合に発生します。例えば、属性が正しく設定されていない、必須の属性が欠落している、またはタグが正しく閉じられていないなどのケースです。これにより、ブラウザやバリデーターがエラーを報告します。

<form action="">
  <!-- フォーム内容 -->
</form>

上記のコードでは、action属性が空であるため、HTMLバリデーションツールでエラーが発生することがあります。

• 入力データのバリデーションエラー: フォームに入力されたデータが、指定された形式やルールに合致しない場合に発生します。たとえば、メールアドレスが無効である、必須フィールドが未入力である、データが指定された範囲外である場合などです。

<input type="email" required>

上記のコードで、ユーザーが正しいメールアドレスを入力しなかった場合に、バリデーションエラーが発生します。

• JavaScriptのバリデーションエラー: フロントエンドでJavaScriptを使用して入力データを検証する際に、期待された条件を満たしていない場合に発生します。例えば、数値の範囲や文字列の長さをチェックするスクリプトでエラーが発生することがあります。

if (age < 0 || age > 120) {
  console.error("Invalid age");
}

上記のスクリプトで、ageが0未満または120を超えている場合にエラーが報告されます。

まとめ

エラー文をどのように読むかわからないと、エラーから逃げたくなります。エラーがどのように書かれているかを理解する事で少しだけエラーと仲良くなれた気がします。今回直面したシチュエーションでは、HTMLフォームのaction属性が空だと、エラーメッセージが発生しました。エラーの意味を理解し自分の今の状況に当てはめて考えてみて、仮に#を使用することで今回はエラーを回避できました。

最後までご覧いただき本当にありがとうございました！！