What's the point of HTML forms `name` attribute?

后端 未结 6 1787
情歌与酒
情歌与酒 2020-12-05 09:01

What\'s the point of the name attribute on an HTML form? As far as I can tell, you can\'t read the form name on submission or do anything else with it. Does it

相关标签:
6条回答
  • 2020-12-05 09:35

    name attribute is not completely redundant vis a vis id. As aforementioned, it useful with <forms>, but less known is that it can also be used with with any HTMLCollection, such as the children property of any DOM element.

    HTMLCollection, in additional to be a array-like object, will have named properties commensurate with any named members (or the first occurrence in case of non-unique name). It is useful to retrieve specific named nodes.

    For example, in the following example HTML:

    <div id='person1'>
       <span name='firstname'>John</span>
       <span name='lastname'>Doe</span>
       <span name='middlename'></span>
    </div>
    
    <div id='person2'>
       <span name='firstname'>Jane</span>
       <span name='lastname'>Doe</span>
       <span name='middlename'></span>
    </div>
    

    by naming each child, one can quickly and efficiently retrieve a named element, such as lastname, as such:

    document.getElementById('person1').children.namedItem('lastname')
    

    ...and if there is no risk of 'length' being the name of a member element, (being that length is a reserved property of HTMLCollection), a more terse notation may be used instead:

    document.getElementById('person1').children.lastname
    

    DOM Living Standard 2019 March 29

    An HTMLCollection object is a collection of elements...

    The namedItem(key) method, when invoked, must run these steps:

    If key is the empty string, return null.

    Return the first element in the collection for which at least one of the following is true: it has an ID which is key; it is in the HTML namespace and has a name attribute whose value is key;

    0 讨论(0)
  • 2020-12-05 09:39

    Once you assign a name to an element, you can refer to that element via document.name_of_element throughout your code. Doesn't work too tell when you've got multiple fields of the same name, but it does allow shortcuts like:

    <form name="myform" ...>
    
    document.myform.submit();
    

    instead of

    document.getElementsByName('myform')[0].submit();
    
    0 讨论(0)
  • 2020-12-05 09:40

    Here's what MDN has to say about it:

    name
    The name of the form. In HTML 4, its use is deprecated (id should be used instead). It must be unique among the forms in a document and not just an empty string in HTML 5.

    (from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-name)

    I find it slightly confusing that specifies that it must be unique, non-empty string in HTML 5 when it was deprecated in HTML 4. (I'd guess that requirement only applies if the name attribute is specified at all?). But I think it's safe to say that any purpose it once served has been superseded by the id attribute.

    0 讨论(0)
  • 2020-12-05 09:42

    In short, and probably oversimplifying a bit: It is used instead of id for browsers that don't understand document.getElementById.

    These days it serves no real purpose. It is a legacy from the early days of the browser wars before the use of name to describe how to send control values when a form is submitted and id to identify an element within the page was settled.

    0 讨论(0)
  • 2020-12-05 09:57

    You can use the name attribute as an "extra information" attribute - similarly as with a hidden input - but this keeps the extra information tied into the form, which makes it just a little simpler to read/access.

    0 讨论(0)
  • 2020-12-05 10:00

    From the spec:

    The name attribute represents the form's name within the forms collection.

    0 讨论(0)
提交回复
热议问题