HTML labelタグ - IT生活向上ブログ

HTML labelタグ

labelタグはフォームの部品と関連付けをする事ができる。

<label
for="名前">
accesskey="アクセスキー">
文字列
</label>

forで指定した名前をフォーム部品のidに指定。名前を同じにする。accesskeyはショートカットキーの設定です。

たとえばラジオボタンの場合。
年齢は?
<input type="radio" name="age" value="20" id="age_1">
<label for="age_1">20代</label>
<input type="radio" name="age" value="30" id="age_2">
<label for="age_2">30代</label>
<input type="radio" name="age" value="40" id="age_3">
<label for="age_3">40代</label>
<input type="radio" name="age" value="50" id="age_4">
<label for="age_4">50代</label>

のように記述すると下記のようになります。

<style>label { cursor : hand ; }</style>
↑別途このようにCSSでカーソルを指定するとわかり易いと思います。

年齢は?
↑こんな感じになる。ボタンをクリックしてなくても、関連付けた文字列をクリックすれば、選択状態になります。テキストタイプに使えばフォーカスが移るようになります。

カテゴリ:HTML・CSS
タグ:HTML

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/01/22 21:02 | Comment(0) | TrackBack(1) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

桴瑰㨯⽷睷⹶慬牡猭灬慧攮湥琯慧敬敳猭浡汥⵲敶楥眯
Excerpt: hs式썵彏
Weblog: 桴瑰㨯⽷睷⹶慬牡猭灬慧攮湥琯慧敬敳猭浡汥⵲敶楥眯
Tracked: 2016-11-29 18:37
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。