Botões de envio

Parte da seção JavaScript in Action do Journey de HTML da Coddy — lição 7 de 27.

Botões de envio são elementos essenciais em formulários HTML que permitem aos usuários enviar dados de formulário para um servidor para processamento.

Crie um formulário HTML básico com um botão de envio:

<form id="myForm">
  <input type="text" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>

O atributo type="submit" especifica que o botão deve enviar o formulário quando clicado.

Você também pode usar JavaScript para lidar com envios de formulários:

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Prevents the default form submission
  console.log('Form submitted!'); // This prints a message in the console
});

O método preventDefault() impede que o formulário seja enviado da maneira tradicional, permitindo que você manipule o envio com JavaScript.

Desafio

Fácil

Sua tarefa:

Adicione um botão de envio ao formulário com type="submit"
Dentro do ouvinte de evento submit, use a variável message para definir o conteúdo de texto como "Submitted successfully"

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <title>Submit buttons</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form id="myForm">
    <h2>Sign Up</h2>
    <input type="text" id="email" placeholder="Enter your email">
    <p id="emailMessage" class="message"></p>

  </form>
  <script src="script.js"></script>
</body>
</html>