labelとは
- ここで説明するlabel とは次の語句からなるHTMLの要素です。
- label
- 読み: ラベル、レーベル
意味: 名札、荷札、標識、付箋、商標
label要素の概要
この要素はページに配置されたユーザーインターフェースの項目やキャプションを表します。
具体的なもので言えばinput要素のcheck型やradio型に付随するように要素を配置してチェック項目の説明を表すことになります。 ここではinput要素を中心に説明していますが、実際には次に挙げる要素にラベルを付けることができます。
この要素には、開始タグと終了タグが必要です。
<label> </label>
サンプルコードと実行結果
このサンプルではinput要素のcheck型とradio型に付随するlabel要素を作成してみました。 なお、CSSでスタイルを設定していますのでデザインの仕様はCSSのコードを参考にしていただきますようお願いします。
サンプルコード: CSS
<style>
input{
vertical-align: text-bottom;
width: 20px;
height: 20px;
}
input:checked + label{
background-color: moccasin;
}
label{
border-radius: 5px;
}
</style>
サンプルコード: HTML
<body>
<p><input type="checkbox"><label>: これがラベルテキストです。</label>
<p><input type="radio" name="namRatio"><label>: これがラベルテキストです。</label></p>
<p><input type="radio" name="namRatio"><label>: これがラベルテキストです。</label></p>
</body>
- 02: input要素checkbox型とlabel要素 (チェックボックスとラベルの組み合わせです。)
- 03: input要素radio型とlabel要素 (ラジオボタンとラベルの組み合わせです。)
- 04: input要素radio型とlabel要素 (ラジオボタンとラベルの組み合わせです。)