Focus
जब हमारे Web Page पर बहुत सारे Form Controls होते हैं अथवा बहुत सारे Links होते हैं, तब हम इन Controls या Links के बीच Navigation करने के लिए Tab / Shift+Tab Keys का प्रयोग कर सकते हैं। जब हम Navigation करते हैं, तब एक Highlighted Border द्वारा हम ये समझ पाते हैं कि हम Currently कहां पर हैं। इसी Highlighted Border को Focus कहा जाता है। Web Page पर दिखाई देने वाले सभी Elements Focus Receive करने में सक्षम नहीं होते हैं। केवल वे ही Elements Focus Receive कर सकते हैं, जिनसे User Interact कर सकता है। Web Page पर स्थित Controls केवल तीन ही स्थितियों में Focus Receive कर सकते हैं:
- जब किसी Control को Mouse से Point किया जाता है।
- जब Keyboard से Tab/Shift+Tab Key को Press किया जाता है। Form पर दिखाई देने वाले विभिन्न Controls के Focus प्राप्त करने के क्रम को भी हम तय कर सकते हैं।
- किसी Shortcut Key Combination का प्रयोग करके। इस तरीके में हमें accesskey Attribute को उपयोग में लेना जरूरी होता है।
Tabbing Order
यदि हम Focus के Move होने के क्रम को तय करना चाहें, तो हम tabindex Attribute का प्रयोग करके ये काम कर सकते हैं। इस Attribute में हम 0 से 32767 तक के मान दे सकते हैं, जो कि Controls पर Focus के Move होने के क्रम को तय करते हैं। जिस Element के tabindex Attribute का मान कम होता है, Focus वहां पहले पहुंचता है और जिस Element के tabindex Attribute का मान अधिक होता है, Focus वहां बाद में पहुंचता है। User जब भी Tab Key को Press करता है, Focus Next Highest Tabbing Order पर पहुंच जाता है।<a>, <area>, <button>, <input>, <object>, <select> व <textarea> Elements tabindex Attribute को उपयोग में ले सकते हैं। Tabbing Order के काम करने के तरीके को हम निम्न उदाहरण द्वारा समझ सकते हैं:
<html> <body> <form action="http://www.example.com/tabbing.asp" method="get" name="frmTabExample"> <input type="checkbox" name="chkNumber" value="1" tabindex="3" /> One<br /> <input type="checkbox" name="chkNumber" value="2" tabindex="7" /> Two<br /> <input type="checkbox" name="chkNumber" value="3" tabindex="4" /> Three<br /> <input type="checkbox" name="chkNumber" value="4" tabindex="1" /> Four<br /> <input type="checkbox" name="chkNumber" value="5" tabindex="9" /> Five<br /> <input type="checkbox" name="chkNumber" value="6" tabindex="6" /> Six<br /> <input type="checkbox" name="chkNumber" value="7" tabindex="10" /> Seven <br /> <input type="checkbox" name="chkNumber" value="8" tabindex="2" /> Eight<br /> <input type="checkbox" name="chkNumber" value="9" tabindex="8" /> Nine<br /> <input type="checkbox" name="chkNumber" value="10" tabindex="5" /> Ten<br /> <input type="submit" value="Submit" /> </form> <body> <html>
इस Code के कारण जब हम इस Web Page पर Tab Key को Press करते हैं, तब Focus निम्न क्रम में Move होता है:
4, 8, 1, 3, 10, 6, 2, 9, 5, 7
हमें tabindex Attribute में हमेंशा 1 या अधिक से मान Assign करने की शुरूआत करनी चाहिए, क्योंकि जब हम किसी Control को कोई Tabindex Set नहीं करते हैं, तब By Default उनका Tabindex 0 होता है और जब एक से ज्यादा Controls का Tabindex एक समान होता है, तब उन पर Focus उस क्रम में Move होता है, जिस क्रम में वे Web Page पर Appear होते हैं।
यानी जो Control पहले Appear होता है, उस पर Focus पहले आता है, जबकि जो Control बाद में Appear होता है, उस पर Focus बाद में आता है। एक बात ध्यान रखने वाली ये है कि जब कोई Control Disabled होता है, तब वह किसी तरह का कोई Focus Receive नहीं करता है और Tabbing Order में भी भाग नहीं लेता है। (focus and tabindex HTML)
ये Article इस वेबसाईट पर Selling हेतु उपलब्ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी।
HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
