Para que serve o atributo name no html?

Indicação
Para que serve o atributo name no html?

O HTML é a linguagem de marcação padrão para a criação de páginas web, e o atributo “name” desempenha um papel crucial em formulários e interações dinâmicas. Por isso, nesta postagem, exploraremos em detalhes o significado e a utilidade do atributo “name” no HTML.

Conteúdo

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. Por isso, 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. Pois, quando um formulário é submetido, os valores dos campos de entrada são enviados ao servidor com base nos nomes definidos pelo atributo “name”. Então, isso permite que o servidor processe os dados adequadamente.

Exemplo de uso em formulário simples:

				
					<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 no HTML 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.

Exemplo de uso em uma caixa de seleção:

				
					<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. Logo, quando o formulário é enviado, o servidor recebe o valor selecionado com base no nome “cidade”.

Referência em scripts do lado do cliente

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

Exemplo do uso do atributo name no html de referência em JavaScript:

				
					// 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.

Conclusão sobre o atributo name do html

Em suma, o atributo “name” no HTML é uma parte fundamental na construção de formulários e interações web. Ele permite que os desenvolvedores identifiquem e acessem facilmente os elementos de formulário, além de fornecer uma maneira estruturada de enviar e processar dados do usuário. Ao criar 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.

Como se tornar um desenvolvedor Web?

Não é necessário ter um certificado ou formação específica para ser um desenvolvedor web. Porque o importante é obter conhecimentos teóricos e práticos sobre programação, e assim irá adquirir experiência para entrar no mercado de programação web.

Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Pratique, acesse o editor HTML
mokup phone
Aprenda a desenvolver para a web de graça!

Cadastrar agora

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.

Pesquisa
*A busca não retorna histórias,
para isso visite a página histórias
Digite aqui para obter os resultados da pesquisa!
Ebook Criar com HTML e CSS - Mukup

Cadastrar agora

Aprenda a desenvolver para a web de graça! Mais ebook de bônus.

*Não enviamos spam, ao enviar você aceita nossas políticas de privacidade.