Ir ao conteúdo
  • Cadastre-se

HTML Salvar dados de formulario em aquivo HTML


Posts recomendados

galera to com um problema que ja faz uns dias que não to conseguindo resolver..

eu to querendo fazer o seguinte : pegar os dados desse formulário e ao clicar em "adicionar membro" ele adicionar automaticamente na tabela de baixo ou de preferência que salve os dados em um arquivo HTML para que outros usuários possa visualizar.

Cada vez que eu for adicionando vai criando uma nova linha e adicionando os dados..

 

<html>

<head>
</head>
<body>

<form role="form">
  <div class="form-group">
  <h2>Composição Familiar</h2>
      <form role="form" id="composicaoFamiliar" method="post">
  <div class="form-group row">
  
  
    <div class="col-xs-10">
    <label for="nomeC">Nome Completo:</label>
    <input type="text" class="form-control" name="nomeC" id="nomeC" placeholder="Nome Completo" required="required" minlength="6" maxlength="20" pattern="[a-z\s]+$"><p>
    </div>

    <div class="col-xs-10 ">
    <label for="sexo">Sexo:</label>
    <input type="text" class="form-control" name="sexo" id="sexo" placeholder="Digite o sexo" required="required"><p>
    </div>
    
        <div class="col-xs-10 ">
    <label for="dataN">Data de Nascimento:</label>
    <input type="date" class="form-control" name="dataN" id="dataN" required="required"><p>
    </div>

    <div class="col-xs-10 ">
    <label for="idade">Idade:</label>
    <input type="number" class="form-control" name="idade" id="idade" required="required"><p>
    </div>
    
    
    <div class="col-xs-10 ">
    <label for="parentescoF">Parentesco Familiar:</label>
    <input type="text" class="form-control" name="parentescoF" id="parentescoF" placeholder="Digite o parentesco familiar" required="required"><p>
    </div>
    
    <div class="col-xs-10 ">
    <label for="defF">Deficiencia:</label>
    <input type="text" class="form-control" name="defF" id="defF" placeholder="Digite SIM ou NÃO" required="required"><p>
    </div>
    
    <div class="col-xs-8 ">
      </div>
  </div>
   <button id="adicionarM" type="submit" class="btn btn-default" ">Adicionar Membro</button>
 
</form>
     <table class="table table-bordered" id="tabela">
    <tbody>
      <tr>
        <th>Nome Completo</th>
        <th>Sexo</th>
        <th>Data de Nascimento</th>
        <th>Idade</th>
        <th>Parentesco Familiar</th>
        <th>Deficiencia?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
         <td></td>
          <td></td>
           <td></td>
      </tr>
    </tbody>
  </table

</form>

 <button id="botaocadastrar" type="submit" class="btn btn-default">Cadastrar >></button>
 <button id="botaovoltar" type="submit" class="btn btn-default"><< Voltar </button>
  </div>
  
 
</form>

</body>
</html>

 

Link para o comentário
Compartilhar em outros sites

Bom dia,

   Tenho esse exemplo onde eu digito um valor na input e o mesmo é carregado em outra pagina, acontece que o valor já esta pré determinado no código. O que estou tentando fazer é que ao digitar qualquer coisa na input ele carregue na outra pagina e fique gravado no arquivo html para que outras pessoas possa visualizar.

 

*Pagina principal 

<html>
<head>

<script>
function abrirPesquisa()
{
   window.open("pesquisa.html"); // Abrira a janela de pesquisa
}   
</script>

</head>
<body>
<form>
Digite um codigo: <input type="text" name="campo1" id="campo1">

Descrição: <label name="descrproduto" id="descrproduto">
<p align="center"><a href="javascript:abrirPesquisa()";>Pesquisar</a></p>

</form>

</body>
</html>

*Pagina onde carrega os dados

 

<html>
<head>
<script>
function levarcodigo( codigo,descricao )
{
   /** O "segredo" está aqui nessas duas linhas, onde é passado o codigo para o <input>
   *    e a descricao para o <label>
   */
   top.opener.document.getElementById("campo1").value = codigo;
   top.opener.document.getElementById("descrproduto").innerHTML = descricao;
   window.close();
}
</script>
</head>
<body>
<a href="javascript:levarcodigo(1010,'Cafeteira');">1010-Cafeteira</a>
<a href="javascript:levarcodigo(1020,'Jogo de panelas');">1020-Jogo de panelas</a>
<a href="javascript:levarcodigo(1030,'Jogo de taças');">1030-Jogo de taças</a>
<a href="javascript:levarcodigo(1040,'Churrasqueira');">1040-Churrasqueira</a>
</body>
</html>

 

Link para o comentário
Compartilhar em outros sites

Boa noite pessoal,

 

 

    Estou tentando criar um formulário que ao mesmo tempo os dados digitados na imput apareça como lista em um campo TXT e que esses dados fiquem gravados para outras pessoal visualizarem se possível ficar visível por um período de tempo.

 

A ideia é mais ou menos igual a foto.

 

<form>
    Nome: <input type="text" id="txtnome"/>
    <br/>
    Telefone: <input type="text" id="txttelefone"/>
    <br/>
    Email: <input type="text" id="txtemail"/>
    <br/>
    <input type="submit" value="enviar"/>
</form>

 

Sem título.png

Link para o comentário
Compartilhar em outros sites

Bom dia @silvagno

 

Para fazer isso, provavelmente você terá que usar um banco de dados com uma linguagem back-end.

 

Ou se sua intenção é realmente criar um novo arquivo, ainda terá que usar alguma linguagem como o PHP por exemplo para poder criar e reescrever o arquivo.  

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

22 horas atrás, Leonardo0308 disse:

Bom dia @silvagno

 

Para fazer isso, provavelmente você terá que usar um banco de dados com uma linguagem back-end.

 

Ou se sua intenção é realmente criar um novo arquivo, ainda terá que usar alguma linguagem como o PHP por exemplo para poder criar e reescrever o arquivo.  

Não posso usar PHP, pois vou usar em uma rede local, ou seja não posso instalar nem um app para rodar php nessa rede, busco uma alternativa com JS e HTML.

Link para o comentário
Compartilhar em outros sites

24 minutos atrás, Leonardo0308 disse:

Não entendi, o que tem haver a rede local com o PHP?

 

 

Como o @DiF disse, tem a opção de usar Javascript, local store e ajax.

Por ex: o código abaixo é o formulário e o outro recebe os dados em php, só que não funciona o php sem um programa para rodar ele.

 

Não sei usar Javascript, local store e ajax.. :(

 

Formulário

<html>
<head>
<title>FORM</title>
</head>
<body>

<form action="salvar.php" method="post">
Nome<br />
<input type="text" name="nome" /><br />
E-mail<br />
<input type="text" name="email" /><br /><br />
<input type="submit" value="Enviar" />
</form>

</body>
</html>
<?php
// pegando os dados do input

// para pegar o valor do input nome
$nome = $_POST['nome'];

// para pegar o valor do input nome
$email = $_POST['email'];

// vamos imprimir os valores dgitados dos campos na pagina

echo "Nome: $nome<br />";
echo "E-mail: $email<br />";
?>

 

 

Link para o comentário
Compartilhar em outros sites

5 minutos atrás, silvagno disse:

Por ex: o código abaixo é o formulário e o outro recebe os dados em php, só que não funciona o php sem um programa para rodar ele.

É só baixar...como o wamp, xampp, easyphp. Qual quer um deles irá atender a sua demanda.

 

8 minutos atrás, silvagno disse:

Não sei usar Javascript

 

40 minutos atrás, silvagno disse:

busco uma alternativa com JS e HTML

 

Você quer uma alternativa em JS e não sabe JS?

 

Você é iniciante na área, correto?

Recomendo que de uma estudada na internet sobre JS, PHP e banco de dados, antes de começar o seu projeto. Recomendo alguns canais bem didáticos como o do Gustavo Guanabara, Algumas apostilas como as das Caelum, e se não tiver problema com o inglês um o site da w3schools.

Link para o comentário
Compartilhar em outros sites

26 minutos atrás, Leonardo0308 disse:

É só baixar...como o wamp, xampp, easyphp. Qual quer um deles irá atender a sua demanda.

 

 

 

Você quer uma alternativa em JS e não sabe JS?

 

Você é iniciante na área, correto?

Recomendo que de uma estudada na internet sobre JS, PHP e banco de dados, antes de começar o seu projeto. Recomendo alguns canais bem didáticos como o do Gustavo Guanabara, Algumas apostilas como as das Caelum, e se não tiver problema com o inglês um o site da w3schools.

É só baixar...como o wamp, xampp, easyphp. Qual quer um deles irá atender a sua demanda.

 

não posso instalar nada na rede, por esse motivo busco alternativas.

Link para o comentário
Compartilhar em outros sites

2 minutos atrás, Leonardo0308 disse:

Então em HTML sozinho, não tem como.

Então, tenho esse código que abre a outra pagina , mais não esta trazendo os dados.

 

formulário

 

<html>

<head>
</head>
<body>

<form method="POST" onSubmit="return abrirprova()">
<p><input type="text" name="a" size="20" value="123"></p>
<p><input type="text" name="b" size="20" value="456"></p>
<p><input type="submit" value="Submeter" name="B1"><input type="reset" value="Redefinir" name="B2"></p>
</form>

<script language="JavaScript">
function abrirprova()
{
window.open("C:\Users\MgX19618\Desktop\Nova pasta (4)/teste_recebe.html", "janela", "toolbars=no, scrollbars=yes, menubar=yes, personalbar=no, fullscreen=yes, left=0, top=0, resizable=yes, titlebar=yes");
}
</script>

</body>
</html>

 

 

recebe dados

 

<html>

<head>
</head>
<body onLoad="mostra()">
 
<script> 
// função 
function mostra() { 
 
// obtemos todo o url 
var url = location.href; 
 
// separo tudo antes e depois do ...?...
 
var valores = url.split("?"); 
 
// separo cada variável ( a=123 separado b=456 ) 
quebras = valores[1].split("&"); 
 
// esse é o a=123 
variavel1 = quebras[0]; 
 
// esse é o b=456 
variavel2 = quebras[1]; 
 
// separo o a do 123 
var quebra_var1 = variavel1.split("="); 
 
// separo o b do 456 
var quebra_var2 = variavel2.split("="); 
 
// exibo no div o a e o 123 
document.getElementById("valor").innerHTML = "1ª <b>"+quebra_var1[0]+"</b> com o valor <b>"+quebra_var1[1]+"</b>"; 
 
document.getElementById("valor").innerHTML+= "<br>"; 
 
// exibo no div o b e o 456 
document.getElementById("valor").innerHTML+= "2ª <b>"+quebra_var2[0]+"</b> com o valor <b>"+quebra_var2[1]+"</b>"; 
 
} 
</script> 
 
<div id="valor"></div> 
 
</body>
</html>

 

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

 

GRÁTIS: ebook Redes Wi-Fi – 2ª Edição

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!