In this tutorial we learn about Id, name attribute in html, how to define and use!
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.
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>