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

HTMLのbutton要素におけるform属性の使い方を徹底解説

<button>要素のform属性は、そのボタンがどのフォームに属するかを指定するための属性です。通常、送信ボタンは<form>タグの中に配置する必要がありますが、form属性を使えば、フォームの外側に置いたボタンでも特定のフォームと関連付けることが可能になります。

form属性の基本構文

form属性の書き方は以下の通りです。

<button form="id">

ここで指定する「id」は、ボタンを関連付けたいフォームのIDです。<form>要素に設定されたid属性の値と一致させる必要があります。

form属性の使用例

それでは、実際に<button>要素のform属性を使ったサンプルコードを見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Points</h2>
<form action="" method="get" id="form1">
   Player: <input type="text"><br>
   Rank: <input type="number"><br>
   Points: <input type="number"><br>
</form>
<button type="submit" form="form1" value="Submit">Click to Submit</button>
</body>
</html>

このコードを実行すると、以下のような画面が表示されます。フォームの外にあるボタンが、フォームの一部として機能していることがわかります。

HTMLのbutton要素におけるform属性の使い方を徹底解説

コードの解説

まず、フォームを作成し、その中に入力要素を追加しています。

<form action="" method="get" id="form1">
   Player: <input type="text"><br>
   Rank: <input type="number"><br>
   Points: <input type="number"><br>
</form>

このフォームには「form1」というIDが設定されています。次に、フォームの外側に送信ボタンを配置します。

<button type="submit" form="form1" value="Submit">Click to Submit</button>

ポイントは、ボタンのform属性に「form1」というフォームのIDを指定している点です。この指定により、ボタンがHTML上のどこに配置されていても、「form1」のフォームに属することになります。これこそが、<button>のform属性による機能です。

まとめ

form属性を活用すれば、レイアウトの自由度が高まり、フォームから離れた位置にボタンを設置しても正しく送信処理を行えます。デザインの都合でフォーム内にボタンを置けない場合などに特に便利な属性なので、ぜひ活用してみてください。

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

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

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

    HTMLのaction属性は、フォームが送信されたときに、入力データをどのURLへ送るかを指定するための属性です。フォームを作成するうえで最も重要な属性の一つであり、データの送信先となるサーバーサイドのスクリプト(例：PHPファイルなど)を指定します。action属性の基本構文action属性の基本的な書き方は以下のとおりです。<form action=URL></form>action属性の値には、絶対URLまたは相対URLを指定できます。ここで指定したURLに対して、フォームに入力されたデータが送信されます。HTMLフォームaction属性の使用例それでは、実際にa