ইনপুট আকার বনাম প্রস্থ

Question

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

অথবা

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

কোনটি অনুকূল ক্রস ব্রাউজার কোড?

অবশ্যই এটি প্রয়োজনীয়তার উপর নির্ভর করে তবে আমি কীভাবে লোকেরা কী সিদ্ধান্ত নেয় এবং কী ভিত্তিতে তা জানতে আগ্রহী।

Comments

ওয়েবে "px" ব্যবহার করা সাধারণত একটি খারাপ ধারণা। পরিবর্তে আপনি আপেক্ষিক ইউনিট ("em", "%", ইত্যাদি) ব্যবহার বিবেচনা করতে পারেন।

— কঙ্গাক্স

@ কংগ্যাক্স এটি কেবল একটি মতামত; px এর ব্যবহার সম্পর্কে কোন sensক্যমত্য নেই

— Kos

@ কোস এই জাতীয় মত ছিল conকমত্য। আর নেই (IE এবং অন্যান্য পুরানো ব্রাউজারগুলির সাথে) চলে যাচ্ছে।

— কঙ্গাক্স

@ কংগ্যাক্স আমি কখনই সেই মেমো পেলাম না ... আমি সর্বদা px ব্যবহার করি এবং সর্বদা থাকি।

— অ্যান্ড্রু

Answer 1

আপনি উভয় ব্যবহার করতে পারেন। সিএসএস শৈলী sizeব্রাউজারগুলিতে বৈশিষ্ট্যকে ওভাররাইড করবে যা সিএসএস সমর্থন করে এবং ক্ষেত্রটিকে সঠিক প্রস্থ তৈরি করবে এবং যাঁরা না করেন তাদের জন্য এটি নির্দিষ্ট বর্ণের অক্ষরে ফিরে আসবে।

সম্পাদনা: আমি উল্লেখ করা উচিত ছিল যে sizeঅ্যাট্রিবিউট নির্ধারন এর একটি সুনির্দিষ্ট পদ্ধতি নয়: এইচটিএমএল স্পেসিফিকেশন অনুযায়ী , এটা করা উচিত বর্তমান ফন্ট অক্ষরের সংখ্যা পড়ুন ইনপুট একযোগে প্রদর্শন করতে সক্ষম হতে হবে।

তবে নির্দিষ্ট ফন্টটি নির্দিষ্ট-প্রস্থ / মনসপেস ফন্ট না হওয়া পর্যন্ত , এটি নির্দিষ্ট গ্যারান্টিযুক্ত অক্ষর প্রকৃতপক্ষে দৃশ্যমান হবে এমন কোনও গ্যারান্টি নয় ; বেশিরভাগ ফন্টে, বিভিন্ন অক্ষর বিভিন্ন প্রস্থ হবে। এই প্রশ্নের সাথে এই প্রশ্নের কয়েকটি ভাল উত্তর রয়েছে।

নীচে স্নিপেট উভয় পদ্ধতির প্রদর্শন করে।

@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

@ মার্ক বি। আপনার উত্তরের জন্য ধন্যবাদ। আমি এখানে প্রশ্ন জিজ্ঞাসার জন্য ইনলাইন শৈলী ব্যবহার করেছি।

— rajakvk

কোনও উদ্বেগ নেই - আমি ভেবেছিলাম আপনার থাকতে পারে তবে আমি কেবল এটি উল্লেখ করেছি।

— মার্ক বেল

বেশিরভাগ ফন্টগুলি মনো-প্রস্থ নয়। "ক্ষেত্রটি একবারে অক্ষরের সংখ্যা প্রদর্শন করতে সক্ষম হবে" সম্পর্কে .... আপনি কোন চরিত্রটি বোঝাতে চাইছেন?

— পেসারিয়ার

@ পেসারিয়ার ইনপুট যে কোনও ফন্টে অক্ষরের সংখ্যা: jsbin.com/zimako/1

— মার্ক বেল

@ জাইবার্ড হ্যাঁ, এটি ক্ষেত্রে — তবে এইচটিএমএল স্পেসিফিকেশন অনুসারে উত্তরটি সঠিক। আমি কিছুটা স্পষ্ট করার জন্য এখনই উত্তরটি সম্পাদনা করেছি।

— মার্ক বেল

Answer 2

আমি পরামর্শ দিচ্ছি, সম্ভবত সর্বোত্তম উপায় হ'ল এম ইউনিটে শৈলীর প্রস্থ সেট করা :) সুতরাং 20 অক্ষরের ইনপুট আকারের জন্য কেবল সেট করুন style='width:20em':)

Comments

আকর্ষণীয় পয়েন্ট, তবে আমার পরীক্ষাগুলির প্রস্থে: 20 এম ইনপুটটিকে 20 টি অক্ষরের চেয়ে অনেক বড় করে তোলে।

— ক্রিস্টোফ

"এম" হ'ল 'এম' চরিত্রের উচ্চতার একটি পরিমাপ, এ কারণেই বাক্সটি খুব বড় হয়ে যায়।

— হাম্বাদগুলি

সিএসএসে, ইম তার প্রত্যক্ষ বা নিকটতম পিতামাতার ফন্ট-আকারের সাথে তুলনামূলক। একটি উদাহরণ: যদি কোনও উপাদানের উত্তরাধিকার সূত্রে প্রাপ্ত ফন্টের আকারটি 16px হয় এবং আপনি ফন্টের আকার 2 এম হিসাবে সেট করেন তবে ফলাফলের আকারটি 32px (16px * 2 মিমি) হবে। "এম" ইউনিট অক্ষরের পরিমাণ নয়। আরও: w3.org/TR/css3-values/#font-relative-leleths এবং klineschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs এবং j.eremy.net/confused -আউট-রিম-এন্ড-এম

— ডেল্রোহ

@ হাম্বাদ কি আপনার বোঝাতে 'এম' অক্ষরের প্রস্থের একটি পরিমাপ বোঝায় না ?

— জেস

@ জেস, ভাল প্রশ্ন ইন লেখনী , 'ই.এম.' 'এম' অক্ষর প্রস্থ বোঝাতে ব্যবহার করা। দীর্ঘদিন ধরে, আমি একই জিনিস বিশ্বাস করেছিলাম। যাইহোক, সিএসএস এবং ডিজিটাল টাইপোগ্রাফিতে, 'এম' পয়েন্টগুলিতে ফন্টের উচ্চতার সমান। এটি এমন চরিত্রের সেটগুলিকে সামঞ্জস্য করতে পারে যেখানে 'এম' অক্ষর নেই বা যেখানে 'এম' হরফের পুরো উচ্চতা বা প্রস্থ নয়।

— হাম্বাদ

Answer 3

size বিভিন্ন ব্রাউজার এবং তাদের সম্ভাব্য ফন্ট সেটিংস জুড়ে অসঙ্গতিপূর্ণ।

widthPx আকারে মধ্যে শৈলী সেট অন্তত সামঞ্জস্যপূর্ণ হতে হবে, modulo বক্স নির্ধারন বিষয় । আপনি শৈলটি 'ইম' এ সেট করতেও পারেন যদি আপনি ফন্টের সাথে এটি আকারের আকারের করতে চান (তবে আবার আপনি যদি ইনপুটটির fontপরিবার এবং আকারটি সুস্পষ্টভাবে সেট না করেন তবে এটি বেমানান হবে ), অথবা '%' যদি আপনি তৈরি করেন তবে তরল-বিন্যাস ফর্ম। যে কোনও উপায়ে, স্টাইলশিট সম্ভবত ইনলাইন styleবৈশিষ্ট্যের চেয়ে বেশি পছন্দনীয় ।

আপনি এখনও প্রয়োজন sizeজন্য <select multiple>সঠিকভাবে বিকল্প সহ লাইন আপ উচ্চতা জন্য। তবে আমি এটি একটি ব্যবহার করতে চাই না <input>।

Answer 4

আমি এটি বলতে চাই যে এটি "প্রচলিত জ্ঞান" এর বিরোধী, তবে আমি সাধারণত আকার ব্যবহার করতে পছন্দ করি। এর কারণ হ'ল কারণ হ'ল কারণ অনেকে না বলে: ফন্টের আকারের উপর ভিত্তি করে ক্ষেত্রটির প্রস্থ ব্রাউজার থেকে ব্রাউজারে পরিবর্তিত হবে। বিশেষত, ব্রাউজারের সেটিংস নির্বিশেষে নির্দিষ্ট বর্ণের সংখ্যা প্রদর্শন করার জন্য এটি সর্বদা যথেষ্ট পরিমাণে থাকবে।

উদাহরণস্বরূপ, যদি আমার একটি তারিখের ক্ষেত্র থাকে তবে আমি সাধারণত 8 বা 10 টি অক্ষর (দুটি অঙ্কের মাস এবং দিন এবং পৃথককারী সহ দুটি বা চার অঙ্কের বছর) প্রদর্শন করতে যথেষ্ট ক্ষেত্রটি চাই। আকারের বৈশিষ্ট্যটি সেট করা আমাকে গ্যারান্টি দেয় যে পুরো তারিখটি ন্যূনতম নষ্ট জায়গার সাথে দৃশ্যমান হবে। একইভাবে বেশিরভাগ সংখ্যার জন্য - আমি প্রত্যাশিত মানগুলির পরিসীমা জানি, সুতরাং আমি অঙ্কের যথাযথ সংখ্যার সাথে আকারের বৈশিষ্ট্য এবং আরও প্রযোজ্য ক্ষেত্রে দশমিক পয়েন্ট সেট করব।

আমি যতদূর বলতে পারি, কোনও সিএসএস অ্যাট্রিবিউট এটি করে না। উদাহরণস্বরূপ, ইমের মধ্যে একটি প্রস্থ নির্ধারণ উচ্চতার উপর ভিত্তি করে, প্রস্থ নয়, এবং যদি আপনি পরিচিত কয়েকটি অক্ষর প্রদর্শন করতে চান তবে এটি খুব সুনির্দিষ্ট নয়।

অবশ্যই, এই যুক্তিটি সর্বদা প্রযোজ্য নয় - একটি নাম এন্ট্রি ক্ষেত্র, উদাহরণস্বরূপ, অনেকগুলি অক্ষর থাকতে পারে। এই ক্ষেত্রে আমি সিএসএস প্রস্থের বৈশিষ্ট্যগুলিতে ফিরে আসব, সাধারণত পিক্সে। যাইহোক, আমি বলতে হবে ক্ষেত্র সংখ্যাগরিষ্ঠ আমার জানা সামগ্রীর মধ্যে কয়েকটি বাছাই করা আছে, এবং আকার অ্যাট্রিবিউট আমি নিশ্চিত যে করতে পারেন নির্দিষ্ট করে সবচেয়ে বিষয়বস্তুর মধ্যে সবচেয়ে ক্ষেত্রে, ক্লিপিং ছাড়া প্রদর্শিত হয়।

Comments

আপনি exএটির জন্য ইউনিটটিও ব্যবহার করতে পারেন , যদিও আকার ব্যবহারের পরেও আপনার সিএসএসে কয়েক ডজন আইডি / ক্লাস প্রস্থের জন্য না রেখে বেশিরভাগ ক্ষেত্রেই সহজসাধ্য করা হয়।

— চল্লিশ

@ ফোর্টি আসলে, আপনি পারবেন না। exহয় উচ্চতা ঠিক - একটি অক্ষর (বিশেষভাবে, "এক্স"), না প্রস্থের em। যেহেতু একটি অক্ষরের উচ্চতা এবং প্রস্থের (x বা অন্যথায়) কোনও স্থির সম্পর্ক নেই, তাই কোনও ক্ষেত্রের প্রস্থ নির্ধারণের জন্য একটি চরিত্রের উচ্চতা ব্যবহার ক্ষেত্রটিকে কোনও প্রকারের প্রস্থ প্রদর্শন করতে যথাযথ প্রস্থকে তৈরি করবে এটি বিশ্বাস করার কোনও কারণ নেই অক্ষর সংখ্যা দেওয়া। এটি ফন্টের উপর নির্ভর করে আরও প্রশস্ত বা সংকীর্ণ হতে পারে। এখন chইউনিট প্রতিশ্রুতিবদ্ধ দেখায়, তবে 9 এর চেয়ে কম IE তে সমর্থিত নয়, যা আমি এটি লিখলে সমস্যা হত been

— ইব্রুয়েস্টার

হ্যাঁ, তবে x এর উচ্চতা সাধারণত প্রস্থের চেয়ে কখনই ছোট হয় না, বেশিরভাগ সময় আসলে কিছুটা বেশি বা প্রায় একই থাকে, তাই এটি বেশ ঘনিষ্ঠ হয়। chদুর্ভাগ্যক্রমে আরও ভাল হতে পারত, কিছু শূন্যগুলি পাতলা এবং এটি সম্পূর্ণ চরিত্রের জায়গাটি মাপতে পারে না ...

— চল্লিশ

@ ফোর্টি ট্রু, এইভাবে আমার মূল বিষয়টিকে আরও জোর দেওয়া হচ্ছে যে কোনও নির্দিষ্ট সংখ্যক অক্ষরের সাথে একটি ইনপুট ক্ষেত্রের প্রস্থ নির্ধারণ করার জন্য কোনও ভাল সিএসএস অ্যাট্রিবিউট নেই, যখন sizeবৈশিষ্ট্যটি ঠিক এটি করার চেষ্টা করে to আপনি সঠিক হতে পারেন exএটি একটি যুক্তিসঙ্গত বিকল্প, তবে সত্যটি রয়ে গেছে যে এটি একটি উচ্চতার বৈশিষ্ট্য, প্রস্থের বৈশিষ্ট্য নয়। sizeএকটি প্রস্থের বৈশিষ্ট্য, কেবল CSS নয়।

— ইব্রুয়েস্টার

এটি ব্যবহারের জন্য যথেষ্ট কাছে, কেবল এই মামলার জন্য ব্যবহারিক নয় :)

— চল্লিশ

Answer 5

আমি কেবল একটি টেবিলের সাথে লড়াইয়ের মধ্য দিয়ে গিয়েছিলাম যা আমি কোনও উপাদানকে ছোট করতে পারি না তা বিবেচনা করে আমি কোন উপাদানটি টেবিলের প্রস্থকে ততই ছোট রাখার চেষ্টা করেছি smaller আমি ফায়ারব্যাগ ব্যবহার করে অনুসন্ধান করেছি কিন্তু এত উচ্চতার প্রস্থ নির্ধারণকারী উপাদানটি খুঁজে পেলাম না।

অবশেষে আমি ইনপুট পাঠ্য উপাদানগুলির আকারের বৈশিষ্ট্যটি পরিবর্তন করার চেষ্টা করেছি এবং এটি এটি স্থির করে দিয়েছে। কোনও কারণে আকারের বৈশিষ্ট্যটি CSS এর প্রস্থকে ওভার-রোড করে ode আমি একটি টেবিলটিতে সক্রিয়ভাবে সারি যুক্ত করতে jQuery ব্যবহার করছিলাম এবং ইনপুটগুলি এই সারিগুলিতে ছিল। সুতরাং সম্ভবত যখন এপেন্ডটো () ফাংশনটি ব্যবহার করে গতিশীলভাবে ইনপুট যুক্ত করার প্রয়োজন হয় তখন প্রস্থের সাথে আকারের বৈশিষ্ট্যটি সেট করা ভাল ।

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

sizeএইচটিএমএলে বৈশিষ্ট্য এবং সিএসএসে widthসম্পত্তি উভয়ই একটি এর প্রস্থ নির্ধারণ করবে <input>। আপনি যদি প্রতিটি অক্ষরের প্রস্থের কাছাকাছি কিছুতে প্রস্থকে সেট করতে চান তবে **ch**ইউনিটটি এইভাবে ব্যবহার করুন :

input {
    width: 10ch;
}

Answer 9

এইচটিএমএল উপাদানগুলির অর্থগত অর্থ নিয়ন্ত্রণ করে। সিএসএস পৃষ্ঠার বিন্যাস / শৈলী নিয়ন্ত্রণ করে। আপনি যখন আপনার লেআউটটি নিয়ন্ত্রণ করছেন তখন সিএসএস ব্যবহার করুন।

সংক্ষেপে, কখনও আকার = "" ব্যবহার করবেন না

Comments

আকারটি উপাদানটির অন্তর্নিহিত হতে পারে; উদাহরণস্বরূপ, মধ্যম প্রাথমিকের একটি একক অক্ষর থাকে। প্রথম নাম, ওটিওএইচের কোনও সহজাত আকারের সীমা নেই - যদি না আপনার ডাটাবেসে একটি থাকে।

— ডার্বোবার্ট

@ডারবার্ট: আমার ভুল হতে পারে তবে সাধারণত আপনি প্রকাশ করেন যে ইনপুট [টাইপ = টেক্সট | পাসওয়ার্ড] এর জন্য সর্বাধিক দৈর্ঘ্য-গুণাবলী ব্যবহার করে, আকার-বৈশিষ্ট্যের সাথে নয়।

— হোর্স্ট গুটম্যান

@ হার্স্ট: ঠিক আছে, আমি উভয়কে মধ্যম প্রাথমিকটি প্রকাশ করব (যে সীমাটি ব্যবহারকারীর কাছে বোঝায়) এবং ডাটাবেস কেবলমাত্র দৈর্ঘ্যের সাথে সীমাবদ্ধ করে।

— ডারোবার্ট