人気ブログランキング | 話題のタグを見る

label のfor属性

HTML の label 要素の属性に for というものがあるが、意味が分からなかった。for 属性の値を他の input 要素の id と同じ値にしておくと、その要素と label 要素が連動するのだそうだ。

次のようなスクリプトで試してみたら、ラベルの文字をクリックすると checkbox の on off の切り替えができた。便利なものだ。

<input type="checkbox" name="" id="check1">
<label for="check1">label</label>

HTML 5 の input 要素には type="color" というカラーコードを取得するためのものがある。つぎのようなコードでカラーパレットから選択した色のコードを取得できる。

<input type="color" onchange="d_ocument.getElementById('color_code').value = this.value;">
<input type="text" id="color_code">

こういう要素的な組み合わせを試して知識にしておくとよいのだろう。昔に比べると、JavaScript でできる表現の範囲がどんどん広がっているので扱うのが楽しくなってくる。HTML edit E を使うと、このようなスニペットの実験が手軽にできるので面白い。Haskell の ghci もそうだが、小さいプログラムの結果が即座にわかるという対話的な環境は、プログラムすることの楽しさを教えてくれる。

このようなスニペットの知識は、将棋における詰将棋のようなものだ。とにかくたくさんインプットしておかなければ役に立たない。しかし、どんな小さなプログラムでも動いたときのうれしさは格別だ。JavaScript もその楽しさを手軽に味わえるところまで環境が整ってきている気がする。


by tnomura9 | 2016-01-11 15:24 | JavaScript | Comments(0)
<< アコーディオンメニュー HTML edit E >>