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.
Related
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
What is the best practice for declaring directives on a HTML page. Per the http://angular-ui.github.io/bootstrap/#/pagination the directive is shown as so
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
per this stackoverflow question What are the advantages of using data- rather than x- prefix for custom attributes?
a better way of representing this directive would be as follows & conforms to HTML5 specifications
<div data-pagination data-total-items="totalItems" data-ng-model="currentPage" data-max-size="5" class="pagination-sm" data-boundary-links="true" data-rotate="false" data-ng-change="pageChanged()"></div>
HTML validation isn't all that important. Sometimes they can be safely ignored. However just by adding a 'data-' prefix on all attributes, the editor would stop complaining about invalid html.
read more about it here
Both are the same -> angular directives.
Use the shorter one.
data-ng-model = "user.name" and ng-model="user.name" provide you with the same outcome. You can use either. You can replace 'data' with 'x' and get the same outcome as well. You add the 'data' prefix to have them validated by html5 validators.
I've read that HTML "boolean attributes" such as readonly, disabled, required (etc.) can either be blank or have a value of their name. And people seem to be using both styles (see How should boolean attributes be written?)...
So it seems that the best way to accommodate this is to write your CSS like:
input[readonly], input[readonly="readonly"] {
}
(https://stackoverflow.com/a/19644231/1766230)
But is there a more concise way to write this? Maybe using some CSS3 attribute selector magic? I've tried input[readonly*=""], but without luck.
As #JoshC writes in a comment, you can simply use input[readonly]. This CSS selector (which is ignorant of all markup serialization issues) matches an input element that has the readonly attribute, no matter what its value is. The XHTML (XML) requirement that every attribute specification must include a value does not affect this.
Boolean values in HTML don't need an actual value. They are true if they exist and false if they don't.
However, In XHTML boolean values need to be set as a string that contains the name of the attribute set.
In HTML
<input ... readonly>
The CSS
input[readonly] { ... }
In XHTML which is annoying and I want to avoid at all costs
<input ... readonly="readonly" />
The CSS
input[readonly="readonly"] { ... }
Edit: As a lot of people point out, you can write just readonly in XHTML CSS since matching the existence of the attribute would work even if the attribute is set to something such as readonly="readonly".
The CSS for XHTML is the same
input[readonly] { ... }
Unless you are using the CSS in both XHTML and HTML documents there is no need to write both forms of the selector. Just stick to HTML with <input readonly> and input[readonly]
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.
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