html5メモ fieldsetタグでinputタグをまとめてみる

プログラミング

野暮用で似たようなことをしようとしたんだけど、html5で試してみる。

htmlページはこんな感じ。

<!doctype html>
<html>
    <!-- header -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <!-- body -->
    <body>
        <!-- input -->
        <fieldset>
            <legend>answer</legend>
            <p><label><input type="radio" name="answer" value="yes" checked />Yes</label></p>
            <p><label><input type="radio" name="answer" value="no" />No</label></p>
        </fieldset>
    </body>
</html>

やるこた、こんな感じ。

  1. <fieldset>の子要素として<input>を定義する
  2. タイトルを付けたい場合は<fieldset>の子要素に<legend>を定義する

Firefoxで確認。
Windowsとかの設定ダイアログあたりでありそうな、見出しと囲いが表示される。

ちなみに、<fieldset>のdisabledって属性値をdisableって設定すれば、<fieldset>の子要素はまとめて非活性にできちゃう。
こんな感じで書く。

<fieldset disabled="disable">

と、こんな感じになる。

ま、メモってことで。

[amazonjs asin="4883378152″ locale="JP" title="HTML5 & CSS3ステップアップブック"]

プログラミングdisable,disabled,fieldset,firefox,HTML5,input,グレーアウト,タグ,ブラウザ,属性,抑制,非活性