Botões - JavaScript

Para enviar dados inseridos em um formulário, utilizam-se botões. Para criar um botão, você pode usar o elemento buttons:

<button name="send">Enviar</button>

Ou o elemento input:

<input type="submit" name="send" value="Enviar" />

Do ponto de vista da funcionalidade em HTML, esses elementos não são exatamente equivalentes, mas neste contexto, eles são importantes para a interação com o código JavaScript.

Ao clicar em qualquer uma dessas opções de botão, o formulário é enviado para o endereço especificado no atributo action do formulário, ou para o endereço da página web, se o atributo action não estiver definido. No entanto, no código JavaScript, podemos interceptar esse envio, tratando o evento de clique.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<form name="search">
    <input type="text" name="key"></input>
    <input type="submit" name="send" value="Enviar" />
</form>
<script>
function sendForm(e) {
    // Obtemos o valor do campo key
    const keyBox = document.search.key;
    const val = keyBox.value;
    if(val.length < 3) {
        alert("Comprimento da string inaceitável");
        e.preventDefault();
    }   
    else
        alert("Envio permitido");
}

const sendButton = document.search.send;
sendButton.addEventListener("click", sendForm);
</script>
</body>
</html>

Ao pressionar o botão, ocorre o evento de clique, e para tratá-lo, anexamos o manipulador sendForm. Este manipulador verifica o texto inserido no campo de texto. Se o comprimento do texto for menor que 3 caracteres, uma mensagem sobre a inadequação do comprimento é exibida e o fluxo normal do evento é interrompido com a chamada de e.preventDefault(). Como resultado, o formulário não é enviado.

Se o comprimento do texto for três ou mais caracteres, uma mensagem é exibida e, em seguida, o formulário é enviado.

Também podemos, se necessário, alterar o endereço para o qual os dados são enviados durante o envio:

function sendForm(e) {
    // Obtemos o valor do campo key
    const keyBox = document.search.key;
    const val = keyBox.value;
    if(val.length > 3) {
        alert("Comprimento da string inaceitável");
        document.search.action="PostForm";
    }   
    else
        alert("Envio permitido");
}

Neste caso, se o comprimento do texto for menor que 3 caracteres, o texto é enviado, mas agora ele é enviado para o endereço PostForm, pois a propriedade action foi definida como:

document.search.action="PostForm";

Limpeza do formulário

Para limpar o formulário, você pode usar os seguintes botões:

<button type="reset">Limpar</button>
<input type="reset" value="Limpar" />

Ao pressionar esses botões, os formulários serão limpos. No entanto, a funcionalidade de limpeza dos campos do formulário também pode ser implementada usando o método reset():

function sendForm(e) {
    // Obtemos o valor do campo key
    const keyBox = document.search.key;
    const val = keyBox.value;
    if(val.length < 3) {
        alert("Comprimento da string inaceitável");
        document.search.reset();
        e.preventDefault();
    }   
    else
        alert("Envio permitido");
}

Além dos botões especiais de envio e limpeza, um botão comum também pode ser usado no formulário:

<input type="button" name="send" value="Enviar" />

Ao pressionar esse tipo de botão, não ocorre o envio de dados, embora também seja gerado o evento de clique:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Programício</title>
</head>
<body>
<form name="search">
    <input type="text" name="key" placeholder="Digite a chave"></input>
    <input type="button" name="print" value="Imprimir" />
</form>
<div id="printBlock"></div>
<script>
function printForm(e) {
    // Obtemos o valor do campo key
    const keyBox = document.search.key;
    const val = keyBox.value;
    // Obtemos o elemento printBlock
    const printBlock = document.getElementById("printBlock");
    // Criamos um novo parágrafo
    const pElement = document.createElement("p");
    // Definimos o texto do parágrafo
    pElement.textContent = val;
    // Adicionamos o parágrafo ao printBlock
    printBlock.appendChild(pElement);
}

const printButton = document.search.print;
printButton.addEventListener("click", printForm);
</script>
</body>
</html>

Ao pressionar o botão, obtemos o texto inserido no campo de texto, criamos um novo elemento de parágrafo para esse texto e adicionamos o parágrafo ao elemento printBlock.

Tratando cliques de um botão em JavaScript