label要素でフォームを制御って……

2008年9月3日(水曜日)

label要素でフォームを制御って……

JavaScript無しでフォームをコントロール (blog.ohgaki.net)。

言われてみれば、そう言えばそんな機能があったね、と思うような機能はよくあります。
JavaScript無しでフォームを制御する方法はHTML4が策定されている時に追加された機能です。

……最初はまったく意味が分からなかったのですが、これ、label要素の話ですか!?

label要素が「言われてみれば、そう言えばそんな機能があったね、と思うような機能」であり、「JavaScript無しでフォームを制御する方法」である、というのは想像を絶していました。少なくとも、Web屋では絶対に考えられない発言ですね。今世紀に入ってから作られたフォームでは、label要素が使われていないものの方が珍しいのではないかと思いますが……。

※まともにWCAGなどを読んでいる人が作る場合は、という限定がつくかもしれませんが。

なんというか、住んでいる世界が違うのかなぁ。

……ちなみに、label要素を使わなくても、以下のようなものを使えばサンプルと同じようなことができます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<title>submit test</title>
<style type="text/css">
body,p,button{
    border:none;
    background:transparent;
    text-align:left;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
button{
    padding:1em 1em 100% 1em;
}
</style>
<form action="http://www.google.com">
<p><button type="submit">
foo bar baz<br>
foo bar baz<br>
foo bar baz<br>
foo bar baz<br>
foo bar baz<br>
</button></p>
</form>

これは HTML としてvalidなものになっていますので、個人的にはこちらの方をプッシュしたいですね。:-)

「スクリプト無効でも、submitするつもりもないのにsubmitしてしまう」という例でしたら、昔IPAに届け出たCSRFのPoCも参考になるかと思います。この例では、フォームのsubmitボタンがテキストリンクに見えるようにになっています。

世にマークアップエンジニアと呼ばれている人々なら、この手のものはいくらでも思いつくはずです。Web屋をやっていると、UIデザインの都合でフォームコントロールをリッチにしたい、などという場面がしばしばあるものです。本物のフォームコントロールを隠してリッチなボタンを置く、というような手法もかなり研究されていますし、特に驚くようなものではないですね。

※関係ありませんが、大昔の、fieldsetで角丸という話を思い出してしまった……。

「label要素でフォームを制御って……」にコメントを書く

関連する話題: Web / セキュリティ / HTML

前(古い): 頭脳戦艦ガルと同ジャンルのゲーム
次(新しい): 運用終了後に放置でやられてしまったケース