Capture Form - More Correct Way

Question

Formerly I called a specific form per creation ID in the body of the document:

document.forms[0]

Only then did I understand what the attribute is for NAME in these cases, but I was in doubt, for example, I have more than one form on the page, can be a login or registration and other search, so I assign the corresponding name for each one, and I want to use the login form to validate by Javascript:

<form name="login">
<input type="text" value="" name="user" required />
<input type="password" value="" name="user" required />
<input type="button" onclick="validateLogin()" />
</form>

Only I don’t even know the right way to do it, both work in Firefox, Chrome and Opera:

1°:

document.forms['login']

2°:

document.forms.login

So I usually do like this:

var form = document.forms['login'] || document.forms.login

And I don’t even know if this really works, but I do it as a precaution in case some browser doesn’t work.

So what would be the best or most correct way to work in any browser on any platform?

Answer 1

I don’t think there is one more correct way, exists more efficient and practical way. If you just want to submit a form, you can omit the form name and submit it through the this in the onsubmit, that makes the process simpler.

For example:

function valida(i){

   if(!i.nome.value){
      alert("Informe o nome");
      return false;
   }

   if(!i.email.value){
      alert("Informe o email");
      return false;
   }
   
}

<form action="destino.php" method="post" onsubmit="return valida(this)">
      <h2>Cadastro</h2>
      <input type="text" name="nome" placeholder="Nome" />
      <br>
      <input type="text" name="email" placeholder="Email" />
    <button type="submit">Enviar</button>
</form>

The parameter i of function valida(i) is already the form. Then just enough you take the values of inputs (i.nome.value, i.email.value etc..).

If you have another form, it’s the same thing. The this will send the values of the submitted form. This way you do not worry about knowing "which form to capture", because the this already does it for you.

Answer 2

Both work, both are correct (the way to use) and both return HTMLCollection.

This return value is an interface similar to a array, may use collection[0] or collection.getItem(0) and to a object, may use collection.form_name.

The advantage of using the form name is that you will not have to worry about dynamic form, because the content of these, however vary quite.

You can also use it as follows (all of them are capture the same value).

const form1 = document.querySelector("form")
const form2 = document.getElementsByTagName("form")[0]
const form3 = document.forms[0]
const form4 = document.forms.login

Example:

const form1 = document.querySelector("form")
const form2 = document.getElementsByTagName("form")[0]
const form3 = document.forms[0]
const form4 = document.forms.login

console.log( form1 == form2 && form3 == form4 );

console.log( form1.elements.user );
console.log( form2.elements.user );
console.log( form3.elements.user );
console.log( form4.elements.user );

<form name="login">
  <input type="text" name="user" value="Your user" />
  <input type="password" name="pass" value="Your pass" />
</form>

Answer 3

Well I especially prefer to use Jquery because it is more "easy" and more "visually clean" but as you are using pure javascript here goes

<form name="login">
    <input type="text" value="" name="user" required />
    <input type="password" value="" name="senha" required />
    <input type="button" onclick="validateLogin()" />
</form>

<script>
    var form = document.getElementsByName("login");
    var campoUsuario = form.getElementsByName("user");
    var senha = form.getElementsByName("senha");
</script>

There are other ways to get the element by ID, Class, Tipó

document.getElementById("algumid");
document.getElementsByClassName("algumaclass");
document.getElementsByTagName("div");