Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

Id, Name attribute in HTML Tutorial

In this article 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>

Welcome to WebTrainingRoom

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

Comment
Name Email Website
Subscribe
 
Id, Name attribute in HTML Tutorial

Group Training