HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでフィールドセット（fieldset）を表示する方法

HTMLの<fieldset>タグは、関連するフォーム要素をひとつのグループにまとめて表示するための要素です。<fieldset>タグと<legend>タグを組み合わせて使うことで、グループに見出しを付けることができ、ユーザーにとって格段に理解しやすいフォームを作成できます。

fieldsetタグの基本

<fieldset>タグで囲まれた要素は、デフォルトで細い枠線で囲まれて表示されます。また、直後の<legend>タグに記述したテキストは、その枠線上にグループの見出しとして表示されます。

特に項目が多い入力フォームでは、個人情報・配送先・支払い情報など、目的ごとに入力欄をまとめることで視認性が大きく向上します。

サンプルコード

以下のコードを実行すると、HTMLでフィールドセットを表示することができます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML fieldset Tag</title>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>詳細情報</legend>
                学籍番号： <input type = "number"><br />
                科目：<input type = "text"><br />
            </fieldset>
        </form>
    </body>
</html>

実行結果のポイント

  • 「詳細情報」という見出しが枠線の左上に表示されます。
  • 学籍番号と科目の入力欄が、ひとつのグループとしてまとめられます。

便利な属性とスタイリング

<fieldset>タグにはdisabled属性を指定できます。これを設定すると、グループ内のすべてのフォーム部品が一括して無効化されるため、条件によって入力欄を使用不可にしたい場合に非常に便利です。

また、デフォルトの枠線はCSSのborderプロパティで自由にカスタマイズできます。border-radiusを併用すれば角丸のデザインにすることも可能なので、サイトのデザインに合わせて調整するとよいでしょう。

  1. HTMLでblockquoteタグ（ブロッククォート）を使う方法をわかりやすく解説

    blockquoteタグとは <blockquote>タグは、他のソースから引用した長い文章（ブロックレベルの引用）を示すために使用されるHTML要素です。このタグで囲まれた部分は「引用セクション」として意味づけられ、多くのブラウザではインデント（字下げ）されて表示されます。 なお、<blockquote>タグの中に直接プレーンテキストを置くのは避け、<p>などのブロックレベル要素を含めてマークアップすることが推奨されています。 cite属性で引用元を指定する <blockquote>タグにはcite属性が用意されており、HTMLドキュメント内

  2. HTMLでテキストを右から左（RTL）に表示する方法【CSSのdirectionプロパティ】

    HTMLでテキストを右から左（Right-to-Left：RTL）に表示するには、CSSのdirectionプロパティを使用します。style属性と組み合わせることで、特定の要素に対してインラインスタイルとして文字の方向を指定できます。 directionプロパティに指定できる値 directionプロパティでは、以下の3つの値を設定できます。 No.値と説明 1ltr左から右へ記述する（デフォルトの方向） 2rtl右から左へ記述する 3initial初期値に戻す style属性を使った指定方法 テキストを右から左に表示する場合は、style属性でCSSのdirectionプロパテ