HTML O que significa value no HTML ?

[Samuel Fortes Brasil]

Olá! Estou realizando um exercício de lógica de programação com javascript, porém me deparei com um elemento do html "value" e não sei direito o que ele faz, alguém poderia me dizer ?

input type="submit" value="Converter em Horas e Minutos">

esse é value de um exemplo de um exercício semelhante, esse input está dentro de um <form>, mas acredito que o value tenha mais de um uso devido a isso, alguém explica tudo que pode-se fazer com esse elemento ? 

[DiF]

@Samuel Fortes Brasil Basicamente o value no input do tipo submit, acrescenta nome ao "botão".

Você deveria testar isso em prática para ver.   Nada melhor do que a a prática para entender o que faz as coisas.

 

Nesse caso do exemplo, o botão submit vai ter o nome " converter em horas e minutos"...    já se for em um campo input do tipo text ou outro sem ser submit, o value  age como um passador de valores.. ou seja:

<input type="text"  id="texto" />
<input type="submit" id="btn" value="Mostrar value do campo de texto"/>


let botao = document.getElementById("btn");

botao.addEventListener("click", (e) => {
   let campoTexto  = document.getElementById("texto").value;
   e.preventDefault(); 
   alert(campoTexto);
});

 

Exemplo online: https://jsfiddle.net/dife/ozge043u/

[Samuel Fortes Brasil]

@DiF Entendi na parte dos submit! Seria algo mais estético se for apenas pelo nome. Mas o value muda o significado se estiver trabalhando em um text e um arquivo JavaScript, correto ? Poderia explicar um pouco melhor essas outras formas do value ? Só não entendi isso hahaha

 

[DiF]

@Samuel Fortes Brasil Não tem muito mistério... o "value" é o valor do elemento.  Serve para qualquer elemento com entrada de valores... como por exemplo  text, radio Button, checkbox

 

 Como eu mencionei ali acima,  nada melhor do que a prática para você entender o que é.  clica no link,  escreva alguma coisa no campo e clique no botão.

 

Por exemplo você pode criar input do tipo hidden e passar valores para um formulário... exemplo:

 

<input type="hidden"  value="algum valor aqui" />

Muito utilizado por exemplo para enviar outros valores que  normalmente não ficam visiveis no formulário.

Enfim,  o value é o valor do elemento que será enviado.

 

Não necessariamente você precisa usar o value nos inputs. Por exemplo, se estiver integrando com o PHP,   basta adicionar o atributo  "name"  que vai passar o valor do campo para o php...  exemplo simples:

 

<input type="text"  name="email" />

 

No php o value é recebido assim:

$email  = $_POST["email"];

Veja, é só um exemplo para você se situar, não vou entrar neste mérito ainda.

 

Mas por exemplo quando você está lidando com um formulário e javascript,  você vai usar o value no javascript, mesmo que você não tenha declarado no elemento HTML..

<input type="text" id="texto" />

let texto = document.getElementById("texto").value 

 

[Samuel Fortes Brasil]

@DiF sensacional sua explicação! 

Muito obrigado.