スタックテーブルとは何ですか? CSS でスタックフォームを作成する方法は?

CSS は、スタイルシート言語と呼ばれる言語の独特なクラスに属します。これは主に、Web ページの表示を定義するために使用されます。 HTML ではページの構造を指定できますが、スタイル設定には CSS が使用されます。そうしないと、非常に魅力のない Web サイトになってしまうでしょう。

CSS に重点を置くことは、特にユーザーエクスペリエンスを向上させる場合、Web サイトの魅力を高めるための優れた方法の 1 つです。この方法でトラフィックを増やすこともできます。初心者の場合は、積み重ね形式を使用できます。 CSS を使用して HTML でスタックフォームをすばやく作成する方法を見てみましょう。

スタックテーブルとは何ですか?

スタックフォームを使用すると、ラベルと入力を水平パターンで配置するのではなく、重ねて配置できる特殊なフォームを作成できます。

やり方は次のとおりです。

HTMLコード

情報を処理するために HTML 要素 <form> を使用します。関連するフィールドにラベルを付け、関連する入力フィールドを割り当てます。この例では、フォームの入力タイプテキストとともに、ユーザーにフルネームとメールアドレスの入力を求め、業界を選択できるように ID を選択してドロップダウンメニューを作成します。

 <!DOCTYPE html>
<html>
<本文>
<h3>スタックテーブルとは何ですか?</h3>
<p>スタックフォームを作成する方法は次のとおりです。 </p>
<div class="コンテナ">
<label for="fullname">フルネーム</label>
<input type="text" id="fullname" name="firstname" placeholder="フルネームを入力してください">
<label for="email">メールアドレス</label>
<input type="text" id="email" name="email" placeholder="メールアドレスを入力してください">
<label for="dept">部門</label>
<select id="国" name="国">
<option value="IT">情報技術</option>
<option value="CS">カスタマーサポート</option>
<option value="Sales">販売</option>
</選択>
<input type="submit" value="送信">
</フォーム>
</div>
</本文>

ただし、このコードを実行すると、フィールドが垂直に積み重ねられていない単調なフォームが生成されるだけです。ここで CSS を追加する必要があります。

CSSコード

次に、別のスタイルシートを作成し、それを HTML の body タグの前に追加します。

 <head> <link rel="スタイルシート" href="StackedForm_CSSPart.css"> </head>

次に、HTML の本文、入力タイプ、コンテナーを選択し、CSS を使用してスタイルを設定します。これには、font-family、width、padding、margin、display、border などのさまざまな CSS プロパティを試し、好みの値を追加することが含まれます。こうすることで、あなたの好みにぴったり合った積み重ねテーブルが完成します。ここに例があります。

体 {
フォントファミリー: Calibri;
}
入力[type=text]、{を選択
幅: 25%;
パディング: 12px 20px;
マージン: 8px 10;
表示: リスト項目;
境界線: 4px ダブル #39A9DB;
境界線の半径: 8px;
ボックスのサイズ: 境界線ボックス;
}
入力[type=submit] {
幅: 25%;
背景色: #F8E2E6;
色: #0000FF;
パディング: 12px 18px;
マージン: 20px 0;
境界線: なし;
境界線の半径: 6px;
カーソル: ポインタ;
}
div.コンテナ{
境界線の半径: 10px;
背景色: #39A9DB;
パディング: 40px;
}

CSSでスタックフォームを作成できるようになりました

この記事では、CSS でスタックされたフォームを作成する方法を学びました。練習を重ねることで、フォームを改善し、ウェブサイトをよりユーザーフレンドリーにすることができます。展示プロジェクトを通じて日々 CSS スキルを磨き、スタイリッシュな Web デザイナー、そしてより効率的な Web 開発者になりましょう。

<<: ipconfig とは何ですか? また、ネットワーク管理のためにこのコマンドを実行するにはどうすればよいですか?

>>: robot.txt とは何ですか?ウェブサイトをインデックスするためにどのように使用しますか?