O HTML é usado para criar a estrutura da página da web, e os idiomas de script como JavaScript são utilizados para tornar a página da web mais interativa e dinâmica. Além disso, o HTML oferece atributos diferentes para seus elementos que ajudam a codificar JavaScript. Por exemplo, precisamos de formulários em quase todos os aplicativos para inserir informações. Para enviar dados de formulário ao servidor, é necessário ter um botão que busque as informações digitadas e envie para JavaScript para processamento adicional.

Este guia vai ensinar sobre o html “"Tendo o valor do atributo"enviar”. Então, vamos mergulhar!

Como adicionar o botão HTML Type = "Submeter" Atributo?

Em HTML, primeiro, adicione um nome de classe “myform”. Em seguida, execute as seguintes etapas:

• Dentro da div, adicione

  Tag para o cabeçalho.

• Em seguida, adicione duas caixas de texto para o primeiro e sobrenome com rótulos. O "paraAtributo do “rótulo”Tag e a“eu iaAtributo do “entrada”A tag deve ser a mesma. Isso associará a legenda ao controle de entrada.
• Adicione um botão com o “tipo”Valor definido como“enviar","valor" como "enviar", e "eu ia" como "enviar”.
• Depois disso, associe o “addData ()”Função com o botão Enviar, que acionará quando o botão for clicado. Este formulário pegará os dados do usuário e os exibirá na mesma página.
• Por fim, especifique

  tags onde os dados enviados precisam ser exibidos. Esses

  Tags atribuíram IDs como “DisplayFName" e "displaylname”Isso será utilizado no arquivo JavaScript para acessá -los e executar a operação adicional.

Html

O atributo "Enviar" do tipo de botão

Primeiro nome:



Sobrenome:



Enviar

Você enviou o primeiro nome:> __________.

Você enviou sobrenome:> ___________.

Vamos aplicar alguns estilos de CSS à div acima mencionada. Aqui o ".myform”Refere -se ao nome da div mencionado no arquivo HTML:

• Atribua o “cor de fundo”Valor da propriedade como“#81B29A”.
• ““alinhamento de texto" como "Centro”Alinham o conteúdo da div no centro.
• O "altura”O valor da propriedade é definido como“300px”.
• ““tamanho da fonte"É definido como"grande”.

CSS

.myform
Background-Color: #81B29A;
Alinhamento de texto: centro;
Altura: 300px;
tamanho de fonte: grande;

Observação: Não adicionamos o código JavaScript. Como resultado, o botão Enviar não responderá:

Agora, vamos para codificar a função JavaScript que será acionada no botão Clique. Para fazer isso, em primeiro lugar, crie um novo arquivo com uma extensão como “.JS”. Em seguida, defina uma função chamada “addData ()”. Esta função primeiro buscará o valor de ambos os campos de entrada acessando -os usando seus IDs no documento.getElementById () método. Em seguida, exiba o valor buscado como o texto interno dos rótulos adicionados.

JavaScript

função addData ()
var fname = documento.getElementById ("fname").valor;
var lname = documento.getElementById ("lname").valor;
documento.getElementById ("DisplayFName").inerText = fname;
documento.getElementById ("DisplaylName").inerText = lname;

Pode -se observar que depois de entrar no primeiro e sobrenome quando o “Enviar”O botão é clicado, os nomes são exibidos nos rótulos:

Aprendemos como o botão Enviar HTML funciona com demonstração prática.

Conclusão

No HTML, existem centenas de elementos como parágrafos, campos de entrada, botões e muito mais. Mais especificamente, o elemento de botão HTML com o valor do atributo “enviar”É utilizado para enviar os valores de dados ao manipulador de formulários ou para processar os valores de entrada. Neste guia, utilizamos o botão Enviar para invocar uma função JavaScript com exemplos práticos.