इनपुट आकार बनाम चौड़ाई

Question

<input name="txtId" type="text" size="20" />

या

<input name="txtId" type="text" style="width: 150px;" />

इष्टतम क्रॉस-ब्राउज़र कोड कौन सा है?

बेशक यह आवश्यकताओं पर निर्भर करता है, लेकिन मैं यह जानने के लिए उत्सुक हूं कि लोग कैसे और किस आधार पर निर्णय लेते हैं।

Comments

यह आमतौर पर वेब पर "px" का उपयोग करने के लिए एक बुरा विचार है। आप इसके बजाय रिश्तेदार इकाइयों का उपयोग करने पर विचार कर सकते हैं ("ईएम", "%", आदि)।

— kangax

@ केंगाक्स यह सिर्फ एक राय है; पीएक्स के उपयोग के बारे में कोई आम सहमति नहीं है

— कोस

@Kos यह एक आम सहमति थी। अब (IE और अन्य पुराने ब्राउज़रों के साथ) पास नहीं है।

— kangax

@ केंगाक्स मुझे वह मेमो कभी नहीं मिला ... मैं हर समय पीएक्स का उपयोग करता हूं और हमेशा करता हूं।

— एंड्रयू

Answer 1

आप दोनों का उपयोग कर सकते हैं। सीएसएस शैली ओवरराइड होगीsize ब्राउज़रों में विशेषता जो सीएसएस का समर्थन करते हैं और फ़ील्ड को सही चौड़ाई बनाते हैं, और जो नहीं करते हैं, उनके लिए यह निर्दिष्ट वर्णों में वापस आ जाएगा।

संपादित करें: मुझे यह उल्लेख करना चाहिए कि sizeविशेषता आकार देने का एक सटीक तरीका नहीं है: HTML विनिर्देशन के अनुसार , यह होना चाहिए वर्तमान फ़ॉन्ट के वर्णों की संख्या का उल्लेख जो इनपुट एक बार में प्रदर्शित करने में सक्षम होंगे।

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

नीचे दिया गया स्निपेट दोनों दृष्टिकोणों को प्रदर्शित करता है।

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}

<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

Comments

@ मर्क बी। आपके उत्तर के लिए धन्यवाद। मैंने यहाँ प्रश्न पूछने के लिए इनलाइन शैली का उपयोग किया।

— रजकवप

कोई चिंता नहीं - मुझे लगा कि आपके पास हो सकता है, लेकिन मैंने अभी मामले में बताया है।

— मार्क बेल

अधिकांश फोंट मोनो-चौड़ाई नहीं हैं। "उन वर्णों की संख्या जिनके बारे में क्षेत्र एक ही बार में प्रदर्शित कर पाएगा" .... आप किस वर्ण का अर्थ रखते हैं?

— पचेरियर

@Pacerier इनपुट में जो भी फॉन्ट में वर्णों की संख्या है: jsbin.com/zimako/1

— मार्क बेल

@jbyrd हाँ, यह मामला है - लेकिन HTML विनिर्देश के अनुसार उत्तर सही है। मैंने चीजों को थोड़ा स्पष्ट करने के लिए अब उत्तर को संपादित किया है।

— मार्क बेल

Answer 2

मेरा सुझाव है, शायद सबसे अच्छा तरीका है एम यूनिट में शैली की चौड़ाई सेट करना :) इसलिए केवल 20 अक्षरों के इनपुट आकार के लिए style='width:20em':)

Comments

दिलचस्प बात यह है, हालांकि मेरे परीक्षण की चौड़ाई में: 20em इनपुट को 20 वर्णों से बहुत बड़ा बनाता है।

— क्रिस्टोफ़

"एम" 'एम' वर्ण की ऊंचाई का एक माप है, इसीलिए बॉक्स बहुत बड़ा हो जाता है।

— हम्बड्स

CSS में, em अपने प्रत्यक्ष या निकटतम माता-पिता के फ़ॉन्ट-आकार के सापेक्ष है। एक उदाहरण: यदि किसी तत्व का वंशानुगत फ़ॉन्ट-आकार 16px है, और आप फ़ॉन्ट-आकार को 2em करते हैं, तो परिणामी आकार 32px (16px * 2em) होगा। "एम" इकाई वर्ण मात्रा नहीं है। अधिक: w3.org/TR/css3-values/#font-relative-lengths और kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs और j.eremy.net/confused -बाउट-रेम-एंड-एम

— डेल्रोह

@ हम्बड्स का मतलब 'M' वर्ण की चौड़ाई का माप नहीं है ?

— जेस

@ जज, अच्छा सवाल है। में टाइपोग्राफी , उन्हें '' एम 'चरित्र की चौड़ाई मतलब के लिए इस्तेमाल किया। लंबे समय तक मैं एक ही बात मानता रहा। हालांकि, सीएसएस और डिजिटल टाइपोग्राफी में, 'एम' अंक में फ़ॉन्ट की ऊंचाई के बराबर है। यह वर्ण सेट को समायोजित करने के लिए है जिसमें 'M' वर्ण नहीं है, या जहाँ 'M' फ़ॉन्ट की पूर्ण ऊँचाई या चौड़ाई नहीं है।

— हम्बड्स

Answer 3

size विभिन्न ब्राउज़रों और उनके संभावित फ़ॉन्ट सेटिंग्स में असंगत है।

widthपिक्सल में शैली सेट कम से कम संगत हो जाएगा, सापेक्ष बॉक्स आकार मुद्दों । यदि आप इसे फ़ॉन्ट के सापेक्ष आकार देना चाहते हैं, तो भी आप शैली को 'em' में सेट कर सकते हैं (हालांकि फिर से, यह तब तक असंगत होगा जब तक आप इनपुट के fontपरिवार और आकार को स्पष्ट रूप से सेट नहीं करते ), या '%' यदि आप बना रहे हैं तरल-रूप। किसी भी तरह से, एक स्टाइलशीट शायद इनलाइन styleविशेषता के लिए बेहतर है ।

आप अभी भी ठीक से विकल्पों के साथ लाइन अप करने के लिए ऊंचाई पाने के sizeलिए की जरूरत <select multiple>है। लेकिन मैं इसे एक पर उपयोग नहीं करेंगे <input>।

Answer 4

मैं कहना चाहता हूं कि यह "पारंपरिक ज्ञान" के खिलाफ है, लेकिन मैं आमतौर पर आकार का उपयोग करना पसंद करता हूं। इसका कारण ठीक यही कारण है कि बहुत से लोग यह नहीं कहते हैं: क्षेत्र की चौड़ाई ब्राउज़र से ब्राउज़र में भिन्न होगी, फ़ॉन्ट आकार पर निर्भर करता है। विशेष रूप से, यह ब्राउज़र सेटिंग्स की परवाह किए बिना वर्णों की निर्दिष्ट संख्या को प्रदर्शित करने के लिए हमेशा पर्याप्त होगा।

उदाहरण के लिए, यदि मेरे पास कोई दिनांक फ़ील्ड है, तो मैं आमतौर पर फ़ील्ड को 8 या 10 वर्णों (दो अंकों का महीना और दिन और या तो दो या चार अंकों वाला वर्ष, विभाजक के साथ) प्रदर्शित करना चाहता हूं। आकार की विशेषता सेट करना अनिवार्य रूप से मुझे गारंटी देता है कि पूरी तारीख दिखाई देगी, जिसमें न्यूनतम व्यर्थ स्थान होगा। इसी प्रकार अधिकांश संख्याओं के लिए - मुझे अपेक्षित मानों की सीमा पता है, इसलिए मैं आकार की विशेषता अंकों की उचित संख्या, और दशमलव बिंदु पर लागू होने पर निर्धारित करूंगा।

जहां तक ​​मैं बता सकता हूं, कोई सीएसएस विशेषता ऐसा नहीं करती है। उदाहरण के लिए, उन्हें चौड़ाई में सेट करना, ऊँचाई पर आधारित है, न कि चौड़ाई पर, और इस प्रकार बहुत सटीक नहीं है यदि आप ज्ञात वर्णों को प्रदर्शित करना चाहते हैं।

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

Comments

आप इसके लिए exइकाई का उपयोग भी कर सकते हैं , हालांकि आकार का उपयोग करना अभी भी चौड़ाई के लिए आपके सीएसएस में दर्जनों आईडी / कक्षाएं नहीं होने से अधिकांश मामलों को सरल करता है।

— चालीस

@ फ़ोर्टी दरअसल, आप नहीं कर सकते। एक चरित्र exकी ऊंचाई है (विशेष रूप से, "एक्स"), चौड़ाई नहीं - जैसे em। चूँकि किसी वर्ण की ऊँचाई और चौड़ाई के बीच कोई निश्चित संबंध नहीं है (x या अन्यथा), यह मानने का कोई कारण नहीं है कि किसी वर्ण की ऊँचाई का उपयोग करके किसी क्षेत्र की चौड़ाई निर्धारित करने के लिए क्षेत्र को किसी को दिखाने के लिए उचित चौड़ाई मिलेगी वर्णों की संख्या। यह फ़ॉन्ट के आधार पर व्यापक या संकीर्ण हो सकता है। अब chइकाई आशाजनक लग रही है, लेकिन IE में 9 से कम में समर्थित नहीं है, जो कि जब मैंने यह लिखा था तो एक मुद्दा होगा।

— ibrewster

हां, लेकिन एक्स की ऊंचाई आमतौर पर चौड़ाई से कभी छोटी नहीं होती है, ज्यादातर समय वास्तव में थोड़ा अधिक या लगभग समान होता है, इसलिए यह काफी करीब है। chदुर्भाग्य से बेहतर हो सकता था, कुछ जीरो पतले होते हैं और हो सकता है कि यह पूर्ण वर्ण स्थान को न

— Forty

@ फ़ोर्टी ट्रू, इस प्रकार मेरे मूल बिंदु को पुष्ट करता है कि इनपुट फ़ील्ड की चौड़ाई को वर्णों की एक विशिष्ट संख्या में सेट करने के लिए कोई अच्छी सीएसएस विशेषता नहीं है, जबकि sizeविशेषता बिल्कुल ऐसा करने का प्रयास करती है। आप सही हो सकते हैं जो exएक उचित विकल्प है, लेकिन तथ्य यह है कि यह एक ऊंचाई विशेषता है, चौड़ाई विशेषता नहीं है। sizeएक चौड़ाई विशेषता है, बस सीएसएस नहीं।

— ibrewster

यह उपयोग करने के लिए पर्याप्त करीब है, बस इस मामले के लिए व्यावहारिक नहीं है :)

— चालीस

Answer 5

मुझे बस एक मेज के साथ लड़ना पड़ा, जिससे मैं कोई भी छोटी बात नहीं कर सकता था, जिस तत्व को मैंने तालिका की चौड़ाई से छोटा करने की कोशिश की थी, वही रहा। मैंने फायरबग का उपयोग करके खोज की, लेकिन उस तत्व को नहीं खोज पाया जो चौड़ाई को इतना अधिक सेट कर रहा था।

अंत में मैंने इनपुट टेक्स्ट एलीमेंट्स के आकार की विशेषता को बदलने की कोशिश की और इसे ठीक किया। किसी कारण के लिए आकार विशेषता सीएसएस चौड़ाई से अधिक सवार। मैं गतिशील रूप से एक तालिका में पंक्तियों को जोड़ने के लिए jQuery का उपयोग कर रहा था और यह इन पंक्तियों में इनपुट शामिल थे। तो शायद जब यह appendTo () फ़ंक्शन का उपयोग करके गतिशील रूप से इनपुट जोड़ने की बात आती है तो शायद चौड़ाई के साथ आकार विशेषता को सेट करना बेहतर होता है ।

Answer 6

यदि आप चौड़ाई (आपका दूसरा उदाहरण) का उपयोग करते हैं तो आपको अधिक संगति मिलेगी।

Answer 7

आप टेक्स्टबॉक्स को आकार देने के लिए शैली और चौड़ाई का उपयोग करके आकार बदल सकते हैं। यहाँ इसके लिए कोड है।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>

टेक्स्ट बॉक्स को केंद्र में लाने के लिए संरेखित करें।

Answer 8

sizeHTML में विशेषता और widthCSS में गुण दोनों की चौड़ाई निर्धारित की जाएगी <input>। यदि आप प्रत्येक वर्ण की चौड़ाई के लिए चौड़ाई को कुछ के करीब सेट करना चाहते हैं, तो **ch**निम्नानुसार इकाई का उपयोग करें :

input {
    width: 10ch;
}

Answer 9

HTML तत्वों के अर्थ अर्थ को नियंत्रित करता है। CSS पृष्ठ के लेआउट / शैली को नियंत्रित करता है। जब आप अपने लेआउट को नियंत्रित कर रहे हों तो CSS का उपयोग करें।

संक्षेप में, कभी भी आकार का उपयोग न करें = ""

Comments

तत्व के अर्थ में आकार अंतर्निहित हो सकता है; उदाहरण के लिए, एक मध्य प्रारंभिक में एक एकल वर्ण होता है। एक पहला नाम, ओटीओएच की कोई अंतर्निहित आकार सीमा नहीं है - जब तक कि आपके डेटाबेस में एक न हो।

— derobert

@derobert: मुझसे गलती हो सकती है लेकिन आम तौर पर आप व्यक्त करते हैं कि इनपुट के लिए अधिकतम-विशेषता का उपयोग करना [प्रकार = पाठ | पासवर्ड] और आकार-विशेषता के साथ नहीं।

— हॉर्स्ट गुटमैन

@Horst: ठीक है, मैं मध्य को दोनों के साथ प्रारंभिक रूप से व्यक्त करूँगा (क्योंकि यह सीमा उपयोगकर्ता के लिए समझ में आती है), और डेटाबेस केवल अधिकतम गति के साथ एक को सीमित करता है।

— derobert