HTML Como esconder e mostrar campos de arquivo no html?

[Rafael Abreu Miranda]

Pessoal estou com o seguinte código

 

 

include ('verifica.php');
    echo("<form method='post' action='/sema/index.php/up' enctype='multipart/form-data'>");
    echo("<table>");
    echo("<th>Arquivo - ".$tipo."</th>");
    echo("<tr><td>");
    echo("<input type='hidden' name='tipo' id='tipo' value='".$tipo."'/>");
    echo("<input type='hidden' name='id' id='id' value='".$id."'/>");
    echo("<input type='hidden' name='num' id='num' value='".$registro[num]."'/>");
    echo("</td></tr>");
    echo("<tr><td width='69'>Processo:</td><td><input type='int' name='protocolo' id='prot' value ='".$registro[num]."Of20".$ano."'size=8/></td></tr>");
    echo("<tr><td>CPF:</td><td><input type='int' name='cpf' id='cpf'/></td></tr>");
    echo("<tr><td><input type='date' name='data' id='data'/></td></tr>");
    

    echo("<tr><td><input type='text' name='A1' id='A1'/><input type='file' name='arquivo'/></td></tr>");
        //como esconder isso na pagina e mostrar quando eu apertar um botão????
    echo("<tr><td><input type='text' name='A2' id='A2'/><input type='file' name='arquivo2'/></td></tr>");
    echo("<tr><td><input type='text' name='A3' id='A3'/><input type='file' name='arquivo3'/></td></tr>");
    echo("<tr><td><input type='text' name='A4' id='A4'/><input type='file' name='arquivo4'/></td></tr>");
    echo("<tr><td><input type='text' name='A5' id='A5'/><input type='file' name='arquivo5'/></td></tr>");
    echo("<tr><td><input type='text' name='A6' id='A6'/><input type='file' name='arquivo6'/></td></tr>");
    echo("<tr><td><input type='text' name='A7' id='A7'/><input type='file' name='arquivo7'/></td></tr>");
    echo("<tr><td><input type='text' name='A8' id='A8'/><input type='file' name='arquivo8'/></td></tr>");
    echo("<tr><td><input type='text' name='A9' id='A9'/><input type='file' name='arquivo9'/></td></tr>");
    echo("<tr><td><input type='text' name='A10' id='A10'/><input type='file' name='arquivo10'/></td></tr>");
    echo("<tr><td><input type='text' name='A11' id='A11'/><input type='file' name='arquivo11'/></td></tr>");
    echo("<tr><td><input type='text' name='A12' id='A12'/><input type='file' name='arquivo12'/></td></tr>");
    echo("<tr><td><input type='text' name='A13' id='A13'/><input type='file' name='arquivo13'/></td></tr>");
    echo("<tr><td><input type='text' name='A14' id='A14'/><input type='file' name='arquivo14'/></td></tr>");
    echo("<tr><td><input type='text' name='A15' id='A15'/><input type='file' name='arquivo15'/></td></tr>");
    echo("<tr><td><input type='text' name='A16' id='A16'/><input type='file' name='arquivo16'/></td></tr>");
    echo("<tr><td><input type='text' name='A17' id='A17'/><input type='file' name='arquivo17'/></td></tr>");
    echo("<tr><td><input type='text' name='A18' id='A18'/><input type='file' name='arquivo18'/></td></tr>");
    echo("<tr><td><input type='text' name='A19' id='A19'/><input type='file' name='arquivo19'/></td></tr>");
    echo("<tr><td><input type='text' name='A20' id='A20'/><input type='file' name='arquivo20'/></td></tr>");
    
    echo("<tr><td><input type='submit' value='Enviar' /></td></tr>");
    echo("</table>");
    echo("</form>");

 

 

mas eu não quero mostrar esses 20 campos de inserir arquivos ocupando espaço na pagina, queria deixar eles escondidos e ir adicionando só quando fosse necessário.
exemplo: alguém vai adicionar um arquivo, ai ele adiciona lá no primeiro que fica visível, mas supondo que ele precise colocar 4 anexos, ai ele iria clicar 4 vezes no botão "mais arquivo" e então iria aparecer mais 4 campos para por arquivo.

teria alguma forma de fazer isso?

passei a manhã toda olhando isso e tentando vários exemplos.

[DiF]

@Rafael Abreu Miranda Tem, mas você precisa manipular com Javascript.

Basicamente, você vai "criar" o elemento a medida que o usuário precisar.

 

Aqui neste link tem um exemplo de como criar dinamicamente os elementos com javascript.

 

Ou você simplesmente pode esconder via CSS...  e com javascript  fazer um evento de clicar para mostrar ou esconder o resto..

 

 

[Rafael Abreu Miranda]

8 minutos atrás, DiF disse:

@Rafael Abreu Miranda Tem, mas você precisa manipular com Javascript.

Basicamente, você vai "criar" o elemento a medida que o usuário precisar.

 

Aqui neste link tem um exemplo de como criar dinamicamente os elementos com javascript.

 

Ou você simplesmente pode esconder via CSS...  e com javascript  fazer um evento de clicar para mostrar ou esconder o resto..

 

 

qual link?

[DiF]

@Rafael Abreu Miranda Eita, falha minha,  separei o link e não postei...

 

Pesquisa Google sobre criação de campos input file  dinâmicos

[Luís Roberto C. da Silva]

É melhor escrever essa página toda em HTML e colocar os <?php> quando for necessário. Em relação a esconder elementos, é só manipular com javascript e css, marcando o trecho que quer esconder com id, por exemplo:

<table id='esconde' style='display: none'>

</table>

 

E no botão chama uma função javascript:

<button onclick='aparece();'=></button>

 

Inserindo a função no fim do código:

<script>

     aparece(){

          document.getElementById('esconde').style.display = block;

     }

</script>