এইচটিএমএল আইডি অ্যাট্রিবিউট ব্যবহার করা হয় একটি এলিমেন্টের জন্য একটি অনন্য আইডেন্টিফায়ার বরাদ্দ করতে যাতে সে উপাদানটি সিএসএস এবং জাভাস্ক্রিপ্ট প্রয়োগের জন্য আলাদা করা হয়। একটি একক HTML পৃষ্ঠায় কোনো দুটি উপাদানের একই আইডি থাকতে পারে না। আইডি একটি অক্টোথর্প (#) দিয়ে শুরু হয়।
দ্রষ্টব্য − হিসাবে HTML5 আইডি একটি সংখ্যা দিয়ে শুরু হয় নির্দিষ্ট করার অনুমতি দেওয়া হয়৷
৷আসুন আইডি অ্যাট্রিবিউট -
-এর একটি উদাহরণ দেখিউদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>MouseEvent clientX</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
#outer {
width:70%;
margin: 0 auto;
padding: 0;
text-align: center;
border:1px solid black;
height: 105px;
background-color: #28a745;
}
input[type="button"] {
border-radius: 10px;
}
#upper {
border-bottom: 1px solid black;
height: 40px;
margin: 0 0 15px 0;
background-color: #DC3545;
}
#lower {
border-top: 1px solid black;
height: 40px;
margin: 15px 0 0 0;
background-color: #DC3545;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>MouseEvent-clientX</legend>
<div id="outer">
<div id="upper"><h2>Danger</h2></div>
<div id="lower"><h2>Danger</h2></div>
</div>
<input type="button" id="start" value="Start" onclick="gameStart()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById('divDisplay');
var gameDisplay = document.getElementById('outer');
function playGame(event) {
var x = event.clientX;
var y = event.clientY;
if(y > 95 && y < 110){
divDisplay.textContent = 'Keep Going!';
if(x === 439){
divDisplay.textContent = 'Congrats! You Did it!';
gameDisplay.removeEventListener('mousemove', playGame);
}
} else {
divDisplay.textContent = 'You moved to DANGER area. You loose!';
gameDisplay.removeEventListener('mousemove', playGame);
}
}
function gameStart(){
gameDisplay.addEventListener('mousemove',playGame);
}
</script>
</body>
</html> এটি নিম্নলিখিত আউটপুট −
তৈরি করবে1) 'স্টার্ট ক্লিক করার পরে৷ সবুজ (নিরাপদ) এলাকায় বোতাম এবং কার্সার −
2) 'স্টার্ট ক্লিক করার পরে৷ সবুজ (নিরাপদ) এলাকার শেষে বোতাম এবং কার্সার −
3) 'স্টার্ট ক্লিক করার পরে৷ লাল (বিপদ) এলাকায় বোতাম এবং কার্সার −
