ইনপুট টাইপ = "জমা দিন" ভিএস বোতাম ট্যাগ কি তারা বিনিময়যোগ্য?


233

input type="submit"এবং buttonট্যাগ তারা বিনিময়যোগ্য? বা যদি কোনও পার্থক্য থাকে তবে কখন ব্যবহার করবেন input type="submit"এবং কখন button?

এবং যদি কোনও পার্থক্য না থাকে তবে আমরা কেন একই উদ্দেশ্যে 2 টি ট্যাগ রাখি?



ব্যবহার করার সময় একটি মজার দিন buttonএবং valueএআই এর কয়েকটি সংস্করণে গুণাবলী এড়িয়ে চলুন , inputআপনি যা প্রত্যাশা করেছিলেন তা কেবল পাঠিয়ে দেবেন, আইই এর কিছু সংস্করণ buttonএস এর সাথে ভাল খেলছে না ।
রুবেেন্স মারিউজো

উত্তরের জন্য যেমন মূলত একই input type="button"বনাম button type=button: stackoverflow.com/questions/469059/...
সিরো Santilli郝海东冠状病六四事件法轮功

উত্তর:


131

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

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

সুতরাং কার্যকারিতা জন্য তারা কেবল বিনিময়যোগ্য!

(ভুলে যাবেন না, এটির type="submit"সাথে ডিফল্ট button, তাই এটি ছেড়ে দিন!)


7
শুধু সাবধান থাকুন, আই 6 পৃষ্ঠার সমস্ত বোতামের মান জমা দেয়, যা ঠিক কোন বোতামটি ক্লিক করেছে তা নির্ধারণ করা কঠিন করে তোলে। ব্যাখ্যা: vancelucas.com/blog/ie6-and-mુટple
স্যাম

6
শুধু অবগতির জন্য আপনি না আছে ব্যবহার করতে type="submit"ডিফল্ট হিসাবে, বাটন সঙ্গে typeহয় submit
সিঙ্ক করুন

8
ডাব্লু 3 সি এটিই বলেছে তবে আমি নিশ্চিত যে আমি typeডিফল্ট ছিল এমন ঘটনাগুলি দেখেছি button। ব্রাউজারের কোনও অসঙ্গতি এড়াতে আমি প্রতিটি বৈশিষ্ট্য স্পষ্ট করতে পছন্দ করি।
ম্যাট দ্যাটিক্যাট

5
রেফারেন্স অনুযায়ী হ্যাঁ। তবে সমস্ত ব্রাউজারগুলি রেফারেন্স স্পাকে আটকে থাকে না, তাই না?
একানাদিলি

2
@ ছারভে, প্রাক্তনের কোনও শিশু নোড থাকতে পারে না; অর্থাত্ অ-পাঠ্য সামগ্রী। আমি মনে করি আপনি বলতে পারেন যে বংশবৃদ্ধি বাদ দিয়ে পরবর্তীকালের কোন কারণ নেই।
পল ড্রাগার

71

<input type="button">শুধু একটি বাটন এবং নিজে কিছু করতে হবে না। <input type="submit">যখন ক্লিক করা যখন একটি ফর্ম উপাদান ভিতরে, ফর্ম জমা করতে হবে।

আর একটি দরকারী 'বিশেষ' বোতামটি <input type="reset">ফর্মটি সাফ করবে clear


5
প্রশ্নটি <ইনপুট টাইপ = "বোতাম"> নয় বোতাম ট্যাগ সম্পর্কে
কলটার

7
প্রশ্ন সম্পর্কে <input>এবং <button>ট্যাগ হয়। আপনি <input>আপনার উত্তরে দরকারী তথ্য সরবরাহ করেছেন , তবে এর <button>পক্ষে অভাব রয়েছে ।
পিএমপিআর

43

<ইনপুট টাইপ = "বোতাম" ..> এর পরিবর্তে <বাটন> ট্যাগ ব্যবহার করুন । এটি বুটস্ট্র্যাপ 3-এ পরামর্শ দেওয়া অনুশীলন।

http://getbootstrap.com/css/#buttons-tags

"ক্রস ব্রাউজার উপস্থাপনা

সর্বোত্তম অনুশীলন হিসাবে, ক্রস-ব্রাউজারের সাথে ম্যাচ মিলানোর বিষয়টি নিশ্চিত করার জন্য আমরা যখনই সম্ভব সম্ভব <বাটন> উপাদানটি ব্যবহার করার পরামর্শ দিচ্ছি।

অন্যান্য জিনিসের মধ্যে একটি ফায়ারফক্স বাগ রয়েছে যা আমাদের <ইনপুট> ভিত্তিক বোতামগুলির লাইন-উচ্চতা নির্ধারণ করতে বাধা দেয়, যার ফলে তারা ফায়ারফক্সের অন্যান্য বোতামের উচ্চতার সাথে সঠিকভাবে মেলে না। "


4
এই জন্য +1। buttonআরও সুস্পষ্ট, এবং ariaঅ্যাক্সেসযোগ্যতার বৈশিষ্ট্যগুলির সাথে আসে এবং এটি স্টাইল করা আরও সহজ। এটি এইচটিএমএল 5 হিসাবেও ফরোয়ার্ড চিন্তাভাবনা করে।
ব্যবহারকারী 1429980

37

যদিও উভয় উপাদান কার্যকরভাবে একই ফলাফল * সরবরাহ করে তবে আমি আপনাকে দৃ strongly়ভাবে সুপারিশ করছি<button> :

  • আরও সুস্পষ্ট এবং পাঠযোগ্য। inputপরামর্শ দেয় যে নিয়ন্ত্রণটি সম্পাদনাযোগ্য , বা ব্যবহারকারীর দ্বারা সম্পাদিত হতে পারে; buttonএটি যে উদ্দেশ্যে কাজ করে তার পরিপ্রেক্ষিতে এটি আরও স্পষ্ট is
  • সিএসএসে স্টাইল করা সহজ; উপরে উল্লিখিত হিসাবে, ফায়ারফক্স এবং আইইয়ের মধ্যে কোচ রয়েছে যা input[type="submit"]কিছু ক্ষেত্রে সঠিকভাবে প্রদর্শিত হয় না
  • পূর্বাভাসযোগ্য অনুরোধগুলি: সার্ভারের কাছে POST/ GETঅনুরোধে মানগুলি জমা দেওয়া হয় তখন আইইয়ের অত্যন্ত আচরণ হয়
  • মার্কআপ বন্ধুত্বপূর্ণ; আপনি বাসাতে আইটেমগুলি, উদাহরণস্বরূপ, আইকনগুলি বোতামের অভ্যন্তরে রাখতে পারেন।
  • এইচটিএমএল 5, সামনের চিন্তাভাবনা; বিকাশকারী হিসাবে, নতুন দায়িত্বটি अधिकृत হওয়ার পরে এটি গ্রহণ করা আমাদের দায়িত্ব। এই মুহূর্তে এইচটিএমএল 5 এক বছরেরও বেশি সময় ধরে অফিসিয়াল হয়েছে এবং এসইওকে উত্সাহিত করার জন্য অনেক ক্ষেত্রে প্রদর্শিত হয়েছে ।

* ব্যতিক্রম ছাড়া ডিফল্টরূপে কোনও নির্দিষ্ট আচরণ নেই।<button type="button">

সংক্ষেপে, আমি এর ব্যবহারকে অত্যন্ত নিরুৎসাহিত করি<input type="submit" />


ধন্যবাদ. আমি এটি সন্ধান করছিলাম, বিশেষত এইচটিএমএল 5 সিমেটিক পয়েন্টের জন্য। 2020 সালে, আমাদের খাঁটি কার্যকারিতার বাইরে চিন্তা করতে হবে।
পিয়ারে_লাইক

27

<input type='submit' />এটি এর মধ্যে এইচটিএমএল সমর্থন করে না, কারণ এটি একক স্ব-সমাপনী ট্যাগ। <button>অন্যদিকে সমর্থন এইচটিএমএল, ছবি, ইত্যাদি কারণ এটি একটি ট্যাগ যুগল এর ভিতরে: <button><img src='myimage.gif' /></button><button>সিএসএস স্টাইলিংয়ের ক্ষেত্রে এটি আরও নমনীয়।

এর অসুবিধা <button>হ'ল এটি পুরানো ব্রাউজারগুলির দ্বারা সম্পূর্ণ সমর্থনযোগ্য নয়। আই 6/7, উদাহরণস্বরূপ, এটি সঠিকভাবে প্রদর্শন করবেন না।

যদি আপনার কোনও নির্দিষ্ট কারণ না থাকে তবে সম্ভবত এটি আঁকাই ভাল <input type='submit' />


1
উত্তর ছিল 2 বছর আগে থেকে। এছাড়াও, বিকল্প বোতামের পাঠ্য নির্দিষ্ট করা খুব সম্ভব:<input type="submit" value="Log In" />
জ্যারেড এনগ

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

1
সেই সময় উত্তরটি লেখা হয়েছিল, আই 6/7 ইতিমধ্যে পুরানো ছিল। একটি নতুন ওয়েব বিকাশকারী আপনার সমর্থন যুক্তি যাচাই না করে এবং সেগুলি আর প্রয়োগ হয় না তা বুঝতে পেরে আপনার পোস্টটি পড়ে, মনে হবে যে 'বোতাম' উপাদানগুলি ব্যবহার না করার উপযুক্ত কারণ রয়েছে।
মাইকম্যাকানা

2
@ এনাইলার এমন কোনও সর্বজনীন "পুরানো" ব্রাউজারের তালিকা নেই যা প্রত্যেকে মেনে চলে। সমর্থিত ব্রাউজারগুলির জন্য বিভিন্ন কর্মস্থলের বিভিন্ন প্রয়োজনীয়তা থাকে। ২০১১-এ আপনার "সমর্থিত ব্রাউজারগুলি" এর স্ট্যান্ডার্ড আইই / / include অন্তর্ভুক্ত না করার কারণ এটি সর্বত্র নয় that's
জ্যারেড এনজি

1
আমি সচেতন যে কোনও সার্বজনীন "পুরানো" ব্রাউজারের তালিকা নেই - সুতরাং প্রতিটি জিনিসই এই জাতীয় কথা উল্লেখ করে না। আমি যা বলছি তা হ'ল এটি আরও ভালভাবে বলা যেতে পারে "আই 6/7 ডিসপ্লে বোতামটি সঠিকভাবে সমর্থন করে না that's যদি এটি উদ্বেগের বিষয় থাকে তবে ইনপুটটিতে আটকে থাকুন", আপনি জানেন ব্রাউজারগুলি পরিবর্তিত হবে, তার জন্য অ্যাকাউন্ট হবে। এটি স্ট্যাকওভারফ্লো আইআই work ওয়ার্কআউন্ডে চিরতরে বিরতিতে থেমে যায়।
মাইকমেকানা

14

আমি বুঝতে পারি এটি একটি পুরানো প্রশ্ন তবে আমি এটি mozilla.org এ পেয়েছি এবং মনে করি এটি প্রযোজ্য।

একটি বোতাম তিন ধরণের হতে পারে: জমা দিন, পুনরায় সেট করুন বা বোতাম। জমা দেওয়ার বোতামের একটি ক্লিক ফর্মের ডেটা উপাদানটির ক্রিয়া বৈশিষ্ট্য দ্বারা নির্ধারিত ওয়েব পৃষ্ঠায় প্রেরণ করে।

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

একটি বোতাম বোতামে ক্লিক করে ... কিছুই হয় না! এটি নির্বোধ শোনায় তবে জাভাস্ক্রিপ্ট সহ কাস্টম বোতামগুলি তৈরি করতে আশ্চর্যজনকভাবে এটি কার্যকর।

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish


এটি কিছু না করলে কীভাবে দরকারী?
মধু

4
কারণ আপনি তারপর জাভাস্ক্রিপ্টের মাধ্যমে ক্লিক ইভেন্টগুলিতে হ্যান্ডলারদের
ঝুঁকতে পারেন

@ মধুর উদাহরণস্বরূপ আপনি <button type="button">পরবর্তী স্লাইডে একটি স্লাইডার / ক্যারোসেলকে অগ্রসর করতে একটি কোড করতে পারেন ।
ছারভে

11

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


8

অন্য উত্তরগুলি দুর্দান্ত এবং প্রশ্নের উত্তর দেওয়ার সময় ব্যবহার করার সময় input type="submit"এবং বিবেচনা করার জন্য একটি বিষয় রয়েছে button। একটি দিয়ে input type="submit"আপনি ইনপুটটিতে সিএসএস সিউডো উপাদান ব্যবহার করতে পারবেন না তবে আপনি একটি বোতামের জন্যও করতে পারেন !

buttonস্টাইলিংয়ের বিষয়টি যখন কোনও ইনপুটটির উপরে কোনও উপাদান ব্যবহার করার এক কারণ ।


3

আমি জানি না এটি কোনও ত্রুটি বা বৈশিষ্ট্য কিনা তবে আমি খুব গুরুত্বপূর্ণ (কিছু ক্ষেত্রে কমপক্ষে) পার্থক্যটি পেয়েছি: <input type="submit">আপনার অনুরোধে মূল মান জুটি তৈরি করে এবং <button type="submit">তা করে না। ক্রোম এবং সাফারি পরীক্ষিত।

সুতরাং আপনি যখন একাধিক আপনার ফর্ম বোতাম জমা দিতে ও জানেন যে যা এক ক্লিক করা হয়েছিল চাই - ব্যবহার করবেন না button, ব্যবহার input type="submit"পরিবর্তে।


আমার মেয়াদোত্তীর্ণ হতে একেবারে অন্যভাবে, বোতামটি passes _POST ["সাবমিট_নাম"] পাস করে এবং ইনপুট দেয় না। ক্রোমের উপর পরীক্ষিত। ফায়ারফক্স সর্বদা $ _POST ["সাবমিট_নাম"] প্রেরণ করে।
পিত্ত অ্যানোনিম

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

ইন্টারেস্টিং ... আমি <! ডক্টইপিএইচটিএমএল> ল্যাং "পিএল" এবং & এনকোডিং utf-8 ব্যবহার করে যদি এটি কোনও আলাদা হয়ে যায়। ক্রোম 58.0.3029.96
গল অ্যানোনিম

-2

আপনি যদি কথা বলছেন তবে <input type=button>এটি স্বয়ংক্রিয়ভাবে ফর্মটি জমা দেবে না

আপনি যদি <button>ট্যাগটির বিষয়ে কথা বলছেন তবে তা আরও নতুন এবং সমস্ত ব্রাউজারে স্বয়ংক্রিয়ভাবে জমা দেওয়া যায় না।

নীচের লাইনটি, আপনি যদি সমস্ত ব্রাউজারে ক্লিক করে ফর্মটি জমা দিতে চান তবে ব্যবহার করুন <input type="submit">


14
আপনি <button type="submit">ফর্মগুলি স্ব-জমা দেওয়ার জন্য ব্যবহার করতে পারেন ।
জাম্পনেট
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.