Como passar dados de um form para outra tela em html

Front-end
,
#1

Pessoal,

Como passar os dados do form para outra tela em html?

<html>

<body>

<form action="/teste_form2.html" method="post">
    <div>
        <label for="name">Nome:</label>
        <input type="text" id="name" required/>
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Mensagem:</label>
        <textarea id="msg"></textarea>
    </div>
    <div class="button">
        <button type="submit">Enviar sua mensagem</button>  <!-- Pode ser um input como botão<input type="submit" value="enviar"/> -->
    </div>
</form>



</body>
</html>
#2

De um html para outro? Não tem como.
Precisa de alguma coisa além do html, uma linguagem de programação ou javascript (provavelmente, um framework como o jQuery já resolva).

1 curtida
#3

Isso, com javascript… É que não fui claro, porque não quero em php.

#4

Dê uma nesses artigos:

http://www.macoratti.net/15/03/html5_data.htm


Consegui fazer com LocalStorage, veja o exemplo abaixo:

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pagina 1</title>
</head>
<body>
    <!-- paginaDois.html -->
    <form action="teste_form2.html" method="post">
        <div>
            <label for="name">Nome:</label>
            <input type="text" id="name" name="name" required/>
        </div>
        <div>
            <label for="mail">E-mail:</label>
            <input type="email" id="mail" name="mail"/>
        </div>
            <input type="submit" value="Enviar"/>  <!-- Pode ser um input como botão<input type="submit" value="enviar"/> -->
    </form>
    <script src="localStorage.js">  </script>
</body>
</html>

localStorage.js

(function () {
    function adicionar() {
        var dados = JSON.stringify({
            name    : document.querySelector("input[name=name]").value,
            mail    : document.querySelector("input[name=mail]").value
        });
        // tbClientes.push(dados);
        localStorage.setItem("storage", JSON.stringify(dados));
        alert("Registro Adicionado!");
        return true;
    }
    var form = document.querySelector("form");
    form.addEventListener("submit", function () {
        // event.preventDefault(); event
        return adicionar();
    });
})();

teste_form2.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>Pagina Dois</h1>

    <script>
        //Pega o registro STORAGE no localstorage.
        var registro = localStorage.getItem("storage");

        var parse = JSON.parse(registro);
        var obj = JSON.parse(parse);
        
        console.log(obj.name); 
        console.log(obj.mail); 
    </script>
</body>

</html>
1 curtida