এইচটিএমএল বোতাম ফর্ম জমা দিতে হবে না


370

আমার একটা ফর্ম আছে সেই ফর্মের বাইরে আমার কাছে একটি বোতাম আছে। এর মতো একটি সাধারণ বোতাম:

<button>My Button</button>

তবুও, আমি যখন এটি ক্লিক করি তখন এটি ফর্মটি জমা দেয়। কোডটি এখানে:

<form id="myform">
    <input />
</form>
<button>My Button</button>

এই সমস্ত বোতামটি করা উচিত কিছু জাভাস্ক্রিপ্ট। এমনকি যখন এটি উপরের কোডটির মতো দেখতে লাগে তখনও এটি ফর্মটি জমা দেয়। আমি যখন ট্যাগ বোতামটি স্প্যান-এ পরিবর্তন করি তখন এটি পুরোপুরি কার্যকর হয়। তবে দুর্ভাগ্যক্রমে, এটি একটি বোতাম হওয়া দরকার। ফর্ম জমা দেওয়া থেকে বাটনটি ব্লক করার কোনও উপায় আছে কি? যেমন উদা

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>

3
এই সমস্যাটি আধুনিক ব্রাউজারগুলিতে পুনরায় প্রজননযোগ্য নয় এবং সমস্যাটি মূলত একটি ভুল বোঝাবুঝির কারণে হতে পারে। যদিও ডিফল্ট buttonহল type=submit, কোন ফর্ম যখন পেশ করা হয় buttonউপাদান বাইরে কোনো ফর্ম। প্রকৃত প্রদর্শন (নমুনা নথি, ব্রাউজারের সনাক্তকরণ এবং পর্যবেক্ষণের বিবরণ যা কিছু ফর্ম জমা দেওয়া দেখায়) না দেওয়া যেতে পারে, এই প্রশ্নটি পুনঃপ্রজননযোগ্য হিসাবে বন্ধ করা উচিত। ব্যবহার type=buttonকরা ভাল অনুশীলন, তবে এটি সমস্যাটিকে বাস্তব করে তোলে না।
Jukka K. Korpela

উত্তর:


894

আমি মনে করি এটি এইচটিএমএল-এর সবচেয়ে বিরক্তিকর সামান্য বিচিত্রতা ... জমা না দেওয়ার জন্য সেই বোতামটি "বোতাম" টাইপের হওয়া দরকার।

<button type="button">My Button</button>

আপডেট করুন 5 ফেব্রুয়ারি 2019: অনুযায়ী এইচটিএমএল জীবনযাত্রার মান (এবং এইচটিএমএল 5 স্পেসিফিকেশন ):

অনুপস্থিত মান ডিফল্ট এবং অবৈধ মান ডিফল্ট বোতাম রাষ্ট্র জমা দিন হয়।


9
@ পাওয়ারস্লাইভ না করার কোনও কারণto use <button>
সন্দীপ

4
@ সন্দিপপিংল এটি ব্যবহার করার কোনও কারণ নেই, যদি না আপনার যদি সত্যিই জটিল ধরণের স্টাইলিংয়ের প্রয়োজন হয়। এছাড়াও, আই 6 এবং আই 7 (ভাগ্যক্রমে পর্যায়ক্রমে শেষ হচ্ছে) <button>কিছু ক্ষেত্রে হ্যান্ডেলগুলি ভুলভাবে পরিচালনা করেছে । অতিরিক্তভাবে, <button>100% ক্রস-ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ নয় যে <button>কোনও ফর্ম ব্যবহার করার সময় বিভিন্ন ব্রাউজারগুলি এর জন্য বিভিন্ন মান জমা দিতে পারে ।
পাওয়ারস্লাভ

35
এটি একটি দুর্দান্ত উত্তর, তবে এটি একটি অদ্ভুততা নয়typeকোনও <button>ট্যাগের বৈশিষ্ট্যের ডিফল্ট মান submit। যখন পরিবর্তিত হয় type=button, এর <button>কোনও ডিফল্ট আচরণ দেওয়া হয় না। typeএখানে বৈশিষ্ট্যটি দেখুন : বিকাশকারী.মোজিলা.আর.ইন
মাইকেল বেঞ্জামিন

1
তাই ধারণা কি <button type='submit'>এটা আমার জন্য খুব কঠিন haha। যাইহোক আপনার উত্তর দুর্দান্ত কাজ করে!
divHelper11

2
অ-ফর্ম-নির্দিষ্ট উপাদানটির ডিফল্ট (এবং এইভাবে অন্তর্নিহিত) আচরণ হ'ল সম্ভাব্য ধ্বংসাত্মক ফর্ম-নির্দিষ্ট কার্যকারিতা ট্রিগার করা। এটি কীভাবে এইচটিএমএল অনুমানের জন্য অদ্ভুত নকশার সিদ্ধান্ত নয় ?
সম্মানিত মুল

36

return false;অন্লিক হ্যান্ডলার শেষে কাজটি করবে। যাইহোক, এটা কেবল যোগ করার জন্য ভালো হতে এর type="button"থেকে <button>- যে ভাবে এটি সঠিকভাবে আচরণ করবে এমনকি কোনো জাভাস্ক্রিপ্ট ছাড়া।


1
যে বোতামগুলি ফর্মগুলি জমা দেয় না সেগুলি কেবল জাভাস্ক্রিপ্টের সাথেই সক্ষম থাকলেও কার্যকর ... আমি সম্মত হই যে টাইপ = "বোতাম" যদিও আরও পরিষ্কার।
চোরমাস্টার

2
return false;সমস্ত পরিস্থিতিতে কাজ করে না, যখন type="Button"না। এমনকি সক্ষম জাভাস্ক্রিপ্ট সঙ্গে।
brejoc

15

ডেভ মার্কেল সঠিক। থেকে W3School ওয়েবসাইট :

সর্বদা বোতামের জন্য ধরণের বৈশিষ্ট্য নির্দিষ্ট করুন। ইন্টারনেট এক্সপ্লোরারের জন্য ডিফল্ট প্রকারটি হ'ল "বোতাম", অন্য ব্রাউজারগুলিতে (এবং ডাব্লু 3 সি নির্দিষ্টকরণে) এটি "জমা দিন" "

অন্য কথায়, আপনি যে ব্রাউজারটি ব্যবহার করছেন তা ডাব্লু 3 সি এর স্পেসিফিকেশন অনুসরণ করছে।


15

ডিফল্টরূপে, এইচটিএমএল বোতামগুলি একটি ফর্ম জমা দেয়।

এটি এমনকি ফর্মের বাইরে অবস্থিত বোতামগুলি জমা দেওয়ার হিসাবে কাজ করে (ডাব্লু 3 স্কুলগুলি দেখুন: http://www.w3schools.com/tags/att_button_form.asp )

অন্য কথায়, বোতামের ধরণটি ডিফল্টরূপে "জমা" হয়

<button type="submit">Button Text</button>

সুতরাং এটিকে ঘুরে দেখার সহজ উপায় হ'ল বোতামের ধরণটি ব্যবহার করা ।

<button type="button">Button Text</button>

অন্যান্য বিকল্পগুলির মধ্যে অন্লিকের শেষে বা অন্য কোনও হ্যান্ডলারের বোতামটি ক্লিক করা হয় বা তার পরিবর্তে <ইনপুট> ট্যাগ ব্যবহার করে প্রত্যাবর্তন অন্তর্ভুক্ত রয়েছে

আরও জানতে, বোতামগুলিতে মজিলা বিকাশকারী নেটওয়ার্কের তথ্য দেখুন: https://developer.mozilla.org/en/docs/Web/HTML/Element/button


3

<Button>ট্যাগটি ব্যবহার না করার পরামর্শ দেওয়া হচ্ছে । ব্যবহার<Input type='Button' onclick='return false;'> পরিবর্তে ট্যাগ। ("রিটার্ন মিথ্যা" ব্যবহার করে ফর্মটি অবশ্যই প্রেরণ করা উচিত নয়))

কিছু রেফারেন্স উপাদান


2
এটি ব্যবহারের জন্য যথেষ্ট <input type="button" />, এবং এটি যথেষ্ট return false;- উভয় করার দরকার নেই।
টম

আমি একমত নই যে বোতাম ট্যাগটি ব্যবহার না করার প্রস্তাব দেওয়া হচ্ছে। আপনি যদি এটি ব্যবহার না করেন তবে আপনি কিছু অ্যাক্সেসযোগ্যতার বৈশিষ্ট্যগুলি হারাবেন যা আপনি স্বয়ংক্রিয়ভাবে বোতাম ট্যাগটি দিয়ে পেয়ে যাবেন। আমি বলব বোতাম ট্যাগটি আসলে এমন উপাদানগুলির জন্য প্রস্তাবিত যা বোতাম হিসাবে কাজ করে।
কুকিমনসটার

আপনি লিঙ্ক করেছেন এমন রেফারেন্স উপাদানের নোট অনুসারে: "টাইপ বোতামের <ইনপুট> উপাদানগুলি এখনও পুরোপুরি বৈধ এইচটিএমএল হিসাবে রয়েছে, তবে নতুন <বাটন> উপাদানটি এখন বোতাম তৈরির অনুকূল উপায়" " সুতরাং এটি ঠিক উল্টো আপনি বলেছেন।
jedzej

1

অ্যাক্সেসযোগ্যতার কারণে, আমি একাধিক type=submitবোতাম দিয়ে এটিকে টানতে পারিনি । formএকাধিক বোতামের সাহায্যে নেটিভভাবে কাজ করার একমাত্র উপায় তবে কীটি আঘাত করার সময় কেবল কেউ ফর্মটি জমা দিতে পারেন Enterতা হল কেবল type=submitএটির মধ্যে একটির অন্যটি অন্যরকম যেমন রয়েছে তেমন তা নিশ্চিত করা type=button। এইভাবে, আপনি কীবোর্ড সমর্থনের ক্ষেত্রে ব্রাউজারে কোনও ফর্ম নিয়ে কাজ করার জন্য আরও ভাল ব্যবহারকারীর অভিজ্ঞতা থেকে উপকৃত হতে পারেন।


0

আমার পক্ষে কাজ করা আরেকটি বিকল্প হ'ল onsubmit = "মিথ্যা প্রত্যাবর্তন;" ফর্ম ট্যাগ।

<form onsubmit="return false;">

শব্দার্থগতভাবে বোতামের ধরণের পরিবর্তন করার উপরের পদ্ধতিগুলির মতো সমাধানের পক্ষে তেমন ভাল নয়, তবে আপনি যদি একটি ফর্ম উপাদান চান যা জমা দেয় না তবে বিকল্প হিসাবে মনে হচ্ছে।

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