<ইনপুট টাইপ = 'জমা' /> এবং <বোতামের প্রকার = 'জমা'> পাঠ্য </ বাটন> এর মধ্যে পার্থক্য


148

তাদের সম্পর্কে অনেক কিংবদন্তি রয়েছে। আমি সত্য জানতে চাই। নিম্নলিখিত দুটি উদাহরণের মধ্যে পার্থক্য কী?

  1. <input type='submit' value='text' />

  2. <button type='submit'>text</button>


29
মানে কি <input type="submit">আর <button type="submit">?
কেনেটিএম


1
inputএকটি অকার্যকর উপাদান। ব্যবহার করবেন না <input />, শুধু ব্যবহার করুন <input>
সিডিটি

@ HakanFıstık না যে একটি DUP, সেখানে, যে একটি (বেশী বা কম চতুরভাবে) বিভিন্ন এক, এর যেমন type=submitজন্য buttonএমনকি একটি উদ্বেগের বিষয় ছিল সেখানে (সম্ভবত কারণ এটি এসটিডি এমনকি অংশ ছিল না। তখন (আমি যতদূর জানি), যখন অন্য প্রশ্ন জিজ্ঞাসা করা হয়েছিল)।
জেড

উত্তর:


120

আপনি কোথায় থেকে আপনার কিংবদন্তী পাবেন তা নিশ্চিত নন তবে:

সাথে জমা দিন বোতাম <button>

সঙ্গে:

<button type="submit">(html content)</button>

আইই 6 ট্যাগগুলির মধ্যে এই বোতামটির জন্য সমস্ত পাঠ্য জমা দেবে, অন্য ব্রাউজারগুলি কেবল মানটি জমা দেবে। ব্যবহার <button>আপনাকে বোতামের নকশার চেয়ে বেশি বিন্যাসের স্বাধীনতা দেয়। এর সমস্ত উদ্দেশ্য এবং উদ্দেশ্যগুলিতে এটি প্রথমে দুর্দান্ত বলে মনে হয়েছিল, তবে বিভিন্ন ব্রাউজারের কিরকগুলি কখনও কখনও এটি ব্যবহার করা শক্ত করে তোলে।

আপনার উদাহরণে, আই 6 textসার্ভারে প্রেরণ করবে , অন্য বেশিরভাগ ব্রাউজারগুলি কিছুই প্রেরণ করবে না। এটি ক্রস-ব্রাউজারকে সামঞ্জস্যপূর্ণ করতে, ব্যবহার করুন <button type="submit" value="text">text</button>। আরও ভাল: মানটি ব্যবহার করবেন না, কারণ আপনি যদি এইচটিএমএল যুক্ত করেন তবে এটি সার্ভারের দিক থেকে প্রাপ্তটি হয়ে ওঠে trick পরিবর্তে, আপনার যদি অতিরিক্ত মূল্য প্রেরণ করতে হয় তবে একটি লুকানো ক্ষেত্র ব্যবহার করুন।

সঙ্গে বাটন <input>

সঙ্গে:

<input type="button" />

ডিফল্টরূপে, এটি কিছুই করার পরে না। এমনকি এটি আপনার ফর্ম জমা দেবে না। আপনি কেবল বোতামে পাঠ্য রাখতে পারেন এবং সিএসএসের সাহায্যে এটিকে একটি আকার এবং সীমানা দিতে পারেন। এর আসল (এবং বর্তমান) অভিপ্রায়টি ছিল সার্ভারে ফর্মটি জমা দেওয়ার প্রয়োজন ছাড়াই কোনও স্ক্রিপ্ট চালানো।

সঙ্গে সাধারণ জমা বোতাম <input>

সঙ্গে:

<input type="submit" />

প্রাক্তনের মতো তবে বাস্তবে আশেপাশের রূপটি জমা দেয়।

ইমেজ জমা বোতাম সহ <input>

সঙ্গে:

<input type="image" />

প্রাক্তনের (জমা দেওয়ার) মতো এটিও একটি ফর্ম জমা দেবে তবে আপনি যে কোনও চিত্র ব্যবহার করতে পারেন। কোনও ফর্ম জমা দেওয়ার প্রয়োজন হলে এটি বোতাম হিসাবে চিত্র ব্যবহার করার পছন্দসই উপায় ছিল। আরও নিয়ন্ত্রণের জন্য, <button>এখন ব্যবহৃত হয়। এটি সার্ভার সাইড ইমেজ মানচিত্রের জন্যও ব্যবহার করা যেতে পারে তবে এটি আজকাল বিরল। যখন আপনি usemap-ট্রিবিউট এবং (সেই বৈশিষ্ট্যটি সহ বা তার বাইরে) ব্যবহার করেন, ব্রাউজারটি মাউস-পয়েন্টার এক্স / ওয়াই স্থানাঙ্কগুলি সার্ভারে প্রেরণ করবে (আরও স্পষ্টভাবে, আপনি যে মুহুর্তটিতে ক্লিক করবেন তার মাউস-পয়েন্টার অবস্থান)। আপনি যদি কেবল এই অতিরিক্তগুলি উপেক্ষা করেন তবে এটি চিত্র হিসাবে ছদ্মবেশিত সাবমিট বাটন ছাড়া আর কিছুই নয়।

ব্রাউজারগুলির মধ্যে কিছু সূক্ষ্ম পার্থক্য রয়েছে তবে <button>উপরে বর্ণিত ট্যাগ ব্যতীত সমস্ত মান-গুণাবলী জমা দেবে ।


1
যেহেতু আপনি যেভাবেই সম্পাদনা করে চলেছেন, আই আই 6 সম্পর্কিত বিষয়টি এখনও আই 11 এর সাথে কুইর্কস মোডে সত্য। (ত্বকের মোড ব্যবহার না করার আরও একটি কারণ)। এজ এ স্থির। ওহ, এবং <ইনপুট> এবং <বাটন> এর মধ্যে আরও পার্থক্য রয়েছে: <ইনপুট> white-space:preডিফল্টরূপে রয়েছে, <বাটন> হয় না। ভিউপোর্টের চেয়ে আরও বেশি বোতাম তৈরি করার চেষ্টা করার সময় এটি স্পষ্ট হয় becomes
মিস্টার লিস্টার

19

এর সাথে <button>, আপনি যেখানে img ট্যাগ ইত্যাদি ব্যবহার করতে পারেন text

<button type='submit'> text -- can be img etc.  </button>

সঙ্গে <input>ধরন, আপনি পাঠ্য সীমাবদ্ধ


আপনার সাথে <input type="image" />পাঠ্য সীমাবদ্ধ নয় এবং এটি একটি জমাও সম্পাদন করে।
আবেল

2
@ আবেল: এটি একটি চিত্রের মানচিত্র তৈরি করার জন্য আরও বেশি যা মাউস পয়েন্টার অবস্থান name.xএবং name.yপরামিতিগুলি প্রেরণ করে (নোট করুন যে nameপ্যারামিটারটি উপস্থিত নেই!)। আমি বরং <input type="submit">সিএসএস ব্যাকগ্রাউন্ড ব্যবহার করব যদি একমাত্র উদ্দেশ্য ব্যাকগ্রাউন্ড ইমেজ সহ একটি বোতাম থাকে।
BalusC

@ বালুসসি: সত্য, তবে এটি উদ্দেশ্য, যখন এইচটিএমএল ২.০ স্ট্যান্ডার্ড লেখার সময় কোনও সিএসএস ছিল না, তখন বর্ণিত ছিল যে কোনও চিত্রকে বোতাম বা সার্ভার-সাইড চিত্র মানচিত্র হিসাবে ব্যবহার করা হয়েছিল। তবে প্রকৃতপক্ষে, আপনি সিএসএস এবং এইচটিএমএলের সাথে একই কাজ করতে পটভূমির চিত্র সহ একটি সাধারণ বোতাম ব্যবহার করতে পারেন (আব)।
আবেল

@ আবেল: এর উদ্দেশ্য কখনও ছিল না input type="image"। এজন্য উদ্দেশ্যপ্রণোদিত <button type="submit">
বালুসসি

1
@ বালুসসি: সম্ভবত আমরা স্ট্যান্ডার্ডটি আলাদাভাবে বুঝতে পারি তবে এটি এইচটিএমএল ২.০ স্ট্যান্ডার্ডের লি'র মূল পাঠ্যের মধ্যে রয়েছে: " TYPE=IMAGE' implies টাইওয়াইপি = সাবমিট 'প্রসেসিং; অর্থাৎ যখন পিক্সেলটি বেছে নেওয়া হয় তখন পুরোটি ফর্মটি জমা দেওয়া হয়।" । আপনি যা মনে করেন আসল উদ্দেশ্য তা তৈরি করুন :)
আবেল

1

সংক্ষেপে :

<input type="submit">

<button type="submit"> Submit </button>

উভয়ই ডিফল্টভাবে দৃষ্টিভঙ্গি করে এমন একটি বোতাম আঁকবে যা একই ক্রিয়া সম্পাদন করে (ফর্মটি জমা দিন)।

তবে এটি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে <button type="submit">কারণ এতে আরও ভাল শব্দার্থবিজ্ঞান রয়েছে, আরও ভাল এআরআইএ সমর্থন রয়েছে এবং এটি স্টাইল করা সহজ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.