বেশিরভাগ সাইটগুলিতে (এসও সহ) অনুসন্ধান করার সময় তাদের বেশিরভাগ ব্যবহার করুন:
<input type="button" />পরিবর্তে:
<button></button><button>কি সামঞ্জস্যতা সমস্যার সাথে আসে, এটি খুব বেশি ব্যবহৃত হয় না?উত্তর:
<button></button> )<button></button>(ইঙ্গিত: আই 6)ব্যবহার করার সময় আর একটি সমস্যা <button />:
এবং যখন আমরা IE সম্পর্কে কথা বলছি, এটি বোতামগুলির প্রস্থের সাথে সম্পর্কিত কয়েকটি বাগ পেয়েছে। আপনি শৈলী যুক্ত করার চেষ্টা করার সময় এটি রহস্যজনকভাবে অতিরিক্ত প্যাডিং যুক্ত করবে, অর্থাত্ বিষয়গুলি নিয়ন্ত্রণে রাখতে আপনাকে একটি ক্ষুদ্র হ্যাক যুক্ত করতে হবে।
<button />এছাড়াও এর একটি formবৈশিষ্ট্য রয়েছে (এবং সম্পর্কিত বৈশিষ্ট্যগুলি) তাই এটি নথির বডির অন্যান্য অংশের ফর্মগুলির সাথে লিঙ্ক করা যেতে পারে।
যেমন একটি পার্শ্ব নোট, <button>স্পষ্টভাবে জমা দেবে, যা যদি আপনি কোনও ফর্মের বোতামটি জমা না দিয়ে ব্যবহার করতে চান তবে সমস্যা দেখা দিতে পারে। সুতরাং, ব্যবহারের অন্য কারণ <input type="button">(বা <button type="button">)
সম্পাদনা করুন - আরও বিশদ
কোনও প্রকার ছাড়াই, buttonস্পষ্টভাবে প্রকারটি গ্রহণ করেsubmit । ফর্মটিতে কতগুলি সাবমিট বাটন বা ইনপুট রয়েছে তা বিবেচনাধীন নয়, তার মধ্যে যে কোনও একটি যা স্পষ্টভাবে বা সুস্পষ্টভাবে জমা হিসাবে টাইপ করা হয়, ক্লিক করার পরে, ফর্মটি জমা দেবে।
একটি বোতামের জন্য 3 সমর্থিত প্রকার রয়েছে
submit || "submits the form when clicked (default)"
reset || "resets the fields in the form when clicked"
button || "clickable, but without any event handler until one is assigned"submitযখন 99.9% ফর্মগুলির একটিরbutton সাথে অনেকগুলি থাকে তখন ডিফল্ট হিসাবে কেন !? submit
এই নিবন্ধটি পার্থক্যটির একটি সুন্দর ভাল ওভারভিউ অফার বলে মনে হচ্ছে।
পৃষ্ঠা থেকে:
বাটন উপাদান দিয়ে তৈরি বোতামগুলি যেমন ইনপুট উপাদানটির সাথে তৈরি বোতামগুলির মতো হয়, তবে তারা আরও উন্নততর রেন্ডারিংয়ের সম্ভাবনা সরবরাহ করে: বাটন উপাদানটিতে সামগ্রী থাকতে পারে। উদাহরণস্বরূপ, একটি বাটন উপাদান যা একটি চিত্র ফাংশন ধারণ করে এবং এমন কোনও ইনপুট উপাদানটির অনুরূপ হতে পারে যার প্রকারটি "চিত্র" এ সেট করা আছে, তবে বাটনের উপাদান ধরণের সামগ্রীতে অনুমতি দেয়।
বাটন এলিমেন্ট - ডাব্লু 3 সি
কোনও <button>উপাদানটির ভিতরে আপনি পাঠ্য বা চিত্রের মতো সামগ্রী রাখতে পারেন।
<button type="button">Click Me!</button> এই উপাদানটি এবং <input>উপাদানটির সাথে তৈরি বোতামগুলির মধ্যে পার্থক্য ।
<input />প্রকৃতপক্ষে অকার্যকর উপাদান, তবুও <button>তা নয়
উদ্ধৃতি
গুরুত্বপূর্ণ: আপনি যদি এইচটিএমএল আকারে বোতামের উপাদানটি ব্যবহার করেন তবে বিভিন্ন ব্রাউজারগুলি বিভিন্ন মান জমা দেবে। ইন্টারনেট এক্সপ্লোরার পাঠ্য জমা দিতে হবে
<button>এবং</button>, ট্যাগ সময় অন্যান্য ব্রাউজার মান গুণাবলীর বিষয়বস্তু জমা হবে। একটি HTML ফর্ম বোতাম তৈরি করতে ইনপুট উপাদান ব্যবহার করুন।
থেকে: http://www.w3schools.com/tags/tag_button.asp
যদি আমি সঠিকভাবে বুঝতে পারি তবে উত্তরটি ব্রাউজার থেকে ব্রাউজারে সামঞ্জস্যতা এবং ইনপুট ধারাবাহিকতা
অ্যাঙ্কর, ইনপুট এবং বোতামগুলির মধ্যে পার্থক্যটি নিবন্ধটি উদ্ধৃত করব :
অ্যাঙ্করগুলি ( <a>উপাদান) হাইপারলিংকগুলি উপস্থাপন করে, কোনও ব্যক্তি ব্রাউজারে নেভিগেট করতে বা ডাউনলোড করতে পারে এমন সংস্থানগুলি। আপনি যদি নিজের ব্যবহারকারীকে নতুন পৃষ্ঠায় যেতে বা কোনও ফাইল ডাউনলোড করার অনুমতি দিতে চান তবে অ্যাঙ্কর ব্যবহার করুন।
একটি ইনপুট ( <input>) একটি ডেটা ক্ষেত্রকে উপস্থাপন করে: তাই কিছু ব্যবহারকারী ডেটা যা আপনি সার্ভারে প্রেরণ করতে চাইছেন। বোতাম সম্পর্কিত বেশ কয়েকটি ইনপুট ধরণের রয়েছে:
<input type="submit"><input type="image"><input type="file"><input type="reset"><input type="button">তাদের প্রত্যেকটির একটি অর্থ রয়েছে, উদাহরণস্বরূপ " ফাইল " ফাইল আপলোড করতে ব্যবহৃত হয়, " রিসেট " একটি ফর্ম সাফ করে এবং " জমা দিন " সার্ভারে ডেটা প্রেরণ করে। এমডিএন বা ডাব্লু 3 স্কুলগুলিতে ডাব্লু 3 রেফারেন্স পরীক্ষা করুন ।
বোতাম ( <button>)উপাদান বেশ বহুমুখী:
::beforeএবং থাকতে পারে ::after;disabledবৈশিষ্ট্য সমর্থন করে । এটি এগুলি চালু এবং বন্ধ করা সহজ করে তোলে।আবার, এমডিএন বা ডাব্লু 3 স্কুলগুলিতে<button> ট্যাগের জন্য ডাব্লু 3 রেফারেন্সটি পরীক্ষা করে দেখুন ।
এইচটিএমএল ম্যানুয়ালটিতে ফর্ম পৃষ্ঠাটি উদ্ধৃত করা :
বাটন উপাদান দিয়ে তৈরি বোতামগুলি যেমন ইনপুট উপাদানটির সাথে তৈরি বোতামগুলির মতো হয়, তবে তারা আরও উন্নততর রেন্ডারিংয়ের সম্ভাবনা সরবরাহ করে: বাটন উপাদানটিতে সামগ্রী থাকতে পারে। উদাহরণস্বরূপ, একটি বাটন উপাদান যা একটি চিত্র ফাংশন ধারণ করে এবং এমন কোনও ইনপুট উপাদানটির অনুরূপ হতে পারে যার প্রকারটি "চিত্র" এ সেট করা আছে, তবে বাটন অ্যালিমেন্টের ধরণের সামগ্রীতে অনুমতি দেয় allows
আপনি যদি কোনও ফর্মের বোতাম তৈরি করতে চান তবে ইনপুট উপাদান থেকে বোতামটি ব্যবহার করুন। আপনি যদি কোনও ক্রিয়াটির জন্য বোতাম তৈরি করতে চান তবে বোতাম ট্যাগটি ব্যবহার করুন।
<button>বনাম
<input type='button'>-
আধুনিক ব্রাউজারগুলিতে, উভয় উপাদান সিএসএস সহ সহজেই স্টাইলযোগ্য হয় তবে বেশিরভাগ ক্ষেত্রে, buttonউপাদানটি পছন্দ করা হয় কারণ আপনি অভ্যন্তরীণ এইচটিএমএল এবং সিউডো উপাদানগুলির সাথে আরও স্টাইল করতে পারেন
যতক্ষণ না সিএসএস স্টাইলিং সম্পর্কিত তবে <button type="submit" class="Btn">Example</button>এটি আরও ভাল কারণ এটি আপনাকে সিএসএস :beforeএবং :after সিউডো ক্লাস ব্যবহার করার ক্ষমতা দেয় যা সহায়তা করতে পারে।
<input type="button">দৃষ্টিগোচরভাবে আলাদা হয়ে যাওয়ার কারণে <a>বা <span>যখন নির্দিষ্ট পরিস্থিতিতে ক্লাসগুলির সাথে স্টাইল করা হয় তখন আমি এড়াতে পারি।
বর্তমান শীর্ষ উত্তরটি ২০০৯ সালে লেখা ছিল এটি খুব মূল্যবান <button type="submit">Wins</button>।
আপনি jQuery ব্যবহার করা হয় যদি একটি বড় পার্থক্য আছে। jQuery ইনপুটগুলিতে বোতামগুলির চেয়ে বেশি ইভেন্ট সম্পর্কে সচেতন। বোতামগুলিতে, jQuery কেবল 'ক্লিক' ইভেন্টগুলি সম্পর্কে সচেতন। ইনপুটগুলিতে, jQuery 'ক্লিক', 'ফোকাস' এবং 'অস্পষ্ট' ইভেন্টগুলি সম্পর্কে সচেতন।
আপনি প্রয়োজন হিসাবে ইভেন্টগুলিকে সর্বদা আপনার বোতামে আবদ্ধ করতে পারেন তবে কেবল সচেতন থাকুন যে jQuery স্বয়ংক্রিয়ভাবে সচেতন সেগুলি আলাদা। উদাহরণস্বরূপ, আপনি যদি এমন কোনও ফাংশন তৈরি করেন যা কার্যকর হয় যখনই আপনার পৃষ্ঠায় কোনও 'ফোকাসইন' ইভেন্ট উপস্থিত থাকে, একটি ইনপুট ফাংশনটিকে ট্রিগার করবে তবে একটি বোতামটি তা করবে না।
<button>এটি নমনীয় যে এটি এইচটিএমএল থাকতে পারে। অধিকন্তু, সিএসএস ব্যবহার করে স্টাইল করা অনেক সহজ এবং স্টাইলিংটি সমস্ত ব্রাউজারে প্রয়োগ করা হয়। তবে ইন্টারনেট এক্সপ্লোরার সম্পর্কিত কিছু ত্রুটি রয়েছে (ইভি! আইই!)। ইন্টারনেটের এক্সপ্লোরারটি ট্যাগের সামগ্রীটিকে মান হিসাবে ব্যবহার করে মান বৈশিষ্ট্যটি সঠিকভাবে সনাক্ত করে না। বোতামটি ক্লিক করা হয় বা না তা নির্বিশেষে কোনও ফর্মের সমস্ত মান সার্ভার-সাইডে প্রেরণ করা হয়। এটি এটি একটি <button type="submit">কৃপণ এবং ব্যথা হিসাবে ব্যবহার করে তোলে ।
<input type="submit">অন্যদিকে কোনও মান বা সনাক্তকরণের সমস্যা নেই তবে আপনি নিজের মতো করে এইচটিএমএল যুক্ত করতে পারবেন না <button>। এটি স্টাইল করা আরও শক্ত এবং স্টাইলিং সব ব্রাউজারে সর্বদা ভাল সাড়া দেয় না। আশা করি এটি সাহায্য করেছে।
আমি এখানে বাকি উত্তরগুলিতে কিছু যুক্ত করতে চাই। ইনপুট উপাদানের খালি থাকা অথবা অকার্যকর উপাদান বলে মনে করা হয় (অন্যান্য খালি উপাদান এলাকা, বেস, বিআর, কর্নেল, এইচআর, চিত্র, ইনপুট, লিঙ্ক, মেটা এবং PARAM হয়। এছাড়াও আপনি পরীক্ষা করতে পারবেন এখানে ), অর্থাত তারা কোনো বিষয়বস্তু থাকতে পারে না। কোনও সামগ্রী না থাকা ছাড়াও, খালি উপাদানগুলিতে :: পরে এবং :: এর আগে কোনও সিউডো-উপাদান থাকতে পারে না , যা আমি একটি বড় অপূর্ণতা হিসাবে বিবেচনা করি।
তদ্ব্যতীত, লাইব্রেরির সরবরাহকারী এবং তারা কী কোড দেয় তার মধ্যে একটি পার্থক্য আসতে পারে। উদাহরণস্বরূপ আমি এখানে মোবাইল কৌণিক ইউআই এর সাথে মিলিয়ে কর্ডোভা প্ল্যাটফর্ম ব্যবহার করছি, এবং ইনপুট / ডিভি / ইত্যাদি ট্যাগগুলি এনজি-ক্লিকের সাথে ভালভাবে কাজ করার সময়, বোতামটি ভিজ্যুয়াল স্টুডিও ডিবাগারকে ক্র্যাশ করতে পারে, অবশ্যই পার্থক্য দ্বারা, প্রোগ্রামার দ্বারা সৃষ্ট; নোট করুন যে ম্যাটসির একই ইস্যুতে উত্তর, প্যাকেজটি কেবল একটি লিব, এবং সরবরাহকারী একটি উপাদানটিতে কিছু কার্যকারিতা নিয়ে ভাবেন নি, সে অন্যটির জন্য সরবরাহ করে। সুতরাং আপনি যখন কোনও গ্রন্থাগার ব্যবহার করছেন তখন আপনি একটি উপাদান নিয়ে একটি সমস্যার মুখোমুখি হতে পারেন যা আপনি অন্যটির সাথে মুখোমুখি হবেন না। এবং কেবল জনপ্রিয় inputপছন্দগুলি বেশিরভাগ স্থির হয়ে থাকে, কারণ এটি আরও জনপ্রিয়।
যদিও এটি খুব পুরানো প্রশ্ন এবং এটি আর প্রাসঙ্গিক নাও হতে পারে, তবে দয়া করে মনে রাখবেন যে বেশিরভাগ সমস্যা <button> ট্যাগটি ব্যবহার করত অস্তিত্ব নেই এবং তাই এটি ব্যবহার করার জন্য অত্যন্ত পরামর্শ দেওয়া হয়।
আপনি যদি বিভিন্ন কারণে এটি করতে না পারেন তবে অ্যাক্সেসযোগ্যতার হিসাবে কেবলমাত্র আপনার ট্যাগটিতে অ্যাট্রিবিউট রোল = "বোতাম" যুক্ত করতে মনে রাখবেন। এই নিবন্ধটি বেশ তথ্যমূলক: https://www.deque.com/blog/accessible-aria-buttons/
<button>এখন ব্যবহার না করার কোনও কারণ নেই ?