HTML <template> ট্যাগ
- পূর্ববর্তী পৃষ্ঠা <td>
- পরবর্তী পৃষ্ঠা <textarea>
সংজ্ঞা ও ব্যবহার
<template> এইচিপি ট্যাগটি একটি কনটেন্টার হিসাবে ব্যবহৃত হয়, যার মাধ্যমে পৃষ্ঠা লোড হওয়ার সময় কিছু HTML কনটেন্টকে ব্যবহারকারীকে ছুঁড়া দেওয়া হয়。
<template> এইচিপি ট্যাগটির বেশিরভাগ ইনটার্নাল কনটেন্টটি পরে JavaScript দ্বারা প্রদর্শিত হবে।
যদি আপনার কোনও পুনরাবৃত্ত এইচিপি কোড থাকে এবং তা প্রদর্শিত হবে, তবে আপনাকে <template> ট্যাগটি। যদি না <template> ট্যাগটি ব্যবহার করে আপনাকে HTML কোড তৈরি করতে হবে এবং ব্রাউজারটি তা প্রদর্শন করবেন না。
ইনস্ট্যান্স
উদাহরণ 1
ব্যবহার করুন <template> পৃষ্ঠাটি লোড হওয়ার সময় আটকে থাকা কিছু সামগ্রী সংরক্ষণ করতে এইচিপি ব্যবহার করুন। এটা পরে JavaScript দ্বারা প্রদর্শিত হবে:
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
উদাহরণ 2
একটি নতুন div ইলেকট্রনম ব্যবহার করে একক ক্ষেত্রগুলিকে ওয়েবসাইটে পূর্ণ করুন। প্রত্যেক div ইলেকট্রনমের HTML কোডগুলি template ইলেকট্রনমে রয়েছে:
<template>
<div class="myClass">I like: </div>
</template>
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
var temp, item, a, i;
temp = document.getElementsByTagName("template")[0];
item = temp.content.querySelector("div");
for (i = 0; i < myArr.length; i++) {
a = document.importNode(item, true);
a.textContent += myArr[i];
document.body.appendChild(a);
}
}
</script>
উদাহরণ ৩
চেক করুন যে ব্রাউজারটি <template> সমর্থন:
<script>
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("Your browser does not supports template!");
}
</script>
সার্বজনীন বৈশিষ্ট্য
<template> ট্যাগটি এছাড়াও HTML-তে সার্বজনীন বৈশিষ্ট্য。
ব্রাউজার সমর্থন
সারণীতে উল্লিখিত সংখ্যা এই প্রয়োগকে সম্পূর্ণভাবে সমর্থনকারী প্রথম ব্রাউজার সংস্করণ
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
|---|---|---|---|---|
| চ্রোম | এজ | ফায়ারফক্স | স্যাফারি | অপেরা |
| 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
- পূর্ববর্তী পৃষ্ঠা <td>
- পরবর্তী পৃষ্ঠা <textarea>
