Trabalhando com Formulários HTML em JavaScript

Uma das maneiras de interagir com os usuários são os formulários HTML. Por exemplo, se precisarmos obter algumas informações do usuário, podemos definir um formulário na página da web que incluirá campos de texto para inserção de dados e um botão para envio. Após a entrada dos dados, podemos processar as informações inseridas.

Para criar um formulário, usamos o elemento <form>:

<form id="search" name="searchName"></form>

No JavaScript, o formulário é representado pelo objeto HtmlFormElement. Após criar o formulário, podemos acessá-lo de várias maneiras.

Obtendo um Formulário

O primeiro método envolve acessar diretamente pelo nome do formulário:

const searchForm = document.searchName;

O segundo método envolve acessar a coleção de formulários do documento e buscar o formulário desejado dentro dela:

const searchForm1 = document.forms["searchName"]; // pelo nome
const searchForm2 = document.forms[0]; // pelo índice

O terceiro método envolve obter o formulário usando métodos padrão para buscar um elemento por id, por tag ou por seletor. Por exemplo:

const formById = document.getElementById("search");
const formByName = document.getElementsByName("searchName")[0];
const formBySelector = document.querySelector("form");

Propriedades e Métodos dos Formulários

Um formulário possui várias propriedades, das quais destacarei as principais:

name: nome do formulário
elements: coleção dos elementos do formulário
length: quantidade de elementos no formulário
action: valor do atributo action, que representa o endereço para o qual o formulário é enviado
method: valor do atributo method, que representa o método HTTP usado para o envio

Por exemplo, vamos obter as propriedades do formulário:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <form id="search" name="searchName" action="https://google.com/search" method="get">
      <input type="text" id="key" name="q" />
      <input type="submit" id="send" name="send" />
    </form>
    <script>
      const form = document.getElementById("search");
      console.log(form.elements); // HTMLFormControlsCollection(2) [input, input, q: input, send: input]
      console.log(form.length); // 2
      console.log(form.name); // searchName
      console.log(form.action); // https://google.com/search
      console.log(form.method); // get
    </script>
  </body>
</html>

Entre os métodos do formulário, é importante mencionar o método submit(), que envia os dados do formulário para o servidor, e o método reset(), que limpa os campos do formulário:

const form = document.forms["search"];
form.submit();
form.reset();

Elementos dos Formulários

Um formulário pode conter vários elementos de entrada HTML como input, textarea, button, select, etc. Para cada um desses elementos, existe um tipo específico em JavaScript:

Elemento HTML	Tipo JavaScript
`<input>`	`HTMLInputElement`
`<textarea>`	`HTMLTextAreaElement`
`<select>`	`HTMLSelectElement`
`<option>`	`HTMLOptionElement`

Para obter elementos de um formulário, podemos usar seguintes métodos:

Usando métodos padrão como getElementById(), getElementsByClassName(), getElementsByTagName(), getElementsByName(), querySelector(), e querySelectorAll() para buscar elementos por id, classe, tag, nome ou seletor. Por exemplo, vamos obter o campo de entrada da forma anterior:
```
// obtemos o elemento por id="key"
const keyField = document.getElementById("key");
console.log(keyField);
```

Usando a propriedade elements do formulário correspondente. Por exemplo:

const form = document.getElementById("search");
// obtenção do campo por índice
const keyField = form.elements[0];
console.log(keyField);
// obtenção do mesmo campo, mas pelo nome
const keyField2 = form.elements["q"];
console.log(keyField2);

Usando o nome do formulário e do elemento. Por exemplo:

// campo q no formulário search
const keyField = document.search.q;
console.log(keyField); // input#key

Propriedades dos Elementos do Formulário

Todos eles têm várias propriedades e métodos comuns. Assim como o formulário, os elementos do formulário têm a propriedade name, através da qual podemos obter o valor do atributo name. Outra propriedade importante é value, que permite obter ou alterar o valor de um campo:

<form id="search">
  <input type="text" name="key" value="hello world" />
  <input type="submit" name="send" />
</form>
<script>
  const form = document.getElementById("search");

  // obtenção do campo do formulário pelo nome
  const keyField = form.elements["key"];

  // obtenção do valor do campo
  console.log(keyField.value);

  // configuração do valor do campo
  keyField.value = "Enter a string";
</script>

A propriedade type permite obter o tipo de campo de entrada. Isso pode ser o nome da tag do elemento (por exemplo, textarea) ou o valor do atributo type para elementos input.

Além disso, os elementos do formulário têm métodos como focus() e blur() para focar e remover o foco do elemento, respectivamente:

const searchForm = document.forms["searchName"];
const keyField = searchForm.elements["key"];
keyField.focus();