HTML Forms | Always using Ids to access

Question

I wanted to pick one for consistency ( though i don't think it matters ) and went with id....via document.getElementById().

no longer use

name attributes for js access
form array access

There are multiple posts on this...but just to make life easy and not think about it any more..I'm using ids only.

Are there any issues with this choice?

I don't care so much about N5 and N6 and W3 specs.

Here are some similar posts:

Best Practice: Access form elements by HTML id or name attribute?

So your question is whether omitting `name` attributes is bad? Yes it is, normal form submit won't work anymore. — Felix Kling, Aug 09 '12 at 22:16
You already mentioned other ways. A direct access via an ID makes sense to me. Use whatever way you feel most comfortable with, but form elements must have a `name` attribute either way. The name is send to server to identify the data. Values of elements without a `name` attribute are not sent. — Felix Kling, Aug 09 '12 at 22:20

score 1 · Answer 1 · answered Aug 09 '12 at 22:17

ID is suppose to be used for unique id's of every element on the page. so it's invalid to have more then once in the same document.

BUT... the NAME attribute can be repeated legally within the html standard. When name is used on a form input item, the values that the cgi recieves is based on name=value pairs. ID doesn't have an inherent name to it.

In all honesty.. I think your mixing apples and oranges here, as the two have very different purposes.

Eugene Naydenov · Accepted Answer · 2012-08-17T08:25:55.780

In case of usage of id for each form input when you have multiple forms with multiple inputs on one page you'll should care about uniqueness of identifiers for each input. So the identifiers could became long like "my-form-user-name" and "my-other-special-form-user-name", etc.

So I would suggest to give an id to form element, retrieve the form by id and then refer to its elements by name. It's easier to create unique and readable identifiers for a few forms than for 50 fields of 5 forms with 10 fields in each. And probably the code will be more readable.

<h4>Article form</h4>
<form id="article-form" method="post">
    <label>Title:</label>
    <input name="title" type="text" />
    <label>Text:</label>
    <textarea name="text"></textarea>
    <input type="submit" name="submit" value="Comment" />
</form>

<hr />

<h4>Support form</h4>
<form id="support-form" method="post">
    <label>Title:</label>
    <input name="title" type="text" />
    <label>Text:</label>
    <textarea name="text"></textarea>
    <input type="submit" name="submit" value="Submit issue" />
</form>
<script type="text/javascript">
    var article = document.getElementById('article-form'),
        ticket = document.getElementById('support-form');

    article['title'].value = 'My Article';
    article['text'].value = 'The text of my article...';

    ticket['title'].value = 'I found bug at your site';
    ticket['text'].value = 'Bug description...';
</script>

Fiddle

But if you're using labels like in my example and want to use attribute for in them to bind them to inputs, then you'll need have identifiers for that inputs anyway.

HTML Forms | Always using Ids to access

2 Answers2