<label>標簽的使用

相信大家寫前端的都寫過這樣的代碼↓↓↓

<input type="radio" name="demo1" id="demo1" value="" /><span>請點擊我</span>

他的顯示效果如下↓↓↓

效果圖1

怎么樣，是不是和你們寫的大同小異，你們認為這就沒問題了么，給你們?nèi)袝r間思考問題
。
。。
。。。
想到了嗎，沒想到我就來公布答案吧。
首先你們可以按一按你們的選項，看看你們在選擇文字時有沒有效果。我敢打賭照著我上面代碼敲的同學肯定是沒效果的。
那么你們再回憶一下，平時你們在使用選項是不是隨便點點就能選中呢？所以，現(xiàn)在有請我們今天的主角<label>!!!(破音！)
在了解<label>標簽的作用之前，我們可以直接先用用它，復制下面的代碼去試試，你就會有最直觀的感受↓↓↓

<label><input type="radio" name="demo1" id="demo1" value="" /><span>請點擊我</span></label>

怎么樣，是不是很神奇，其實<label>標簽的作用，是將它覆蓋范圍內(nèi)的所有元素關(guān)聯(lián)起來。
比如你將兩個buttom按鈕用label標簽框起來，那么在你點擊其中一個按鈕時，另一個按鈕也會被選定，我們就利用這種特性，將點選按鈕的按鈕與他的描述關(guān)聯(lián)起來，這樣就寫出了我們平時常見的單選按鈕了。
那么你可能會說，這東西不寫，又不是不能用，那我懶得寫了，那我要在這里給你普及一個編程人員最基礎(chǔ)的知識：你寫的程序，有99%的時間都不是你在使用，也許你覺得一點瑕疵沒問題，但是你的客戶不會這么想，他們有很大概率因為一點瑕疵而pass掉你的項目，所以像這種小細節(jié)，一定不要因為偷懶而不去做！??！
扯了那么遠，讓我們回到<label>的使用上，也許有的人會問，<label>標簽只有這一種用法嗎？實際上，<label>標簽還可以“遠程”使用。如下圖↓↓↓

效果圖2

<input type="radio" name="demo" id="demo1" value="" />
<p>別點我</p>
<p>別點我</p>
<p>別點我</p>
<p>別點我</p>
<p>別點我</p>
<p>別點我</p>
<p>別點我</p>
<label for="demo1"><span style="color: red;font-weight: bold;">請點我</span></label>

將上面↑↑↑的代碼復制去看看，你會發(fā)現(xiàn)，現(xiàn)在就只有紅色的字關(guān)聯(lián)到了單選按鈕，這是因為，<label>標簽給我們提供了一個for屬性，我們可以通過給這個for屬性賦值，來關(guān)聯(lián)一些布局上隔得很遠的元素，而這個for屬性的值，就是你所要關(guān)聯(lián)的元素的id值。

好了今天又結(jié)束了，照慣例，掌聲呢，撒花呢？？？

我作為一個新手有很多不足的地方，歡迎大家補充或指出不對(??????)??