Valid Order for Attributes of Input Type Tag

valid order for attributes of input type tag

You can use any sequence

Does order of attributes matter in script tags?

The order of attributes in HTML elements doesn't matter. You can write the attributes in any order you like id last onclick first - it does not matter.

Does the order of HTML attributes have any effect on performance?

None to speak of I don't think. All the properties within each tag have to be parsed and read before the tag can be properly understood by the browser.

As long as the code is syntax-error free and (obviously) the shorter the better.

HTML input set type from value

Create Form Controls

from an Object Literal Key/Value Pairs

A few values from user object are invalid (you should at least put an email address for email and 10 digits for phone). So I have corrected and modified user object so it can simulate real data.

type="datetime" is deprecated, use type="datetime-local"

Figure I

In the example below are 7 functions:

Function	Purpose
`formatDate(d)`	^{Date values must be formatted before being set to a type="datetime-local" input.}
`typeFilter(k, v)`	^{Determines what type of form control should be used according to value.}
`formControl(k, v, t)`	^{Generates an object for each key/value. Each object has a value of a htmlString of a form control}
`userData(o)`	^{Processes returns from typeFilter() and formControl() and will return a single object that contains all of the htmlSrings.}
`parseHTML(h, n, p=)`	^{Parses htmlString into real HTML.}
`makeLabel(n, p=)`	^{Creates a <label>}
`setID(n, a=)`	^{Set's/changes attributes of an element}

How to make HTML input tag only accept numerical values?

HTML 5

You can use HTML5 input type number to restrict only number entries:

<input type="number" name="someid" />

This will work only in HTML5 complaint browser. Make sure your html document's doctype is:

<!DOCTYPE html>

See also https://github.com/jonstipe/number-polyfill for transparent support in older browsers.

JavaScript

Update: There is a new and very simple solution for this:

It allows you to use any kind of input filter on a text <input>,
including various numeric filters. This will correctly handle
Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations,
non-typeable keys, and all keyboard layouts.

See this answer or try it yourself on JSFiddle.

For general purpose, you can have JS validation as below:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

If you want to allow decimals replace the "if condition" with this:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Source: HTML text input allow only numeric input

JSFiddle demo: http://jsfiddle.net/viralpatel/nSjy7/

number' is not a valid type for an input tag - On my local machine only

This makes no sense.. but as inspired by this answer:
https://stackoverflow.com/a/27561096/390501

I updated my Target Framework in Visual Studio to 4.5.1 rather than 4.5 and now the page loads without a parser error!

Can the name attribute of the input of the HTML form not have the same value as the type attribute?

The type attribute needs to be one of the valid available values, such as text or password.

The name attribute is something you define.

Possible reason why sometimes things don't work for you when they're the same value is that maybe you've given type attribute a value that's not valid for it.

For example:

<input type="coupon" name="coupon">    <!-- This won't work, type "coupon" doesn't exist -->
<input type="password" name="password"> <!-- This will work -->
<input type="text" name="coupon"> <!-- This will work -->

The second one will work, because password is a valid value for the type attribute.
The first one won't work, because there's no such input type as "coupon". So that type needs to be changed to "text".

It's an easy mistake to make, so I suggest check that.

What are valid values for the id attribute in HTML?

For HTML 4, the answer is technically:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

The id attribute is case sensitive in XHTML.

As a purely practical matter, you may want to avoid certain characters. Periods, colons and '#' have special meaning in CSS selectors, so you will have to escape those characters using a backslash in CSS or a double backslash in a selector string passed to jQuery. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.

For example, the HTML declaration <div id="first.name"></div> is valid. You can select that element in CSS as #first\.name and in jQuery like so: $('#first\\.name'). But if you forget the backslash, $('#first.name'), you will have a perfectly valid selector looking for an element with id first and also having class name. This is a bug that is easy to overlook. You might be happier in the long run choosing the id first-name (a hyphen rather than a period), instead.

You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it firstName or FirstName?" because you will always know that you should type first_name. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don't mix them.

A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed id="firstName" in your HTML (lower-case 'f') and #FirstName { color: red } in your CSS (upper-case 'F'), that buggy browser would have failed to set the element's color to red. At the time of this edit, April 2015, I hope you aren't being asked to support Netscape 6. Consider this a historical footnote.

Valid Order for Attributes of Input Type Tag