What are valid / invalid names for HTML form tags in jQuery?

Question

This flows from the error I ran into here jQuery $('form').serialize() returns only one element of a form serialized where having a form tag named "elements", like so:

<form>
<input name="elements"/>
<input name="e2"/>
</form>

prevents you from accessing all the named elements of the form with jQuery's $('form').serialize() (ie you get "elements=" where you should get "elements=&e2=").

I'd like to have more general information about what proper "name" elements of form tags. Ie what are the off-limits tags ("elements", "name", etc.), and what are the valid characters for a name. Are these things defined in a standard, or a reference manual, or is it trial and error?

Thoughts and input appreciated.

Thanks for reading.

Answer 1

Beside what Jonathan Sampson said you should not use names that are used for form objects properties. There is a list on Mozilla Developer Center , which if you'll look carefully contains an elements property important for you because form elements may be accessed as direct attributes of the form object. For example in your case:

form.elements; // collides with the built-in elements property
form.e2;

So be careful not to use names like method , or action which will also collide with the value of the method and action attributes of the form element. I hope you got the idea.

Answer 2

There's a difference here between "invalid" names and "taken" names, in regards to DOM properties.

Jonathan Sampson's answer does well to address "invalid" names, but based on your previous question, what think you're asking about is "taken" names, as in, "what are all the other DOM properties on a form node?"

The short answer is: a lot.

The long answer is basically a sum of these two lists , which is to say "DOM properties common to ALL nodes" and "DOM properties unique to form nodes"

The big ones you really want to worry about are the 2nd list - they can break how your form is supposed to function.

Answer 3

There's quite a lot.

All of these a valid methods/properties that can be found on FORM elements (due to interface inheritance), and all of them can be overwritten by same-named fields. Therefore, I would suggest to avoid these names, not to run into accidental conflicts:

Node interface members

ELEMENT_NODE
ATTRIBUTE_NODE
TEXT_NODE
CDATA_SECTION_NODE
ENTITY_REFERENCE_NODE
ENTITY_NODE
PROCESSING_INSTRUCTION_NODE
COMMENT_NODE
DOCUMENT_NODE
DOCUMENT_TYPE_NODE
DOCUMENT_FRAGMENT_NODE
NOTATION_NODE
nodeName
nodeValue
nodeType
parentNode
childNodes
firstChild
lastChild
previousSibling
nextSibling
attributes
ownerDocument
insertBefore
replaceChild
removeChild
appendChild
hasChildNodes
cloneNode
normalize
isSupported
namespaceURI
prefix
localName
hasAttributes

HTMLElement interface members

id
title
lang
dir
className

HTMLFormElement interface members

elements
length
name
acceptCharset
action
enctype
method
target
submit
reset
item
namedItem

I also made a test for these some time ago, which allows to test how different browsers "behave" with these names.

Answer 4

Ancient question, but still applies to this day...

With forms, you cannot have an input with the same name as a form property per se. There is no hard restriction, but whatever you do will overwrite a form's attributes. The list of form attributes is extensive, varies by browser and JS engine, and could change at any time without notice. Therefore a static list would be of no use.

A form's property value will be overwritten with a reference to any field having the same name as that attribute. IE: if you have a field named "action", then the form's action attribute will be overwritten with a reference to that element named "action". Without an input named "action": form.action is a URL. With an input named "action" form.action is an element. Some explanation found here: Why JS function name conflicts with element ID? . "name", "action" or "id" might be a preferred name of a form field, and the JS world never accounted for that.

There is a save from this complete failure of the JS world: It is noted by a commenter on MSDN ( http://msdn.microsoft.com/en-us/library/ie/ms536429%28v=vs.85%29.aspx ) to instead use the getAttributeNode() method of the form object to get the real form property value. Works in FF current and IE ~7. With this method, you can have a field with the same name as a form element attribute. This should allow one to decouple HTML/JS restrictions from API's simultaneously serving various other client types.

Answer 5

If your goal is to avoid conflicting with any possible pre-existing properties of the form object in javascript, then I think the official standard you're looking for is the Document Object Model.

If you want to experiment and see what the built-in properties of a form object are in a real broswer, try this:

<html><body onLoad="showEm()">
<form id="foo"></form>

<script>
function showEm() {
    for(var e in document.getElementById("foo")) {
      document.writeln(e);
      document.writeln("<br>");
    }
}
</script>

<body>
</html>

Note however that the vast majority of these would be harmless for you to "override" and I'm not even sure if all of them can be overridden.

Answer 6

Thank you everyone for the helpful answers. The answers seem to be geared towards what's on the DOM and ought to not be used (ie "elements", etc.). The other part of the question is what characters are permitted.

I've found the spec on what characters are allowed for name tokens in HTML4 , which says:

6.2 SGML basic types

...

• 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 (".").

Answer 7

Don't start with numbers ("1Cow"), dont use punctuation ("oneCow!?"), and don't include spaces ("one Cow").

There are cases where you may use square-brackets [ and ] if you're a PHP-programmer and wish to create an array from multiple elements sharing the same name.

<input name='colors[]' value='blue'  />
<input name='colors[]' value='black' />

Answer 8

据我所知，这里没有“保留字”，因此如果符合有效字符的标准（没有空格，标点符号并且必须以字母开头），则name属性可以包含任何内容。

Answer 9

Given your initial problem I suspect it is just trial and error, or a deep knowledge of the libraries that you are using (which can be unrealistic, granted).

Certainly, stick with alpha characters, but it ought to be ok to append numeric to the end.

A bugbear for many in ASP.NET that adds a dollar notation to the name tag might help, so you could give that a try. I certainly be interested to see what happens.