Id and Name attribute html example

How to use Id and name attribute

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 attribute vs name attribute

ID is not same as Class in Css, there are some difference between Class and ID.

<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”

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();" /> 

html class vs id

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>