Adding custom attributes to HTML tags in an xHTML page

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Adding custom attributes to HTML tags in an xHTML page

Post by anjanesh »

Hi

I have my page in xHTML 1.1

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
I would like to know if its valid to add my own attributes to standard HTML tags.

Example :

Code: Select all

<input type="text" size="10" id="t1" name="t1" myatt1="myval1" myatt2="myval2"/>
Would myatt1 and myatt2 be rendered valid ? I need to use these in my JS code.

Thanks
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

why not try it?
timvw
DevNet Master
Posts: 4897
Joined: Mon Jan 19, 2004 11:11 pm
Location: Leuven, Belgium

Post by timvw »

They are invalid, because they are not mentionned in the DTD you are using. (However, i don't think tools like w3.org validator will parse/interpret JS) So, you could write your own DTD and validate against that. .

Untill now i haven't seen an rendering engine that choked on "additional" attributes.

But, the main question: Why would you need to add these in your html? As they will be used by JS, i think it's better to store them in a JS file..
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

Its not working in IE or FF.
But somehow I thought making the page xHTML will allow our own attributes to be inserted in the tags.
Any work-around for this ?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Javascript can add attributes to a tag.
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

Many times I've come across situations where I need more attributes for a tag. All this time I used title for that hidden attribute but in this case I need to use title for the real purpose - showing the title. So I got to add my own attributes.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<script type="text/javascript">
function foo()
 {
        var s1 = document.getElementById("s1");
        alert(s1.att1);
 }
</script>
</head>
<body>

<select id="s1" onchange="foo()">
<option value="1" att1="11">Option 1</option>
<option value="2" att1="12">Option 2</option>
<option value="3" att1="13">Option 3</option>
<option value="4" att1="14">Option 4</option>
<option value="5" att1="15">Option 5</option>
</select>

</body>
</html>
In IE and FF - returns undefined.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

your code is looking for att1 in the select object, not the selected option. :?

Code: Select all

alert(s1.options[s1.selectedIndex].getAttribute('att1'))
works.
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

Oh..Thanks for that. I assumed att1 would be passed to the select object just as value is.
How come

Code: Select all

alert(s1.options[s1.selectedIndex].att1);
doesnt work in FF, while it does in IE ?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

attributes don't auto-register as properties of the object. IE takes the lazy approach. ;)
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

Guess I'll have to use setAttribute for att1 because W3C's validator is returning
there is no attribute "ATT1".
Post Reply