HTMLフォームのサンプルコード

2024-05-09

HTMLフォームの属性(form attribute)

HTMLフォームは、Webサイトでユーザーからデータを入力してもらうための重要な要素です。フォーム属性は、フォームの動作や見た目などを制御するために使用されます。

主なフォーム属性

  • action: フォーム送信時にデータを送信するURLを指定します。省略すると、現在のページに送信されます。
<form action="/cgi-bin/process.php">
  ...
</form>
  • method: フォームデータを送信する方法を指定します。"get" または "post" が一般的です。
    • get: データをURLに付加して送信します。
    <form method="get">
      <input type="text" name="name">
      <input type="submit" value="送信">
    </form>
    
    • post: データをHTTPボディに含めて送信します。より安全な方法です。
    <form method="post">
      <input type="text" name="name">
      <input type="submit" value="送信">
    </form>
    
  • target: 送信されたデータをどのウィンドウで開くかを指定します。"_blank" で新しいウィンドウを開きます。
<form target="_blank">
  ...
</form>
  • enctype: 送信データのエンコーディング形式を指定します。"application/x-www-form-urlencoded" が一般的です。
<form enctype="application/x-www-form-urlencoded">
  ...
</form>
  • accept-charset: 受信可能な文字エンコーディングを指定します。
<form accept-charset="UTF-8">
  ...
</form>
  • autocomplete: フォームに入力された情報をブラウザに保存するかどうかを指定します。"on" で保存し、"off" で保存しません。
<form autocomplete="off">
  ...
</form>

その他のフォーム属性

上記以外にも、様々なフォーム属性があります。以下に、代表的な属性を紹介します。

  • name: フォームの名前を指定します。
  • id: フォームのIDを指定します。
  • class: フォームにクラスを指定します。
  • novalidate: 送信前にデータの検証を行わないことを指定します。
  • onsubmit: フォーム送信時にJavaScriptの関数を呼び出すことを指定します。
  • onreset: フォームのリセット時にJavaScriptの関数を呼び出すことを指定します。

フォーム属性の使用方法

フォーム属性は、<form> タグに直接記述します。属性名は半角英数字で記述し、属性値はシングルクォートまたはダブルクォートで囲みます。

<form action="/cgi-bin/process.php" method="post">
  <input type="text" name="name">
  <input type="submit" value="送信">
</form>

上記の例では、action 属性で送信先のURLを、method 属性で送信方法を指定しています。

HTMLフォームの属性は、フォームの動作や見た目などを制御するために使用されます。主要な属性以外にも、様々な属性があるので、必要に応じて使い分けてください。



HTMLフォームのサンプルコード

以下に、様々なHTMLフォームのサンプルコードを紹介します。

ログインフォーム

このフォームは、ユーザー名とパスワードを入力してログインするフォームです。

<!DOCTYPE html>
<html>
<head>
  <title>ログインフォーム</title>
</head>
<body>
  <h1>ログイン</h1>
  <form action="/login.php" method="post">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username" required>
    <br>
    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password" required>
    <br>
    <input type="submit" value="ログイン">
  </form>
</body>
</html>

問い合わせフォーム

<!DOCTYPE html>
<html>
<head>
  <title>お問い合わせフォーム</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <form action="/contact.php" method="post">
    <label for="name">氏名:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="message">お問い合わせ内容:</label>
    <textarea id="message" name="message" rows="10" required></textarea>
    <br>
    <input type="submit" value="送信">
  </form>
</body>
</html>

商品注文フォーム

このフォームは、商品名、数量、価格を入力して注文するフォームです。

<!DOCTYPE html>
<html>
<head>
  <title>商品注文フォーム</title>
</head>
<body>
  <h1>商品注文</h1>
  <form action="/order.php" method="post">
    <label for="product">商品名:</label>
    <select id="product" name="product" required>
      <option value="1">商品A</option>
      <option value="2">商品B</option>
      <option value="3">商品C</option>
    </select>
    <br>
    <label for="quantity">数量:</label>
    <input type="number" id="quantity" name="quantity" min="1" required>
    <br>
    <label for="price">価格:</label>
    <input type="text" id="price" name="price" value="1000" readonly>
    <br>
    <input type="submit" value="注文">
  </form>
</body>
</html>

ファイルアップロードフォーム

このフォームは、ファイルをアップロードするフォームです。

<!DOCTYPE html>
<html>
<head>
  <title>ファイルアップロードフォーム</title>
</head>
<body>
  <h1>ファイルアップロード</h1>
  <form action="/upload.php" method="post" enctype="multipart/form-data">
    <label for="file">ファイルを選択:</label>
    <input type="file" id="file" name="file" required>
    <br>
    <input type="submit" value="アップロード">
  </form>
</body>
</html>

アンケートフォーム

このフォームは、アンケートの回答を入力するフォームです。

<!DOCTYPE html>
<html>
<head>
  <title>アンケートフォーム</title>
</head>
<body>
  <h1>アンケート</h1>
  <form action="/survey.php" method="post">
    <p>Q1: あなたの名前は?</p>
    <input type="text" name="name" required>
    <br>
    <p>Q2: あなたの性別は?</p>
    <label for="male">男性</label>
    <input type="radio" id="male" name="gender" value="male" required>
    <label for="female">女性</label>
    <input type="radio" id="female" name="gender" value="female">
    <br>


HTMLフォームの「form属性」以外の方法

HTMLフォームの送信方法は、form属性 以外にもいくつかあります。以下に、代表的な方法を紹介します。

JavaScriptを使用して、フォームデータを取得して送信することができます。この方法の利点は、フォーム送信時の画面遷移を抑制できることです。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScriptでフォームを送信</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <form id="myForm">
    <label for="name">氏名:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="message">お問い合わせ内容:</label>
    <textarea id="message" name="message" rows="10" required></textarea>
    <br>
    <button type="button" onclick="submitForm()">送信</button>
  </form>

  <script>
    function submitForm() {
      const form = document.getElementById('myForm');
      const data = new FormData(form);

      fetch('/contact.php', {
        method: 'POST',
        body: data
      })
      .then(response => response.text())
      .then(text => {
        console.log(text);
        alert('送信完了しました。');
      })
      .catch(error => {
        console.error(error);
        alert('送信に失敗しました。');
      });
    }
  </script>
</body>
</html>

Ajaxを使用して、非同期的にフォームデータを送信することができます。この方法の利点は、ユーザーがページを離れることなく送信処理を行えることです。

<!DOCTYPE html>
<html>
<head>
  <title>Ajaxでフォームを送信</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <form id="myForm">
    <label for="name">氏名:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="message">お問い合わせ内容:</label>
    <textarea id="message" name="message" rows="10" required></textarea>
    <br>
    <button type="button" onclick="submitForm()">送信</button>
  </form>

  <script>
    function submitForm() {
      const form = document.getElementById('myForm');
      const data = new FormData(form);

      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/contact.php');
      xhr.onload = function() {
        if (xhr.status === 200) {
          console.log(xhr.responseText);
          alert('送信完了しました。');
        } else {
          console.error(xhr.statusText);
          alert('送信に失敗しました。');
        }
      };
      xhr.send(data);
    }
  </script>
</body>
</html>

iframeを使用して、別のページにフォームを送信することができます。この方法の利点は、送信処理を別のドメインで行うことができることです。

<!DOCTYPE html>
<html>
<head>
  <title>iframeでフォームを送信</title>
</head>
<body>
  <h1>お問い合わせ</h1>
  <iframe src="/contact.php" name="myFrame" style="width: 100%; height: 400px;"></iframe>

  <script>
    function submitForm() {
      const frame = document.getElementById('myFrame');
      frame.contentWindow.document.getElementById('name').value = '山田太郎';
      frame.contentWindow.document.getElementById('email').value = '[email protected]';
      frame.contentWindow.document.getElementById('message').value = 'お問い合わせ内容です。';
      frame.contentWindow.document.forms[0].submit();
    }
  </script>

  <button type="button" onclick="submitForm()">送信</button>
</body>



target属性を使いこなして、ユーザー体験を向上させる

属性値target属性には、以下の属性値を指定できます。_blank:新しいウィンドウまたはタブでリンク先を開きます。_self:現在のフレームまたはウィンドウでリンク先を開きます。_parent:親フレームでリンク先を開きます。_top:最上位のフレームでリンク先を開きます。



フォームデータのエンコードを徹底解説! enctype 属性の役割と具体的な使用方法

enctype 属性の値として指定できる主なオプションは以下の3つです:application/x-www-form-urlencoded (デフォルト): このオプションは、フォームデータのすべての文字をURLエンコードして送信します。これは最も一般的で、ファイルアップロード以外のほとんどのフォームで使用されます。


inputmode属性を使いこなして、ユーザー体験を向上させる

inputmode属性は、以下の役割を果たします。適切なキーボードの表示: 入力欄の種類に応じて、数字キーボード、テンキー、音声入力など、最適なキーボードを表示することができます。入力補助機能の提供: ブラウザは、入力欄の種類に応じて、自動補完、スペルチェック、予測変換などの入力補助機能を提供することができます。


JavaScript で formaction 属性を変更する方法

formaction 属性は、HTML フォームの送信時にデータを処理するファイルの URL を指定します。これは <input> 要素と <button> 要素で使用できます。主な機能フォーム送信時に、formaction 属性で指定された URL にデータを送信します。


これで完璧!HTMLのwrap属性で実現する、見やすく使いやすいテキストエリア

wrap 属性は、textarea 要素で使用され、テキストエリア内のテキストが折り返される際の挙動を制御します。属性値hard: テキストが折り返された際に、改行コード (\n) を挿入します。soft: テキストが折り返された際に、改行コードは挿入せず、スペースで折り返します。



HTML要素のルビー:読み仮名やふりがなを表示する方法

上記コードは、「本」という漢字に「ほん」という読み仮を表示します。<ruby>要素:ルビーの開始と終了を指定します。<rp>要素:ルビープリフィックス(読み仮名前の記号)を指定します。通常は空にします。<rt>要素:ルビーテキスト(読み仮名)を指定します。


アクセスキー、編集可能、コンテキストメニュー:HTML Miscellaneous 属性の基礎

accesskey 属性概要: 特定の要素にキーボードショートカットを割り当て、キーボード操作で素早くアクセスできるようにします。値: 英数字 1 文字またはキーの組み合わせ (例: "a", "Ctrl+Shift+S")例:上記の例では、a要素にアクセスキー "h" を割り当てています。ユーザーが "h" キーを押すと、index


HTMLのabbr要素で略語を分かりやすく表示する方法

abbr 要素は、HTML文書内で略語や頭字語を定義するために使用されます。略語の意味をツールチップやポップアップで表示することで、ユーザーの理解を促進します。属性title: 略語の意味を説明するテキストを指定します。class: スタイルシートでスタイルを指定するために使用します。


画像の説明もバッチリ!アクセシビリティを向上させる属性スコープ

HTML 属性には、主に 2 種類のスコープがあります。要素スコープ: 属性の効果は、属性が属する要素だけに限定されます。これが最も一般的なスコープです。スコープ付き属性: 属性の効果は、特定の範囲の要素に及びます。この範囲は、属性名によって異なります。


HTML Elements の "title" 要素の完全ガイド | SEO対策もバッチリ

HTML Elements の "title" 要素は、Web ページのタイトルを設定するための要素です。これは、ブラウザのタブや検索結果リストに表示されるタイトルとして使用されます。また、スクリーンリーダーなどの支援技術によって読み上げられるため、アクセシビリティの観点からも重要な要素です。