スタイル付きラベル付きのフォーム
CSSを使用してフォームラベルのスタイルを設定する方法。 Webページフォームのさまざまなフィールドと入力領域にラベルを付けるために使用されるフォーム要素は、label要素です。 カスケードスタイルシートルールを使用してスタイルを設定できます。
ステップ1
イントロダクションの画像に表示されるようにラベル要素のスタイルを設定するには、「for」属性を持つlabel要素を使用する必要があります。 さらに、「input」要素自体を追加する前に、label要素を閉じる必要があります。 図に示されている完全なフォームのHTML。
今日のビデオ
ステップ2
ラベル要素のスタイルを設定するために、ラベルをブロックレベルの要素として表示し、左にフロートさせました。 次に、入力フィールドがすべてラベルから一定の距離になるように、ラベルに幅を割り当てました。 色を割り当てて、テキストを太字にしました。 生成されたコンテンツを使用して、ラベルの後にコロン（:)を追加しました。 （コロンはすべてのブラウザに表示されるとは限りません。）
CSSは次のとおりです。
ラベル{色：＃B4886B; フォントの太さ：太字; 表示ブロック; 幅：150px; フロート：左; }ラベル：後{コンテンツ： "："}
ステップ3
完全を期すために、ラベル要素は境界線付きのフィールドセットで囲まれているため、フィールドセットのスタイル設定に使用されるCSSも示します。
これがそのCSSです：
フィールドセット{ボーダー：1pxソリッド＃CCA383; 幅：400px; 背景：＃FFE8EF; パディング：3px; }フィールドセットの凡例{背景：＃CCA383; パディング：6px; フォントの太さ：太字; }
ステップ4
ラベル要素のスタイルを設定するために、他の多くのことを行うことができます。 私の例はそれを行うための1つの方法にすぎません。
フォームHTML
必要なもの
HTMLの実用的な知識
CSSの実用的な知識
