Forms

Los elementos de formulario HTML son una excelente manera de recopilar información del usuario, incluso cuando los datos del formulario se procesan completamente mediante JavaScript del lado del cliente y nunca se envían al servidor. Hay algunas propiedades útiles de los elementos que facilitan un poco el trabajo con formularios en JavaScript.

Obtenga todos los formularios en una página

  
  let forms = document.forms;
  

Obtenga todos los elementos en un formulario

  
  let form = document.querySelector('form');
  let elements = form.elements;
  

Atributos del elemento de formulario

Puede verificar el valor de los atributos del elemento de formulario llamándolos directamente.

  
  <form id="signin">
    <label for="username">Username</label>
    <input type="text" id="username">

    <label for="password">Password</label>
    <input type="password" id="password">

    <input type="checkbox" id="rem_password" name="rem_password">
    <label for="rem_password">Remember password</label>

    <input type="radio" id="personal" name="login_mode" value="personal" checked>
    <label for="personal">Personal</label>

    <input type="radio" id="group" name="login_mode" value="group">
    <label for="group">Group</label>

    <button>Sign In</button>
  </form>
  

  
  let input = document.querySelector('#username');
  let type = input.type;
  console.log(type); //-> text

  let checkbox = document.querySelector('#rem_password');
  let name = checkbox.name;
  console.log(name); //-> rem_password

  let radio = document.querySelector('[name="login_mode"]:checked');
  let value = radio.value;
  console.log(value); //-> personal
  

También puede cambiar y establecer atributos con el mismo enfoque.

  
  let input = document.querySelector('#username');
  input.type = 'password';
  

Atributos del elemento booleano

Ciertos atributos, como si una entrada está o no deshabilitada, de solo lectura o marcada, usan valores booleanos simples verdadero o falso.

  
  let checkbox = document.querySelector('#rem_password');
  checkbox.checked;

  let radio = document.querySelector('#group');
  radio.checked = true;