HTMLフォームアクションをマスター!10の使い方と実例

HTMLフォームアクションのサンプルコード例HTML
この記事は約14分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、HTMLフォームアクションを使った10の実例がすぐに理解できるようになります。

初心者でも分かりやすいように、基本から応用例まで徹底解説していきます。

また、注意点やカスタマイズ方法も紹介しますので、HTMLフォームアクションを使いこなせるようになりましょう!

●HTMLフォームアクションとは

HTMLフォームアクションは、ウェブページ上でユーザーが入力したデータをサーバーに送信するための機能です。

例えば、ログイン情報やお問い合わせ内容を入力して送信するフォームなどに使われます。

○フォームアクションの基本

フォームアクションは、<form>タグを使って実装します。

このタグ内には、action属性とmethod属性が必要です。

action属性はデータが送信されるURLを指定し、method属性は送信方法(GETまたはPOST)を指定します。

●HTMLフォームアクションの使い方

ここでは、HTMLフォームアクションの基本的な使い方を4つのサンプルコードで説明します。

○サンプルコード1:データ送信の基本

下記のサンプルコードは、名前を入力して送信するシンプルなフォームです。

<!DOCTYPE html>
<html>
<head>
    <title>HTML Form Action Sample</title>
</head>
<body>
    <form action="/submit" method="POST">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="送信">
    </form>
</body>
</html>

○サンプルコード2:GETとPOSTメソッド

GETメソッドとPOSTメソッドの違いを下記のサンプルコードで見ていきましょう。

<!-- GETメソッドの例 -->
<form action="/search" method="GET">
    <label for="query">検索キーワード:</label>
    <input type="text" id="query" name="query">
    <input type="submit" value="検索">
</form>

<!-- POSTメソッドの例 -->
<form action="/register" method="POST">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username">
    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password">
    <input type="submit" value="登録">
</form>

○サンプルコード3:フォームのバリデーション

フォームのバリデーションは、入力されたデータが正しいかどうかをチェックする機能です。

下記のサンプルコードは、メールアドレスのバリデーションを行うフォームです。

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation Sample</title>
</head>
<body>
    <form action="/subscribe" method="POST">
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required>
        <input type="submit" value="登録">
    </form>
</body>
</html>

○サンプルコード4:リセットボタンの実装

リセットボタンは、フォーム内の入力内容をクリアする機能です。

下記のサンプルコードは、リセットボタンを追加したフォームの例です。

<!DOCTYPE html>
<html>
<head>
    <title>Reset Button Sample</title>
</head>
<body>
    <form action="/submit" method="POST">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="送信">
        <input type="reset" value="リセット">
    </form>
</body>
</html>

●HTMLフォームアクションの応用例

ここでは、実際に役立つHTMLフォームアクションの応用例を6つのサンプルコードで紹介します。

○サンプルコード5:検索フォーム

下記のサンプルコードは、検索フォームの実装例です。

<!DOCTYPE html>
<html>
<head>
    <title>Search Form Sample</title>
</head>
<body>
    <form action="/search" method="GET">
        <label for="query">検索キーワード:</label>
        <input type="text" id="query" name="query">
        <input type="submit" value="検索">
    </form>
</body>
</html>

○サンプルコード6:アップロードフォーム

下記のサンプルコードは、ファイルをアップロードするフォームの実装例です。

<!DOCTYPE html>
<html>
<head>
    <title>Upload Form Sample</title>
</head>
<body>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <label for="file">ファイル選択:</label>
        <input type="file" id="file" name="file">
        <input type="submit" value="アップロード">
    </form>
</body>
</html>

○サンプルコード7:ログインフォーム

下記のサンプルコードは、ログインフォームの実装例です。

<!DOCTYPE html>
<html>
<head>
    <title>Login Form Sample</title>
</head>
<body>
    <form action="/login" method="POST">
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username">
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password">
        <input type="submit" value="ログイン">
    </form>
</body>
</html>

○サンプルコード8:お問い合わせフォーム

下記のサンプルコードは、お問い合わせフォームの実装例です。

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form Sample</title>
</head>
<body>
    <form action="/contact" method="POST">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <label for="email">メールアドレス:</label>
<input type="email" id="email" name="email">
<label for="message">メッセージ:</label>
<textarea id="message" name="message"></textarea>
<input type="submit" value="送信">
</form>
</body>
</html>

○サンプルコード9:登録フォーム

下記のサンプルコードは、新規登録フォームの実装例です。

<!DOCTYPE html>
<html>
<head>
    <title>Registration Form Sample</title>
</head>
<body>
    <form action="/register" method="POST">
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username">
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email">
        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password">
        <input type="submit" value="登録">
    </form>
</body>
</html>

○サンプルコード10:複数選択フォーム

下記のサンプルコードは、複数の選択肢から選択するフォームの実装例です。

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Selection Form Sample</title>
</head>
<body>
    <form action="/survey" method="POST">
        <label for="interests">興味のある分野:</label>
        <select id="interests" name="interests" multiple>
            <option value="technology">テクノロジー</option>
            <option value="sports">スポーツ</option>
            <option value="music">音楽</option>
            <option value="art">アート</option>
        </select>
        <input type="submit" value="送信">
    </form>
</body>
</html>

●注意点と対処法

  1. セキュリティリスク

    フォームデータはインターネットを介して送信されるため、悪意のあるユーザーによる攻撃を受ける可能性があります。

    対策として、サーバーサイドでの入力値チェックやCSRF対策を行いましょう。
  2. バリデーション

    必須項目が入力されていない場合や不正な形式のデータが入力された場合など、入力データの検証が重要です。

    HTML5のバリデーション機能やJavaScriptを使用してバリデーションを実装しましょう。

●カスタマイズ方法

HTMLフォームはCSSを用いて見た目をカスタマイズすることができます。

フォーム要素のスタイルを変更することで見た目を改善し、使いやすさや魅力を向上させることができます。

例えば、ボタンの色やフォント、フォーム要素の幅や高さなどを調整することが可能です。

ここでは、シンプルなフォームのデザインカスタマイズ方法を紹介します。

<!DOCTYPE html>
<html>
<head>
    <title>Customized Form Sample</title>
    <style>
        form {
            font-family: Arial, sans-serif;
            width: 300px;
        }
        label, input, textarea {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }
        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <form action="/submit" method="POST">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email">
        <label for="message">メッセージ:</label>
        <textarea id="message" name="message"></textarea>
        <input type="submit" value="送信">
    </form>
</body>
</html>

このサンプルコードでは、CSSを使ってフォームのスタイルをカスタマイズしています。

フォーム要素にスタイルを適用することで、より見た目が魅力的なフォームを作成することができます。

まとめ

この記事では、HTMLフォームアクションを使って、フォームデータの送信先や送信方法を設定する方法について、詳しく解説しました。

また、実用的なフォームの作成方法や注意点、カスタマイズ方法についても紹介しました。

この記事を読めば、HTMLフォームアクションを使ったフォームの作成やカスタマイズがスムーズにできるようになります。

フォームの作成方法やカスタマイズ方法を理解し、自分のウェブサイトやアプリケーションに適切なフォームを実装しましょう。