html中的label標簽使用方法
發表時間:2024-05-08 來源:明輝站整理相關軟件相關文章人氣:
[摘要]這次給大家介紹的是html中的label標簽使用方法,我們都知道一個完整的表單是由表單標簽<form></form>與其中包裹的各種表單控件組成的,那么LABEL標簽就是一種常見的表單控件了。先舉個例子:[html] view plain copy<label for...
這次給大家介紹的是html中的label標簽使用方法,我們都知道一個完整的表單是由表單標簽<form></form>與其中包裹的各種表單
控件組成的,那么LABEL標簽就是一種常見的表單控件了。
先舉個例子:
[html] view plain copy
<label for="email">E-mail:</label>
<input type="text" id="email">
表單控件都是內聯元素所以他倆會在一行顯示。在網頁中當我們點擊E-mai字樣或文本框時都會在文本框中出現光標,這個就是label標簽的功能了。說白了label標簽就是他所關聯的表單控件的延伸,即鼠標點擊了他,就會出現和點擊他所關聯的表單控件一樣的效果。而這前提是label的for屬性的屬性值與想要關聯的表單控件的id一樣。
若不想用id和for關聯還可用第二種方法。
[html] view plain copy
</pre><pre name="code" class="html"><label>E-mail:<input type="text"></label>
效果是和以前一樣的。
當然其他表單控件也可以與label關聯。比如下面的例子:
[html] view plain copy
<label for="a">a:</label> <input type="radio" id="a"><br>
[html] view plain copy
<pre name="code" class="html" style="font-size: 14px;"><label for="b">b:</label> <input type="radio" id="b"><br>
[html] view plain copy
<label for="c">c:</label> <input type="radio" id="c">
那你可能說,這label標簽好想也沒多大用嘛。
嗯,當然有用。除了增強用戶體驗外,還為行動不便人士上網提供了便利。比如說,視力障礙者是借助“網頁朗讀器”發出的聲音來瀏覽網頁的,若沒有label標簽的關聯,上網者就在腦海中不能想象出那種對應性,不能很好理解網站表單所想表達的內容。再比如,肢體有缺陷的上網者對于鼠標的控制是很辛苦的,運用label后點擊的目標變大了,有利于操作。
So,一個真正的好的頁面既要能跨瀏覽器,還要能適配各種大小屏幕的設備,還應該對各類上網者(無論是老年人,還是有缺陷的人)提供便利。
html中的label標簽使用方法就這么多,有需要的朋友可以保存一下,也請大家持續關注本站的其他更新。
相關閱讀:
HTML里的命名規則
怎樣隱藏溢出DIV邊框的內容
怎么用CSS修改鼠標樣式
以上就是html中的label標簽使用方法的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。