While designing modern responsive webpage, we often set id for html element (sometimes we use css class name too) , id can be further used in writing JavaScript jquery program, where we can dynamically set behaviour of that html element calling by unique html id.
We can select any html element by id, name or css class name, Let's learn about html Id and name attribute, how to define and use those element property in coding!
// select by id $("#btnShow").click(function () { }); // select by class name $(".btnShow").click(function () { });
The id
attribute specifies a unique id for an HTML element; the id value must be unique within the HTML document. So if we want to find that element by id, it should return one element.
<input type="button" id="btn1" name="btn1" /> // get element by id var btn=document.getElementById("btn1"); // get element by name var btn1=document.getElementByName("btn1");
In CSS we define the id with #
hashtag, and in html we set that id.
Let's look at the example below
<style> #dvMessage { background-color: #000; color: #fff; padding: 10px; text-align: center; } </style> <div id="dvMessage">Welcome to WebTrainingRoom </div>
We can use id attribute on any HTML element, remember that the id value is always case-sensitive, id value should be unique and not blank.
ID is not same as Class in Css, there are some difference between Class and ID.
Let's understand the difference with example<style> #dvMessage { background-color: #000; color: #fff; padding: 10px; text-align: center; } .studentName { padding: 8px; color: #0113a5; font-size: 15px; } </style> <div id="dvMessage"> Welcome to WebTrainingRoom </div> <div class="studentName"> Arundhuti</div> <div class="studentName"> Gargi</div> <div class="studentName">Anshuman </div>
Now if you notice in above example, same class name can be repeated, but id value will be unique in current document
In javascript we can get this element by id, in DOM there is in-built method “getElementsById”
Learn name attribute in HTML
we can define a name of any html control and then access that control with name.
Let's look at example
<script> function showDetails() { document.getElementsByName("btnStudent").value = "WTR Button"; } </script> <input type="button" name="btnStudent" onclick="showDetails();" />
Here i will give another example of html class vs id using jquery, you will see how differently it works when we are selecting any html element by Id and selecting any html element by css class name.
In below example we access a html button by id and by class name. suppose we have a button with id "btnShow"
<input type="button" id="btnShow" value="Show (by id)"> <script> $(document).ready(function () { $("#btnShow").click(function () { //$("p").show(); you can execute any code here alert("you are calling by id"); }); }); </script>
Remember id is always unique, means you can have only one element with that id on same page.
But you can have multiple elements with same css class name
<input type="button" class="btn" value="Show (by class)"> <script> $(document).ready(function () { $(".btnClass").click(function () { //$("p").show(); you can execute any code here alert("you are calling by id"); }); }); </script>
Html id is very useful for setting dynamic behaviour of any html control in webpage; we can select any html element by id in jquery function.