formの入れ子・複数使用・formタグが閉じられる現象に困ったら・・・form属性を知ろう

formの入れ子・複数使用・formタグが閉じられる現象に困ったら・・・form属性を知ろう

form属性に関する説明こんにちは!ケインコスゲです。

今回は、formタグに関するちょっとしたお話です。

プログラミングやコーディングをしていると良く出てくるのが「form」タグとその仲間たち(inputタグで表現されるパーツですね)ですよね。

今回はそんなformタグの中でちょっとニッチかもしれない「form属性」について書いてみたいと思います!

form属性とは何か

まずは、聞き覚えのない・聞きなれないという方にform属性とはどんなものなのかについて説明してみたいと思います!

form属性に関する説明

form属性は、1つのページやファイルの中でformが複数ある場合、inputタグやselectタグなどがどのformに所属するものなのかを明示的に示すための属性になります。

「そもそも1つのページやファイルの中でformが複数ある場合なんて存在するのだろうか・・・」と思われた方もいらっしゃるかと思います。

実際にあるんですね、そういうケース。

1ファイルにformが複数存在するケース

例えば、何かのWebアプリケーションの管理画面で、特定のデータを更新 or 削除したいという部分を作ると、実例として上記の画像のようなものが出来上がるかと思います。

更新を押すと入力したデータを更新する、削除を押すと当該データを削除する、こんなアプリケーションの管理画面を作る時にはformタグを複数使うことになるわけなんですね。

form属性の実際の使い方

では、実際にどんな風にしてform属性を使えばいいのかを見ていきましょう。

こういうものはコードの実例をお見せした方が早いと思うので、早速掲載させていただきますね!

上記のコードのように、formタグ1つ1つにidを使って固有の名前を指定してあげます。

そして、そのあとにそれぞれのformのパーツに該当する部分(inputやselect)にform属性を設定し、関連あるformのid名と同じ名前をform属性の中身に指定してあげるわけですね!

使い方としてはとってもシンプルになっています!

ちなみに、form属性を使えば上記コードのように「formタグに囲まれていないパーツ(inputやselect)も特定のformに関連させることができる」ようになるため、formタグの外側にinputタグがあるという見慣れない状態のコードが出来上がるわけです!

これも一応問題なく使えるわけなんですね・・・

まとめ

ということで、今回はform属性についてご紹介させていただきました!

元々今回のブログを書くにいたった経緯としては、「formタグが勝手に閉じられる現象に陥っているコード」を発見し、それをどうにか直してformを機能させたい!ということで調べたというのものがありました!みなさんも同じ状況で困ったらぜひform属性を使ってみてくださいね!

それにしても、久しぶりにブログを書くと、書く勘みたいなものが鈍っているのがわかりますね!笑

また定期的に書いたりブラッシュアップしたりして、わかりやすいブログを心がけていけたらなと思っています!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする