What are valid / invalid names for HTML form tags

2020-07-10 05:38发布

站内问答 / JavaScript
706 9 4

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

9条回答
老娘就宠你
2楼-- · 2020-07-10 06:08

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.

查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
3楼-- · 2020-07-10 06:12

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.

查看更多
0人赞 添加讨论(0) 举报
劫难
4楼-- · 2020-07-10 06:17

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.

查看更多
0人赞 添加讨论(0) 举报
小情绪 Triste *
5楼-- · 2020-07-10 06:22

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.

查看更多
0人赞 添加讨论(0) 举报
疯言疯语
6楼-- · 2020-07-10 06:23

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' />
查看更多
0人赞 添加讨论(0) 举报
趁早两清
7楼-- · 2020-07-10 06:25

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 (".").
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)