水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > label要素でフォームを制御って……

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で角丸という話を思い出してしまった……。

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

最近の日記

関わった本など

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターンデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践ウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)

その他サイト