fieldset タグを使ったフォームの作成

はじめに

HTMLの<fieldset>タグは、HTML要素をまとめるために使用され、整理された構造のある文書を作成するのに役立ちます。また、<fieldset>タグを使用することで、フォーム内の関連するフィールドをグループ化し、フォームフィールドをより整理された形で表示することができます。

この実験では、<fieldset>タグを使用して構造化された整理されたフォームを作成する方法を示します。

注：index.htmlでコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70756{{"HTML フォームのグループ化"}} html/head_elems -.-> lab-70756{{"HTML フォームのグループ化"}} html/layout -.-> lab-70756{{"HTML フォームのグループ化"}} html/doc_flow -.-> lab-70756{{"HTML フォームのグループ化"}} html/forms -.-> lab-70756{{"HTML フォームのグループ化"}} html/form_group -.-> lab-70756{{"HTML フォームのグループ化"}} html/form_access -.-> lab-70756{{"HTML フォームのグループ化"}} html/custom_attr -.-> lab-70756{{"HTML フォームのグループ化"}} end

HTMLページの作成

index.htmlという名前のファイルを作成し、HTMLページの基本構造を記述します。

<!doctype html>
<html>
  <head>
    <title>Creating a Form with Fieldset Tag</title>
  </head>
  <body></body>
</html>

`<fieldset>`を使ったフォームの作成

HTMLの<body>にフォーム要素を追加し、その後、<fieldset>タグを使って関連するフォームフィールドをグループ化します。また、フォーム要素にlabelタグを追加して、入力フィールドに説明を追加します。

<form>
  <fieldset>
    <legend>User Details</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="firstname" /><br /><br />
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lastname" /><br /><br />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" /><br /><br />
  </fieldset>
  <fieldset>
    <legend>Account Details</legend>
    <label for="uname">Username:</label>
    <input type="text" id="uname" name="username" /><br /><br />
    <label for="pass">Password:</label>
    <input type="password" id="pass" name="password" /><br /><br />
  </fieldset>
  <input type="submit" value="Submit" />
</form>

上記のコードでは、2つの<fieldset>に構造化されたフォームが作成されます。最初の<fieldset>はユーザーの個人情報をグループ化し、2番目の<fieldset>はアカウント情報をグループ化します。フィールドに関する文脈を提供するためにlabelタグを使用したことにご注目いただけるでしょう。

CSSの追加

CSSを使用して<fieldset>にスタイルを適用し、適切なデザインを与えることができます。境界線、背景色、いくらかのパディングを追加して、<fieldset>をより良く見せることができます。

<style>
  fieldset {
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    margin: 5px;
    background-color: #f8f8f8;
  }
</style>

ブラウザでHTMLファイルを開いて、フォームを表示してテストしてみましょう。

まとめ

<fieldset>タグは、整理された構造のある文書を作成します。フォームの作成に役立ちます。入力フィールドに関する文脈を提供するためにlabelタグを使用します。<fieldset>タグは、関連するフォームフィールドをグループ化し、関連するフィールドの周りに境界線を追加します。最後に、CSSスタイリングにより<fieldset>にデザインが与えられ、見た目が良くなります。

HTML フォームのグループ化

はじめに

Skills Graph

HTMLページの作成

<fieldset>を使ったフォームの作成

CSSの追加

まとめ

`<fieldset>`を使ったフォームの作成