Javascript with <form> seems to have multiple options

[Colin G]

Playing with forms and getting input.  Am using a <form> to contain elements for the convenience of being able to click <input> type "clear" to wipe <input> values ready for re input.

Now if I use "getelementbyid"  I can get a value from anywhere with a matching id, don't need a form specifically.  Then found some code that submits a form to javascript by calling myFunction(form)

function myFunction(form) {
   myvar = form.elementName.value ;

I presume the whole form 'object' is passed to the function.  The code is using element name not id, but if you delete the "name" in an element and replace with "id" and do the same in the function it still works.  Obviously the above is shorter than the whole "document.getelementbyid..." etc.

But then found that 

myvar = input1.value;  where "input1" is the element id works as well and there is no need to pass "form" to the function or have a long dot description.  Just trying to keep code as short and as readable as possible, but still be valid javascript and there seems to be a number of options!  Also would have more than one "form" on same page.  Of course "id" should be unique for each element anyway so is a lot of the long 'naming' unnecessary?

Comments?

[justsomeguy]

A lot of the behavior you're seeing might be browser-specific.  I would certainly never refer to an element just by its ID alone using something like input1.value, because eventually you're going to give an element an ID that already exists in the window object and then that's not going to work any more.  getElementById always works.  You can also use querySelectorAll to use a selector to find groups of related elements the same way you use a selector in CSS.  I wouldn't use form.elementName either, not all browsers may support that.  A form object has an elements collection which specifically contains the controls in the form.  If your form has an input with the name "name", then does form.name refer to the name element or the form's name attribute?  You want to avoid things like that, so if you want to iterate through the elements in a form then use the form.elements collection.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement

When in doubt, look it up on MDN and see what the specifications and browser compatibility say.

The best code is code that is easy to understand.  It doesn't matter how many characters are in document.getElementById, when you see that you know exactly what it's doing.

[Colin G]

Noted.  Sticking with "document.getElementByID" with every element having a specific id.  <form> gives a convenient way to clear field elements within it so don't have to set them individually, but will use "getElement" to obtain individual values.  I don't support browser specific behaviour, I try and stick to standards.