Atributo name no HTML: para que serve e quando utilizar?
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.
César Canteiro em Tempo de leitura: 3 minutos 91 views.
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.
