Atributo name no HTML: para que serve e quando utilizar?

O atributo “name” é um elemento chave e de extrema importância para validação de formulários e interações dinâmicas. Nesta postagem, exploraremos em detalhes o significado e a utilidade do atributo “name” no HTML.

O que é o atributo “name” no HTML?

O atributo “name” é um dos atributos fundamentais em HTML, usado para identificar elementos específicos em uma página web. Ele é frequentemente associado a elementos de formulário para permitir a referência e a manipulação desses elementos por meio de scripts do lado do cliente ou ao enviar dados para um servidor.

Utilização em Formulários

Em formulários HTML, o atributo “name” é essencial para identificar e nomear os diferentes campos de entrada. Quando um formulário é submetido, os valores dos campos de entrada são enviados ao servidor com base nos nomes definidos pelo atributo “name”. Isso permite que o servidor processe os dados adequadamente.

<form action="/submit_form.php" method="post">
  <label for="username">Nome de usuário:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Senha:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Enviar">
</form>

No exemplo acima, os campos de entrada “username” e “password” possuem os atributos “name” definidos como “username” e “password”, respectivamente. Assim, quando o formulário é enviado, os valores inseridos nesses campos são enviados ao servidor com esses nomes.

Utilização do atributo “name” em elementos de seleção

Além de campos de entrada, o atributo “name” também é usado em elementos de seleção, como caixas de seleção (<select>) e botões de opção (<input type="radio"> e <input type="checkbox">). Ele é usado para agrupar e identificar as opções selecionadas pelo usuário.

<select name="cidade">
  <option value="1">Nova York</option>
  <option value="2">Los Angeles</option>
  <option value="3">Chicago</option>
  <option value="4">Houston</option>
</select>

Neste exemplo, o atributo “name” está definido como “cidade”, e cada opção tem um valor único. Quando o formulário é enviado, o servidor recebe o valor selecionado com base no nome “cidade”.

Exemplo de manipulação do elemento com JS

O atributo “name” também é amplamente utilizado em scripts do lado do cliente, em especial para manipular elementos de formulário por meio de JavaScript. Ele permite que os desenvolvedores acessem e modifiquem dinamicamente os valores dos campos de entrada, facilitando a validação e a interatividade.

// Acessando o valor de um campo de entrada com base no atributo "name"
var username = document.getElementsByName("username")[0].value;

Neste exemplo, o valor do campo de entrada com o nome “username” é acessado e armazenado na variável “username” para posterior manipulação.

O atributo “name” no HTML é uma parte fundamental na construção de formulários e interações web. Ao desenvolver páginas web, é essencial atribuir nomes significativos aos elementos usando o atributo “name”, garantindo uma experiência de usuário fluida e uma integração eficiente com o backend.