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

【HTML】form属性で要素が属するフォームを指定する方法

HTMLのform属性とは？

HTMLでは、form属性を使用することで、要素がどのフォームに属するかを指定できます。通常、フォーム部品は<form>タグの中に記述しますが、form属性を使えば、タグの外側に配置したボタンや入力フィールドでも、特定のフォームと関連付けることが可能です。

form属性のメリット

  • フォームのマークアップとボタンの配置を分離できるため、レイアウトの自由度が向上する
  • ページのデザインに合わせて、送信ボタンを任意の場所に設置できる

サンプルコード

以下のコードを実行して、form属性の動作を確認してみましょう。この例では、フォームの外側にある送信ボタンが、ID「myform」を持つフォームに関連付けられています。

<!DOCTYPE html>
<html>
    <body>
        <form action="" method="get" id="myform">
            科目ID：<input type="number" name="subid"><br>
            科目名：<input type="text" name="subname"><br>
            学生数：<input type="number" name="stcount"><br>
        </form>
        <button type="submit" form="myform" value="Submit">クリック</button>
    </body>
</html>

コードの解説

上記の例では、<button>要素が<form>タグの外側に配置されている点がポイントです。form="myform"という属性を指定することで、IDが「myform」のフォームと関連付けられています。

この状態でボタンをクリックすると、あたかもフォーム内部にあるボタンであるかのように動作し、フォーム内のデータ（科目ID、科目名、学生数）がGETメソッドで送信されます。

まとめ

form属性を活用すれば、HTMLの構造に縛られずにフォームと関連要素を柔軟に配置できます。複雑なレイアウトのページでフォームを実装する際に、ぜひ活用してみてください。

  1. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値

  2. HTML DOM フォームの name プロパティの使い方を徹底解説

    HTML DOM のフォーム（Form）オブジェクトが持つ name プロパティは、form 要素の name 属性と連動しています。このプロパティを使うことで、フォームの名前（name 属性の値）を取得したり、新しい値を設定したりすることができます。つまり、JavaScript から動的にフォームに名前を付けたり、既存の名前を変更したりできるのです。 構文 name プロパティの基本的な使い方は以下の通りです。 フォーム名を設定する場合 formObject.name = name ここで指定する name には、フォームに付けたい名前を文字列で記述します。 サンプルコード それでは、For