<select> एलिमेंट का autofocus एट्रिब्यूट
HTML में <select> एलिमेंट का autofocus एट्रिब्यूट एक बूलियन एट्रिब्यूट है जो निर्दिष्ट करता है कि पेज लोड होने पर ड्रॉप-डाउन सूची को स्वचालित रूप से फोकस मिलना चाहिए।
वाक्यविन्यास (Syntax)
<select autofocus>
उदाहरण
नीचे दो ड्रॉप-डाउन सूचियां हैं (स्नातक और स्नातकोत्तर)। पहली सूची में autofocus सेट है:
<!DOCTYPE html>
<html>
<body>
<h1>Profile</h1>
<h2>Educational Qualification</h2>
<section>
<h3>Graduation</h3>
<select autofocus>
<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech">M.TECH</option>
<option value="msc">M.Sc</option>
</select>
</section>
<section>
<p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>
</body>
</html>
आउटपुट
पेज लोड होने पर पहली ड्रॉप-डाउन (Graduation) स्वचालित रूप से फोकस प्राप्त करेगी:
कोड विश्लेषण
दो अलग-अलग सेक्शन के तहत दो ड्रॉप-डाउन सूचियां हैं:
<section>
<h3>Graduation</h3>
<select autofocus>
<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech">M.TECH</option>
<option value="msc">M.Sc</option>
</select>
</section>
पेज लोड पर, हम autofocus एट्रिब्यूट का उपयोग करके एक ड्रॉप-डाउन सूची के लिए ऑटोफोकस सेट कर रहे हैं:
<select autofocus> <option value="bca">BCA</option> <option value="bcom">B.COM</option> <option value="btech">B.TECH</option> </select>
नोट
- प्रति पेज केवल एक एलिमेंट में autofocus होना चाहिए (ब्राउज़र अंतिम को प्राथमिकता देता है)।
- यह मोबाइल उपकरणों पर वर्चुअल कीबोर्ड खोल सकता है।
- एक्सेसिबिलिटी के लिए, सुनिश्चित करें कि ऑटोफोकस अप्रत्याशित रूप से सामग्री को स्क्रॉल न करे।
