Id and Name attribute html example

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 () {
                   
        });

Use Id and name attribute of html element

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.

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

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.