Untitled

<!DOCTYPE html>
<html lang="en">

<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<title>Embananador</title>
</head>

<body>
	<form id='banana-form'>
		<!-- Já que você gosta de linhas -->
		<hr>
		<div>
			<label for='nome'>Nome</label>
      <input type='text' id='nome' />
    </div>
    <hr>
    <button type='submit'>Embananar</button>
  </form>
</body>
<script>
/** JavaScript ES6 não roda em versões antigas do IE */
const embananar = (event) => {
  event.preventDefault() // Dá uma olhada nesse motherfucker aqui
  const nome = document.getElementById('nome').value
  if (!nome) {
    window.alert('Diga seu nome!')
    return
  }
  window.alert(`${nome} virou uma banana!`)
  /**
   * aqui você manipula o código, valida, processa, etc.
   * Repare que ele não recarregou a página,
   */
}
// Localize o form
const form = document.getElementById('banana-form');
// Atribua o evento ao form
if (form.attachEvent) {
    // Não é necessário passar o parâmetro event aqui
    form.attachEvent("submit", embananar);
} else {
    form.addEventListener("submit", embananar);
}
/**
 * Assim não é preciso usar o onLoad da página, dá pra criar eventos arbitrários e anexar funções a eles...
 * Porém, não roda no IE antigo...
 */
</script>
</html>