Page 1 of 1

Adding custom attributes to HTML tags in an xHTML page

Posted: Thu Sep 01, 2005 11:46 am
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

Posted: Thu Sep 01, 2005 11:50 am
by feyd
why not try it?

Posted: Thu Sep 01, 2005 11:54 am
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..

Posted: Thu Sep 01, 2005 11:57 am
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 ?

Posted: Thu Sep 01, 2005 11:59 am
by feyd
Javascript can add attributes to a tag.

Posted: Thu Sep 01, 2005 12:01 pm
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.

Posted: Thu Sep 01, 2005 12:10 pm
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.

Posted: Thu Sep 01, 2005 12:17 pm
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 ?

Posted: Thu Sep 01, 2005 12:22 pm
by feyd
attributes don't auto-register as properties of the object. IE takes the lazy approach. ;)

Posted: Thu Sep 01, 2005 12:30 pm
by anjanesh
Guess I'll have to use setAttribute for att1 because W3C's validator is returning
there is no attribute "ATT1".