HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLフォームのaction属性とは?使い方とサンプルコードをわかりやすく解説

HTMLのaction属性は、フォームが送信されたときに、入力データをどのURLへ送るかを指定するための属性です。フォームを作成するうえで最も重要な属性の一つであり、データの送信先となるサーバーサイドのスクリプト(例：PHPファイルなど)を指定します。

action属性の基本構文

action属性の基本的な書き方は以下のとおりです。

<form action="URL"></form>

action属性の値には、絶対URLまたは相対URLを指定できます。ここで指定したURLに対して、フォームに入力されたデータが送信されます。

HTMLフォームaction属性の使用例

それでは、実際にaction属性を使ったサンプルコードを見てみましょう。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    input {
        width: 315px;
        display: block;
        margin: 1rem auto;
        border: 2px solid #fff;
        padding: 8px;
        background: transparent;
        border-radius: 20px;
        outline: none;
    }
    ::placeholder {
        color: #000;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 20px;
        width: 330px;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>HTML Form action Attribute Demo</h1>
<form action="/action_page.php" method="get">
<input type="text" name="firstname" placeholder="Enter First Name">
<input type="text" name="lastname" placeholder="Enter Last Name">
<input type="submit" value="SUBMIT" class="btn">
</form>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、次のようなフォーム画面が表示されます。

HTMLフォームのaction属性とは?使い方とサンプルコードをわかりやすく解説

名前(First Name)と姓(Last Name)を入力し、「SUBMIT」ボタンをクリックしてみましょう。ボタンを押すと、action属性で指定した「/action_page.php」に対して、入力したデータがGETメソッドで送信されることが確認できます。

HTMLフォームのaction属性とは?使い方とサンプルコードをわかりやすく解説

まとめ

  • action属性は、フォーム送信時のデータ送信先URLを指定する
  • 値には絶対URL・相対URLのどちらも指定可能
  • method属性(get / post)と組み合わせて使うのが一般的

このように、action属性を正しく理解することで、ユーザーが入力した情報を適切なサーバーへ受け渡すフォームを構築できるようになります。

  1. HTMLのnovalidate属性とは？フォームのバリデーションを無効化する方法

    HTMLのnovalidate属性は、フォームを送信する際に入力データの検証（バリデーション）を行わないことを指定するための属性です。通常、required属性やtype=emailなどが設定された入力フィールドは、送信時にブラウザによって自動的にチェックされますが、form要素にnovalidate属性を付与すると、これらの組み込みバリデーションがすべて無効化されます。 この属性は論理属性（ブール型属性）のため、値を指定せずに記述するだけで機能します。JavaScriptから動的に追加・削除することも可能です。 構文 novalidate属性の基本的な記述方法は以下のとおりです。 <f

  2. HTMLフォームのmethod属性とは？getとpostの違いと使い方をわかりやすく解説

    HTMLのmethod属性は、フォームから送信するデータを「どのような方法で」サーバーへ渡すかを指定するための重要な属性です。具体的には、データをURLの一部として送るか（GET）、HTTP POSTトランザクションとして送るか（POST）を選択できます。 method属性の基本構文 method属性の書き方は以下の通りです。 <form method="get | post"></form> get を指定すると、フォームのデータはURL変数（クエリ文字列）として送信されます。一方、post を指定すると、データはHTTPリクエストのボディに含まれ