আমি কি << এইচটিএমএল 5 ব্যবহার করে কোনও <বাটন> উপাদানটি বাসাতে পারি?

145

আমি নিম্নলিখিতগুলি করছি:

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>

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

আমার কি করা উচিত সে সম্পর্কে কেউ আমাকে পরামর্শ দিতে পারেন?

html

— মারি
সূত্র

8

বৈধকরণকারী ইতিমধ্যে আপনার জন্য আপনার প্রশ্নের উত্তর দিয়েছে এবং এমনকি আপনাকে জানিয়েছে যে কেন এটি ত্রুটি বার্তায় বৈধ নয়।

— অকেজো কোড

1

তবে বিকল্প আছে যদি আমি চাই যে গুগল একটি লিঙ্ক হিসাবে এটি দেখতে সক্ষম হয়। বোতাম ব্যবহারের উদাহরণ হিসাবে আমার কাছে পরবর্তী রেকর্ড এবং পূর্ববর্তী রেকর্ডের জন্য "<<" এবং ">>" নামক বোতাম রয়েছে। আমি বিশ্বাস করি এগুলি বোতাম হওয়া উচিত তবে কার্যকারিতা হ'ল এগুলি নতুন পৃষ্ঠাগুলির সাথে লিঙ্ক করে।

— মেরি

3

আমার প্রশ্নটি কি তা গুরুত্বপূর্ণ .. যদি আপনি এটির জন্য উপযুক্ত ব্যতিক্রম হন।

— মুহাম্মদ উমার

1

আমি <button> <a href="dsada.html "> পরীক্ষা </a> </button> রাখলে এটি ইন্টারনেট এক্সপ্লোরার 11 বা ফায়ারফক্সে কাজ করে না।

— dutraveller

231

না , ডাব্লু 3 সি এর HTML5 স্পেস ডকুমেন্ট অনুসারে এটি বৈধ HTML5 নয় :

সামগ্রীর মডেল: স্বচ্ছ , তবে অবশ্যই নেই ইন্টারেক্টিভ সামগ্রীর বংশধর ।

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

অন্য কথায়, আপনি <a>নীচের ব্যতীত অন্য কোনও উপাদানকে বাসাতে পারেন :

<a>
<audio>(যদি নিয়ন্ত্রণ বৈশিষ্ট্য উপস্থিত থাকে)
<button>
<details>
<embed>
<iframe>
<img>(যদি ইউজম্যাপ অ্যাট্রিবিউট উপস্থিত থাকে)
<input>( প্রকারের বৈশিষ্ট্যটি যদি গোপন অবস্থায় না থাকে)
<keygen>
<label>
<menu>( টাইপ বৈশিষ্ট্যটি যদি সরঞ্জামদণ্ডের রাজ্যে থাকে)
<object>(যদি ইউজম্যাপ অ্যাট্রিবিউট উপস্থিত থাকে)
<select>
<textarea>
<video>(যদি নিয়ন্ত্রণ বৈশিষ্ট্য উপস্থিত থাকে)

আপনি যদি কোথাও লিঙ্কযুক্ত এমন একটি বোতাম রাখার চেষ্টা করছেন তবে সেই বোতামটি কোনও <form>ট্যাগের মধ্যে এমনভাবে জড়িয়ে রাখুন:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

তবে, যদি আপনার <button>ট্যাগটি সিএসএস ব্যবহার করে স্টাইল করা হয় এবং সিস্টেমের উইজেটের মতো না দেখায় ... নিজেকে একটি অনুগ্রহ করুন, আপনার <a>ট্যাগের জন্য একটি নতুন শ্রেণি তৈরি করুন এবং এটি একইভাবে স্টাইল করুন।

— অ্যান্ড্রু মুর
সূত্র

1

@ অ্যান্ড্রু মুর - অন্য উপায় আছে? আমি বিশ্বাস করি এটি সমস্যা দেয় এবং সে কারণেই এটি <a> লিঙ্কের অভ্যন্তরে রূপান্তরিত হয়েছিল। সমস্যাটি কী ছিল তা নিশ্চিত নন তবে আমাদের কাছে এই পৃষ্ঠায় অনেকগুলি বোতাম রয়েছে। সম্ভবত এটি ছিল কারণ আমরা <a> লিঙ্কগুলি ব্যবহার করে SEO উন্নত করতে চেয়েছিলাম।

— মেরি

2

@ মেরি: আপনার লিঙ্কগুলি বোতামের মতো দেখতে স্টাইল করা ছাড়া আর কোনও উপায় নেই।

— অ্যান্ড্রু মুর

3

ইউজার 25 নন পদ্ধতি = "পোস্ট" ব্যবহার করা ভাল নয় কারণ ব্রাউজারটি পিছনে পিছনে নেভিগেট করার সময় কোনও পোস্ট ফর্ম পুনরায় পাঠাতে বলে। জিইটি হ'ল একটি ফর্মের ডিফল্ট পদ্ধতি হ'ল ব্রেভিটির জন্য পদ্ধতি = "পেতে" ছাড়তে পারেন।

— বিজন

4

@ অ্যান্ড্রুমুর: একটি বোতামের মতো দেখতে একটি লিঙ্ককে স্টাইলিং করা যেমন অ্যাক্সেসযোগ্যতার মতো সমস্যাগুলির নিজস্ব সেট তৈরি করে। যখন একটি ফোকাস থাকে এবং আপনি স্পেসবারে চাপেন তখন একটি বোতাম কার্যকর করা উচিত। একটি লিঙ্ক না। যদি আপনি এডিএ সম্পর্কে চিন্তা করেন (বা যত্নের ভান করার প্রয়োজন হয়) তবে এটি আপনাকে কামড় দিতে পারে।

— আইকনোক্লাস্ট

2

@ জোনাসপাসের পরামর্শ অনুসারে, এর মধ্যে একটি <div>অভ্যন্তর <a>সম্পূর্ণভাবে এইচটিএমএল 5: ভ্যালিডেটর

— ডাব্লু .3.org

43

আপনি যদি বুটস্ট্র্যাপ 3 ব্যবহার করেন তবে এটি বেশ ভালভাবে কাজ করে

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

— user2197018
সূত্র

ভিতরে রাউন্ড বোতাম ফন্টের দুর্দান্ত আইকনটি দিয়ে ভাল কাজ করে না

— টুলকিট

শ্রেণি = 'বিটিএন বিটিএন-ডিফল্ট' ব্যবহার করে অন্যান্য বোতামগুলির (এমভিসি 6) সাথে মিল রয়েছে।

— ক্রোকসেক

12

না।

নিম্নলিখিত সমাধানটি জাভাস্ক্রিপ্টের উপর নির্ভর করে।

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

যদি বোতামটি বিদ্যমানটির <form>সাথে স্থাপন করতে হয় method="post"তবে বোতামটির বৈশিষ্ট্য রয়েছে তা নিশ্চিত করুন type="button"অন্যথায় বোতামটি পোষ্ট অপারেশন জমা দেবে। এই উপায়ে আপনার <form>কাছে জিইটি এবং পোস্ট অপারেশন বোতামগুলির মিশ্রণ থাকতে পারে ।

— পিটার উইলসন
সূত্র

অনক্লিক ফাইল প্রোটোকলে কাজ করবে না, সুতরাং এটি স্থির উপস্থাপনার জন্য দরকারী নয়, উদাহরণস্বরূপ। এক্ষেত্রে ফর্ম অ্যাক্টিভিটি হ'ল উপায়।

— নেটালেক্স

1

যদি বোতামটি কোনও পৃষ্ঠায় লিঙ্ক করা থাকে, তবে এটি বোতাম নয়, এটি একটি অ্যাঙ্কর

— ক্যাপসুল

@ ক্যাপসুল এটি আজকাল দেখতে খুব সাধারণ। অস্তিত্বের প্রতিটি ওয়েব বিকাশের কাঠামোর জন্য অবতরণ পৃষ্ঠাটি দেখুন। আমি সাধারণত সব কিছু বিশুদ্ধবাদী যুক্তির পক্ষে, তবে এমনকি আমি স্বীকার করতেই পারি যে একটি বড় আয়তক্ষেত্রাকার বোতামটি একটি লিঙ্কের চেয়ে ভাল, আরও সুস্পষ্ট সাশ্রয়ী মূল্যের, এমনকি যদি এটি একটি সত্য ফর্ম ক্রিয়া শুরু করার পরিবর্তে কোনও পৃষ্ঠায় লিঙ্ক করে।

— TheDudeAbides

ঠিক এখন আমি একজন আছে <a>ভিতরে <button>(একই সঙ্গে hrefযদি জাতীয় অক্ষম করা হয়েছে একটি ব্যাকআপ হিসেবে), এবং এখন থেকে ছয় মাসের আমি স্পষ্টভাবে বিব্রত করা যে আমি যে ভর্তি যাচ্ছি।

— TheDudeAbides

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

— ক্যাপসুল

10

আমি ঠিক একই সমস্যাটিতে ঝাঁপিয়ে পড়েছি এবং এটি সমাধান করেছি 'বোতাম' ট্যাগটি 'স্প্যান' ট্যাগের পরিবর্তে। আমার ক্ষেত্রে আমি বুটস্ট্র্যাপ ব্যবহার করছি। এটি দেখতে এটির মতো দেখাচ্ছে:

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a>

— gobeltri
সূত্র

4

বুটস্ট্র্যাপ সহ আপনার স্প্যানের মোটেই দরকার নেই। কেবলমাত্র পুরো ক্লাসের অংশটি <a> এ সরান এবং আপনার কাছে একটি লিঙ্ক বোতাম থাকবে। উদাহরণস্বরূপ <a href="#register" class="btn btn-default btn-lg"> সাবস্ক্রাইব করুন </a>

— রায়ান

মূল পোস্টারটি অ্যাঙ্কর ট্যাগের ভিতরে একটি বোতাম স্থাপন করা সম্ভব কিনা তা জানতে চেয়েছিল । গৃহীত উত্তরের নোটগুলি উল্লেখ করে যে এটি একটি ডাব্লু 3 সি এর বিরুদ্ধে যায় <a> একটি <a> এর ভিতরে a> আমি মনে করি সে কারণেই গোলবেল্ট্রি একটি বোতাম হিসাবে <span> স্টাইলিং প্রদর্শন করছিলেন।

— স্ট্যাকওভারফ্লো ব্যবহারকারী

এর ভিতরে অন্য লিখিত সামগ্রী রয়েছে <a>যা লিঙ্কটির অংশ, তবে বোতামটির মতো স্টাইলযুক্ত না থাকলে এটি উপলব্ধি করে । উদাহরণস্বরূপ, একটি div(চিত্র, পটভূমি, পাঠ্য, ইত্যাদি) এর মধ্যে যে কোনও ক্লিক একটি লিঙ্কে যায় তবে কেবল spanবোতামের মতো লাগে।

— জোশিয়াহ

7

এটি বৈধ হলে এটি সত্যই অদ্ভুত হবে এবং আমি এটি অবৈধ বলে আশা করব। অন্য ক্লিকযোগ্য উপাদানগুলির ভিতরে একটি ক্লিকযোগ্য উপাদান থাকার অর্থ কী? এটি কোনটি - একটি বোতাম, বা একটি লিঙ্ক?

— স্টিভ জর্জেনসেন
সূত্র

ধন্যবাদ স্টিভ এটি একটি টিম-কর্মী দ্বারা প্রস্তাবিত একটি পদ্ধতি ছিল। পদ্ধতিটি কাজ করে। আমি আরও ভাল উপায় করতে পারে?

— মেরি

1

@ মেরি আপনি যদি কোনও লিঙ্কটিকে একটি বোতামের মতো দেখতে চান তবে CSS স্টাইলগুলি এর মতো দেখতে এটি ব্যবহার করা সহজ। একটি সীমানা শৈলী এই অনুরূপ যোগ করুন border: 2px outset। আপনি যদি কোণগুলি কিছুটা গোল করতে চান তবে আপনি এটির উপর একটি সীমানা-ব্যাসার্ধও ব্যবহার করতে পারেন । একটি সাধারণ <img>ট্যাগ খুব ভাল কাজ করবে।

— অকেজো কোড

3

অন্য বিকল্পটি হ'ল বোতামটির অনক্লিক বৈশিষ্ট্যটি ব্যবহার করা:

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

এটি কাজ করে, তবে ব্যবহারকারীটি লিভারটি হওভারের মতো প্রদর্শিত হবে না কারণ তারা যদি উপাদানটির ভিতরে থাকে।

— LaserCat
সূত্র

2

এই দিনগুলিতে এমনকি যদি অনুমানটি এটি অনুমতি না দেয় তবে এটি "মনে হয়" এখনও একটি <a href...><button ...></a>ট্যাগের মধ্যে বোতামটি এম্বেড করার জন্য কাজ করে , FWIW ...

— rogerdpack
সূত্র

2

এটি যখন <button>ক এর মধ্যে থাকে না তখন এটি কাজ করে <form>। তবে, বোতামটি উপস্থিত হওয়ার সাথে সাথে (যেমন, <form>...<a><button>) এটি কাজ করা বন্ধ করে দেয়, যদি না কেউ বোতামটির অন ক্লিক ক্লিকের হ্যান্ডলারটি অক্ষম করে। এই দৃশ্যটি এড়ানো সতর্কতার জন্য এটি যথেষ্ট গাইরেশন।

— বিশপ

0

আপনি বোতামে একটি শ্রেণি যুক্ত করতে পারেন এবং এটি পুনর্নির্দেশ করে কিছু স্ক্রিপ্ট রাখতে পারেন।

আমি এটি এইভাবে করি:

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

— divHelper11
সূত্র

0

কেন নয়..আপনি বোতামে ছবিও এম্বেড করতে পারেন

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM>

— তপসিত সুয়েসিতন
সূত্র

2

সমস্যাটি হ'ল <a> </a> ওপি যেমন জিজ্ঞাসা করেছিল তখন এটি তার সীমানার মধ্যে থাকতে দেয় তাতে কিছুটা প্রতিবন্ধকতা রয়েছে। গৃহীত প্রশ্নটি দেখুন।

— থমাস

0

ব্যাখ্যা এবং কার্যনির্বাহী সমাধান এখানে: হাওটো: অনক্লিক জাভাস্ক্রিপ্ট সহ অন্য ডিভের ভিতরে অন্লিকের সাথে ডিভ

আপনার অভ্যন্তরীণ ক্লিক হ্যান্ডলারে এই স্ক্রিপ্টটি সম্পাদন করে:

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

— Ruwen
সূত্র

-1

লিঙ্কের ভিতরে একটি বোতাম উপাদান এম্বেড করা HTML5 তে অবৈধ।

ডিফল্টতে সিএসএস ব্যবহার করা আরও ভাল এবং: সক্রিয় (চাপ দেওয়া) বলেছেন:

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

<p><a class="Button" href="www.stackoverflow.com">Click me<a>

স্নিপেট প্রসারিত করুন

— পতঞ্জলির
সূত্র

-2

আমি আপনার জাভাস্ক্রিপ্ট সমাধানগুলি চেষ্টা করি তবে কাজের জন্য e.preventDefault();আমার জাভাস্ক্রিপ্ট ফাংশনটি সন্নিবেশ করা প্রয়োজন ।

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>

— পাওলো ফেরারিস
সূত্র

-3

বোতামের ভিতরে ফর্মেশন অ্যাট্রিবিউট ব্যবহার করুন

পুনশ্চ! এটি কেবল তখনই কাজ করে যদি আপনার বোতামটি = "জমা দিন"

<button type="submit" formaction="www.youraddress.com">Submit</button>

— Moonfly
সূত্র

আপনার বোতামটি <for> ট্যাগে রাখতে হবে।

— ড্যানোডস্টার

-3

<a href="index.html">
  <button type="button">Submit</button>
</a>

অথবা আপনি জাভা স্ক্রিপ্টটি বোতামটিতে ব্যবহার করতে পারেন:

<button type="submit" onclick="myFunction()">Submit</button>
<script>
  function myFunction() {
      var w = window.open(file:///E:/Aditya%20panchal/index.html);
    }
</script>

— আদিত্য পঞ্চাল
সূত্র

কিছু ব্রাউজার কেবল এটির অনুমতি দেবে, এর অর্থ এটি একটি ভাল ধারণা নয়।

— ড্যানোডাস্টার