ansaurus

Question

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

Answer 1

+1 A:

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' />

Jonathan Sampson 2009-08-18 19:08:38

Answer 2

A:

As far as I'm aware there are no "reserved words" as such, so provided the criteria regarding valid characters (no spaces, punctuation and must start with letter) is met then the name attribute can contain anything.

Tom Woolfrey 2009-08-18 19:12:05

Although I didn't mark down, I suspect you got it because the question was stating that they couldn't use 'elements' as a name, because of their use of the jQuery form plugin. Ordinarily there wouldn't have been any naming convention restrictions to the name tag as you intimated, however.

James Wiseman 2009-08-18 19:24:10

That's true. I guess I didn't really answer the question he was asking. :-(

Tom Woolfrey 2009-08-18 19:26:15

Answer 3

A:

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.

James Wiseman 2009-08-18 19:21:02

Answer 4

+2 A:

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.

Licky Lindsay 2009-08-18 19:21:40

Answer 5

+4 A:

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.

Ionuț G. Stan 2009-08-18 19:22:13

Sometimes I use Hungarian notation when naming form elements or I will use some more descriptive names like "first_name". This prevents reserved word issues.

Buggabill 2009-08-18 19:29:16

Answer 6

+3 A:

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.

Peter Bailey 2009-08-18 19:25:48

Answer 7

+2 A:

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.

kangax 2009-08-18 19:40:26

All the good names. Hmph. haha. Thanks, Kangax.

Brian M. Hunt 2009-08-18 20:30:31

Answer 8

A:

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

Brian M. Hunt 2009-08-18 20:29:48

ansaurus

tags:

views:

answers:

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

related questions