Non Existing Attributes HTML Input Field

Is it good practice to attach an non existing attribute to an html element in order to use it in jquery. For example then sim

Solution 1:

You should use the prefix data-<myAttribute>. It is supported by HTML5, other browsers will ignore it and you can access it easily with jQuery using the .data() method.

<input  id="myInput" type="text" data-MySuperMassiveAttribute="Awesome"/>

and you can retrieve that information like so :

var howAmI = $('#myInput').data('MySuperMassiveAttribute');
alert(howAmI); // now everybody knows how awesome you are ;-)

Solution 2:

Use HTML5 data- prefix for new attribute like this:

<input type="text" data-valrule="someregexstring" />

Its valid HTML 5..

http://ejohn.org/blog/html-5-data-attributes/

Solution 3:

You definitely can. Although HTML5 introduced what's called data- attributes, allowing to set non-standard attributes to elements in a standard way.

You simply prefix the attribute names with data-

<input type="text" data-valrule="someregexstring" />

Although, this is introduced in HTML5, you can still use it with documents for HTML4.

---

Using jQuery (1.4.3+), the data- attributes can be accessed with .data() - or via .attr().

Solution 4:

I personally wouldn't do that. Some browsers ignore "non-existing" attributes when parsing HTML, therefore these attributes wouldn't be saved in the browser page DOM. When jQuery selectors are executed, they may not find this attribute.

If you are guaranteed to run in HTML5-compliant browsers, then you can use HTML5 data- prefix for your attributes, e.g.

<input type="text" data-valrule="someregexstring" />

However this still may not work if you run in older browsers. For example, it turns out that almost half of our clients are using IE7 with no plans to upgrade (moving with the speed of government).