इनपुट प्रकार = "टेक्स्ट" बनाम इनपुट प्रकार = एचटीएमएल 5 में "खोज"

Question

मैं HTML5 के लिए नया हूं क्योंकि HTML5 के नए फॉर्म इनपुट फ़ील्ड के साथ काम करना शुरू कर दिया है। जब मैं फॉर्म इनपुट फ़ील्ड के साथ काम कर रहा हूं, विशेष रूप से <input type="text" />और <input type="search" />आईएमओ में सफारी, क्रोम, फ़ायरफ़ॉक्स और ओपेरा सहित सभी प्रमुख ब्राउज़र में कोई अंतर नहीं था। और खोज क्षेत्र भी एक नियमित पाठ क्षेत्र की तरह व्यवहार करता है।

तो, input type="text"और input type="search"HTML5 में क्या अंतर है ?

इसका वास्तविक उद्देश्य क्या है <input type="search" />?

Comments

html5tutorial.info/html5-search.php

— मार्क बी

Answer 1

अभी, उनके बीच कोई बड़ी बात नहीं है - शायद वहाँ कभी नहीं होगा। हालांकि, यह बिंदु ब्राउज़र-निर्माताओं को इसके साथ कुछ विशेष करने की क्षमता देने के लिए है, अगर वे चाहते हैं।

<input type="number">सेलफोन पर, नंबर पैड type="email"लाने , या @ और .com और बाकी उपलब्ध के साथ कीबोर्ड के एक विशेष संस्करण को लाने के बारे में सोचें ।

एक सेलफोन पर, खोज एक आंतरिक खोज एपलेट ला सकता है, अगर वे चाहते थे।

दूसरी तरफ, यह सीएसएस के साथ वर्तमान देवों की मदद करता है।

input[type=search]:after { content : url("magnifying-glass.gif"); }

Comments

दो वैध बिंदुओं के लिए +1, 1) internal search applet for mobile phone। २) ability to make better presentation। हालांकि, मुझे जवाब स्वीकार करने के लिए इंतजार करना चाहिए, क्योंकि मैं यह सुनिश्चित करना चाहता हूं कि कोई अन्य उद्देश्य नहीं है :)

— विजिन पॉलराज

अभी, वहाँ नहीं है। इनपुट्स इस समय या तो सिर्फ नाम के हैं (जैसे इनपुट [टाइप = कलर] के लिए केवल आंशिक समर्थन है), या ब्राउज़र ने अपने स्वयं के विशेष हैंडलिंग (जैसे टाइप = नंबर या टाइप = ईमेल या टाइप = रेंज) को लागू किया है। कोई अन्य विकल्प नहीं है - यह या तो ब्राउज़र द्वारा एक विशेष हैंडलिंग है, या यह नहीं करता है। अभी, अधिकांश ब्राउज़रों में, = खोज नहीं करता है, और शायद नहीं होगा (MAYBE को छोड़कर यह iTunes या किसी अन्य ऐप में खोज बॉक्स की तरह दिखता है)। वर्तमान में, यह वहां है ताकि आप इसे खोज बॉक्स जानकर अतिरिक्त कार्यक्षमता / प्रस्तुति जोड़ सकें।

— नोरगार्ड

एक अंतर यह है कि खोज इनपुट में [Esc] दबाने से परिणाम स्पष्ट हो जाएंगे। सुपर आसान अगर आपके उपयोगकर्ता इसे अक्सर उपयोग कर रहे हैं।

— जोश हबदास

@JoshH कि है सुपर आसान। किसी भी विचार जो ब्राउज़र (और संस्करण) को प्रभावित करता है, वर्तमान में? मैं पूरी तरह से उत्तर को अपडेट करने और इसे सदाबहार की वर्तमान (/ भविष्य) स्थिति तक लाने के लिए तैयार हूं, यह देखते हुए कि परिदृश्य अब बहुत अलग है, डेढ़ साल पहले की तुलना में।

— नोरगार्ड

मैं प्रतिस्थापित तत्वों पर छद्म तत्वों का उपयोग करने की सिफारिश नहीं करूंगा: यह मानकों के खिलाफ है , हालांकि कुछ मामलों में काम करता है।

— पॉल कोज़लोविच

Answer 2

यह ज्यादातर ब्राउज़रों में कुछ भी नहीं करता है। यह सिर्फ एक पाठ इनपुट की तरह व्यवहार करता है। यह कोई समस्या नहीं है। युक्ति को इसके लिए कुछ विशेष करने की आवश्यकता नहीं है। WebKit ब्राउज़र्स इसे थोड़ा अलग तरीके से व्यवहार करते हैं, मुख्यतः स्टाइल के साथ।

डिफ़ॉल्ट रूप से WebKit में एक खोज इनपुट में एक इनसेट बॉर्डर, गोल कोने और सख्त टंकण नियंत्रण होता है।

इसके अलावा,

यह कहीं भी प्रलेखित नहीं है कि मुझे पता है और न ही यह कल्पना में है, लेकिन आप यदि आप इनपुट पर एक परिणाम पैरामीटर जोड़ते हैं, तो WebKit पिछले परिणाम दिखाने वाले ड्रॉपडाउन तीर के साथ थोड़ा आवर्धक ग्लास लागू करेगा।

<input type=search results=5 name=s>

संदर्भ

इन सबसे ऊपर, यह एक अर्थपूर्ण अर्थ प्रदान करता है input type।

अपडेट करें:

परिणाम की विशेषता के लिए Chrome 51 हटाए गए समर्थन:

Answer 3

यदि इनपुट प्रकार ' खोज ' है, तो नेत्रहीन / कार्यात्मक रूप से, 2 अंतर : -

1. आपको बॉक्स में पाठ साफ़ करने के लिए इनपुट / खोज बॉक्स के अंत में एक ' X ' प्रतीक मिलता है
2. कीबोर्ड पर ' Esc ' कुंजी दबाने से भी पाठ साफ़ हो जाते हैं

Comments

यह निश्चित रूप से हर जगह नहीं होता है। यह किस माहौल में मनाया जाता है?

— स्टीफन गौरिचोन

Answer 4

कुछ ब्राउज़रों पर, यह "परिणाम" और "ऑटोसेव" विशेषताओं का भी समर्थन करता है जो आवर्धक आइकन के साथ स्वचालित "हाल की खोज" कार्यक्षमता प्रदान करता है।

और जानकारी

Comments

Chrome 51 ने resultsविशेषता के लिए समर्थन को हटा दिया : Developers.google.com/web/updates/2016/08/…

— फ्लिम् सिप

Answer 5

वास्तव में यह मानने के बारे में बहुत सावधान रहें कि यह कुछ भी नहीं करता है। जब आप टाइप खोज के साथ स्टाइल इनपुट पर जाते हैं तो उनके पास कुछ विशेषताएं होती हैं जिन्हें बदला नहीं जा सकता। एक पर सीमा को बदलने की कोशिश करें और आप इसे काफी असंभव पाएंगे। कई अन्य गैर-अनुमति सीएसएस गुण की जाँच कर रहे हैं, यह सब जानकारी के लिए।

जैसा कि जशवंत ने कहा है कि परिणाम विशेषता है, हालांकि यह बहुत अच्छी तरह से काम नहीं करता है जब तक कि आप ऑटोसैव विशेषता को भी शामिल नहीं करते हैं। हालांकि, अधिकांश ब्राउज़र में ड्रॉप डाउन काम नहीं करेगा, इसलिए अपने स्वयं के जोखिम पर उपयोग करें।

Answer 6

कार्रवाई में ब्राउज़र अंतर है, जब आप कुछ शब्दों को टाइप करते हैं तो type="search"क्रोम में ईएससी को क्रोम / सफारी में इनपुट बॉक्स में क्लियर किया जाएगा। लेकिन type="text"परिदृश्य में, शब्द साफ नहीं होंगे। इसलिए विशेष रूप से उस प्रकार का चयन करने में सावधानी बरतें जब यू इसे स्वत: पूर्ण या खोज से संबंधित सुविधा के लिए उपयोग करें

Answer 7

बोनस बिंदु: input type="search" onsearchविशेषता का उपयोग करने की क्षमता है (हालांकि मैंने देखा है कि यह माइक्रोसॉफ़्ट नए एज ब्राउज़र में काम नहीं करता है), जो एक कस्टम onkeypress=if(key=13) { function() }चीज़ लिखने की आवश्यकता को समाप्त करता है।

Answer 8

इनपुट प्रकार = "खोज" का उपयोग करते हुए कीबॉर्ड एंटरकी के टेक्स्ट शो "सर्च" बनाते हैं, जो उपयोगकर्ता के अनुभव में सुधार कर सकता है। हालाँकि, आपको इस प्रकार का उपयोग करते हुए शैली को समायोजित करना होगा।

Answer 9

यह प्रोग्रामर के दृष्टिकोण पर निर्भर करता है, एक प्रोग्रामर प्रकार को देखकर इनपुट के उद्देश्य को आसानी से निर्धारित कर सकता है और यह सीएसएस स्टाइलिंग और जावास्क्रिप्ट या JQuery के लिए इनपुट्स में नियम को सत्यापित करने के लिए आसान है।

Answer 10

यदि आप सेट करते हैं, तो यह आपके इनपुट तत्व पर बुरा प्रभाव डालता है

<input type="search">

और अपने css में आपने सेट किया

input {background: url("images/search_bg.gif");}

यह सब पर दिखावा नहीं करेगा।