How to add a custom attribute to a HTML control.
<input type="text" validate="xyz"></input>
I want to add a new attribute to the HTML control. validate here is the custom attribute.
Just add it.
HTML will ignore attributes it doesn't "know" about, so long as the markup is valid.
If you're using html5, you can use:
data-customAttributeName="whatever value"
The data- prefix is mandatory, but you can follow it up with anything you like (so long as it's a valid html character string (a-z, 0-9, underscore and hyphen1).
Beyond that, though, it's of little importance since html will ignore attributes it doesn't understand or simply can't parse. Custom attributes will likely, though, throw validation errors (unless you define and specify a custom DTD).
There's probably others, but I can't remember exactly.
Related
I know that custom tags need to have a "-". And I kwnow that custom attributes need the "data-" prefix. But what about custom attribute on a custom tag?
If I define a custom HTML tag/element, such as <x-sososlik></x-sososlik>.
And I need some custom attributes on it. For example: hair-color.
Does that attribute need the data-* prefix?
<x-sososlik hair-color="green"></x-sososlik>
-or-
<x-sososlik data-hair-color="green"></x-sosolik>
The question is more about "what is the CORRECT way", because it works with both.
I'm asking because I cannot find that information.
I need to know it because I'm trying to shorten the attribute names on existing project, in the real code there a lot of them.
No, you don't need to use the data- prefix on an autonomous custom element (as opposed to a customized built-in element). As specified in the WHATWG HTML standard:
Any namespace-less attribute that is relevant to the element's functioning, as determined by the element's author, may be specified on an autonomous custom element, so long as the attribute name is XML-compatible and contains no ASCII upper alphas. The exception is the is attribute, which must not be specified on an autonomous custom element (and which will have no effect if it is).
I know that the textarea doesn't support the functionality of pattern, however if I set the pattern variable in html, its still present in the browser.
So I have to execute the pattern verification in js anyways, but is it OK for me to store the pattern in the pattern attribute? As opposed to data-pattern or something, for consistency with the input elements?
You should use data-* attributes for extra attributes and since textarea tag does not support the pattern attribute then adding it like adding value to div.
Hope this helps.
Custom attribute is suppose to have the data- prefix, so I recommend to use that or you could ran into issues when validating your code.
And what happens if such an attribute suddenly become a standard attribute?
More to read:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes
I have an HTML page that is way too junky, so I am trying to trim it down.
I always put type='text' on my inputs, when they are text inputs:
<input type="text" />
However, it doesn't seem that browsers strictly require that.
Is omitting this attribute where it is text considered bad practice?
The type attribute has always been optional, defaulting to text, in all HTML specifications (which start from HTML 2.0) and in all implementations. It is thus safe to omit it, and of course equally safe to include it, when you want to have a text input field.
In the DOM, <input> and <input type=text>, have the same representation (including the presence of a type property of the element node, with the value 'text'), except that only in the latter case the attributes property contains type. So any JavaScript processing that needs the type property works just the same.
It is a matter of opinion and taste whether it is useful to include it for symmetry with other input elements or for explicitness, so that a person reading HTML source will immediately see that we have a text input field, without needing to scan a possibly long list of attributes to see that no type attribute is present.
However, there is a technical difference that may matter, possibly making it advantageous to use the type=text attribute. In CSS, the selector input[type=text] matches only elements that have the attribute type=text explicitly set. If such attributes are used consistently, you can thus set styling properties for text input fields without affecting any other input fields. Otherwise you need a more complicated selector.
To answer to this question we can refer to:
HTML4 SPEC 17.4 The INPUT element
type =
text|password|checkbox|radio|submit|reset|file|hidden|image|button
[CI] This attribute specifies the type of control to create. The
default value for this attribute is "text".
The HTML5 Spec 4.10.5 The input element
The type attribute controls the data type (and associated control) of
the element. It is an enumerated attribute. The missing value default
is the Text state.
So, omitting the attribute is not considerable a bad practice
text is the default value for an input tag's type attribute in most if not all modern browsers. However, it isn't considered a "bad practice" to leave it off, only /good/ practice to include it.
If you are looking at modern browsers, they will surely handle it. But if your users are using older browsers (specially IE-older ones) then gods know what will happen. ;)
I'm curious... can you specify an HTML attribute that is empty or valueless?
The W3 spec allows for empty attributes like so:
<input type="checkbox" disabled checked>
And with MVC, you declare inputs like this:Html.CheckBoxFor(m=>m.Foo).
You can add Html Attributes with the Html.CheckBoxFor(m=>m.Foo, new {#class="myCssClass"}) syntax, but you can't do Html.CheckBoxFor(m=>m.Foo, new { disabled, checked})
I know the spec also allows for self-value attributes for these kinds (e.g. new {disabled="disabled"}) and empty string values (e.g. new {disabled=""}).
I'm just curious if there is any way to specify the empty syntax.
No, standard HTML helpers doesn't support this. You could write a custom HTML helper and build the markup yourself.
Late to the party, but ... this from w3schools:
"In XHTML, attribute minimization is forbidden, and the disabled attribute must be defined as: select disabled="disabled".
So for compliance, don't even try to use attribute minimization? But it seems the HTML helpers don't allow it anyway.
http://www.w3schools.com/tags/att_select_disabled.asp
Yes, you can. Set it to string.Empty and MVC5 will render an empty attribute.
new { disabled = string.Empty }
And yes, the HTML5 spec does allow empty attributes perfectly. XHTML is outdated.
Like a tag that I can use to store some necessary info? But really isn’t required or used by the HTML? Works like the tag attribute for objects on Visual Basic?
Up until HTML5 no. With HTML 5 there is provision for this with the data-* attribute.
For example:-
<div id="myStuff" data-mydata="here is my data">
In current technology there is no "official" away to do this. However all browsers allow you to add any arbitary attribute to a HTML element so in HTML4 you can do this:-
<div id="myStuff" data-mydata="here is my data">
Which as you can see is identical but not offically sactioned and if you want strict XHMTL compliance will be considered "broken".
You can access the attribute just as you would any other:-
var mydata = document.getElementById("myStuff").getAttribute("data-mydata");
You could perhaps use the html5 data-* attributes? It'll fail validation on html4, but it is still probably the best option...
If you're storing data to use in javascript, you can also use something like jQuery's Metadata plugin. Basically, you can store data within the element's class="" attribute, like so:
<div id="aaa" class="class1 class2 class3 { type: 'food', color: 'green' }"></div>
Then in javascript:
alert($('#aaa').metadata().color) // "green"
Other kits use the title or rel attributes to store data. While this is more validation friendly, it may or may not be better than using AnthonyWJones' answer of just using non-standard attributes. It'll "break" validation, but then again according to Dojo, custom attributes are perfectly valid HTML, even if they don't validate against a DTD.
So no - there isn't a single well accepted specific attribute where you can dump all data. All existing attributes are for specific uses. But you can either 1) create your own attributes, or 2) coopt an existing tag to reuse for your purposes. Just wanted to point out the alternative.
Have a look at www.htmlref.com or W3C for the used attributes.
Other than those you can just add your own, they will render and they will be accessible via code for instance in C# you can access a controls attribute collection.
Control.Attributes["MyCustomAttribute"] = "Hello World";
there’s rel and rev attributes, which work in elements with an href-attribute. they have a semantic meaning, but are often abused as an attribute to store additional information