はじめに
HTML の<fieldset>タグは、HTML 要素をまとめるために使用され、整理された構造のある文書を作成するのに役立ちます。また、<fieldset>タグを使用することで、フォーム内の関連するフィールドをグループ化し、フォームフィールドをより整理された形で表示することができます。
この実験では、<fieldset>タグを使用して構造化された整理されたフォームを作成する方法を示します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。
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>にデザインが与えられ、見た目が良くなります。
