[48] フォームの部品をグループ化して見やすく <fieldset><legend>

最終更新日:-0001年11月30日  (初回投稿日:2013年03月12日)

フォームの部品用の要素に行く前に、
その部品たちをグループ化して整理する要素を見ておきましょう。
<fieldset>要素は、部品の要素をグループにまとめます。
<legend>要素は、そのグループにタイトルを付ける役割の、<fieldset>の子要素です。

これらを使えば、ユーザにわかりやすいし、作る側もCSSでレイアウトしやすくなり便利です。
<div>や<p>なんぞで整理するより、こっちのほうが断然使い勝手がいいです。
どちらも以前からある要素です。

使用する要素 <fieldset>
<legend> (fieldsetのタイトル) </legend>
</fieldset>
fieldsetの属性
一覧はこちら
form :親の<form>のID名を呼び出して関連づける
name :<fieldset>に固有の名前をつける
disabled :使用不可の状態にする

「fieldset」とは、そのまんま、フィールドのセット。
「legend(レジェンド)」は、「伝説なんてかっこいい…!」なんて思ったら、「題名」とか「キャプション」の意味もあるそうで、この場合はこっちでしょうね。

<fieldset>と<legend>を使ってみよう

下記のように <fieldset>はフォームの部品をグループ分けするのに使います。
必要なら<legend>でグループのタイトルを表示します。
<legend>は <fieldset>の中に1つしか入れられません。(ま、2つもいらんけどね。)

<form method="post" action="sample.cgi">
<fieldset>
<legend>お客様情報</legend>
お名前 : <input type="text" name="name" required>
<!-- 〜省略〜 -->
</fieldset>

<fieldset>
<legend>ご注文内容</legend>
ご希望商品1 : <input type="text" name="code1" required>
<!-- 〜省略〜 -->
</fieldset>
</form>

ブラウザのデフォルトで<fieldset>はborderで囲まれます

<fieldset>を使えば、ブラウザのデフォルトで周りに border(囲み罫)が表示されます。
<legend>でつけたタイトルは、その罫線の上に乗っています。
(この罫の上に乗ってるテキストって、CSSで作るのはけっこう大変ですよね)

お客様情報

お名前:

ご回答:

<fieldset>の border, paddingなどや、<legend>の text のスタイルなどは、CSSで指定してサイトのデザインに沿うように調整します。
<div>や<p>などを使うより、HTML文書的に正しいし、簡単だし。活用しましょう。

<fieldset>の属性一覧

form="<form>要素のID"  new
このform属性はHTML5からの新属性です。これを使えば<fieldset>要素を<form>要素の外に出すことができます。
下記のように<form>要素にID名を付けておき、<fieldset>の form属性でそのIDを呼び出します。これでこの<fieldset>は、ID「ex1」のフォームの子要素となります。
<fieldset form="ex1">
(内容省略)
</fieldset>
<!-- fieldset ごと出せる ↑ -->
<form method="post" action="sample.cgi" id="ex1">
<input type="submit" value="送信する">
</form>
「form属性」については「[47] form要素で「データ送信可能なフォーム」である事を示そう」の「HTML5からの変更点」もご覧ください。
name="<fieldset>の名前"
<fieldset>に固有の名前をつけます。
<fieldset>に名前がついてれば、Javascriptなどでその<fieldset>内の部品をコントロールできます。
<fieldset name="example1">
disabled(または「disabled=""」「disabled="disabled"」 )
値は disabled でも省略でもOK。<fieldset>の中の部品が全部が「使用不可」になり、入力や選択ができなくなります。一括指定できて便利ですね。
<fieldset name="example1" disabled>
このほかグローバル属性も使います
当然ながら、id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

※ちなみに<legend>で使える属性は「グローバル属性」だけです。

HTML5のフォームサンプル

HTML5での新要素を使ったサンプルを作りました。
このサンプルでも<fieldset>と<legend>を使ってフォームを整理しています。

クリックするとサンプルHTMLで見られます。
Sample46_HTML5のフォーム (サンプル)

HTML5からの新要素は、今は Operaほぼ対応しているようです。Chromeもまあまあ検討。
また、IE10 onWin8 も対応しているそうです。
Firefoxは、部分的に対応。
Safari は、これからってかんじ。
(2013年3月記)

次回予告

次からいよいよ、フォームの部品を作っていきましょう。
まずは<input>要素。これはフォーム部品でいちばんよく使う要素です。
type属性の値によって、それこそ、いろ〜んなタイプ(部品)に変化する要素です。
HTML5から、type属性の値や、他の属性も増えて、さらに色々できるようになりました。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.