Formulario com galeria de imagem (Ajuda)

[luizalberto]

Boa tarde, gostaria de uma ajuda neste formulario que montei, eu precisava criar uma galeria de imagem e imprimir informação na tela onde a pessoa insere os dados de varios itens

segue codigo abaixo:

na parte em negrito preciso que imprima as informaçoes na tela o tipo de material e a quantidade.

 

<div class="campo">
            <label>UTILIZAÇÃO DE MATERIAL?</label>
            <label>
            <input type="radio" name="UTILIZAÇÃO DE MATERIAL" value="SIM">SIM
<input type="radio" name="UTILIZAÇÃO DE MATERIAL" value="NÃO">NÃO
            </div>
            
            <div class="campo">
            <label>SUBTERRANEO</label>
            <label>
                <input type="radio" name="SUBTERRANEO" value="SIM">SIM
<input type="radio" name="SUBTERRANEO" value="NÃO">NÃO
            </div>
            
            <div class="campo">
            <label>REDE EXPOSTA:</label>
            <label>
            
                <input type="radio" name="EXPOSTA" value="SIM">SIM
<input type="radio" name="EXPOSTA" value="NÃO">NÃO
            </div>
            
               <div class="campo">
            <label for="DESCRIÇÃO REDE EXPOSTA">DESCRIÇÃO REDE EXPOSTA</label>
            <textarea rows="6" style="width: 20em" id="DESCRIÇÃO REDE EXPOSTA" name="DESCRIÇÃO REDE EXPOSTA"></textarea>
        </div>
                 
        <div class="campo">
                <label for="NUMERO SD">NUMERO SD</label>
                <input type="text" id="NUMERO SD" name="NUMERO SD" style="width: 10em" value="">
                        </div>
     
            
            <div class="campo">
            <label>CABO FURTADO/VANDALIZADO TINHA ABRAÇADEIRA?</label>
            <label>
           <input type="radio" name="ABRAÇADEIRA" value="SIM">SIM
<input type="radio" name="ABRAÇADEIRA" value="NÃO">NÃO
            </div>
            
                                
                        <div class="campo">
            <label for="OBSERVAÇÃO">OBSERVAÇÃO</label>
            <textarea rows="6" style="width: 20em" id="OBSERVAÇÃO" name="OBSERVAÇÃO"></textarea>
        </div>

<div class="campo">
        <label for="MATERIAL UTILIZADO">MATERIAL UTILIZADO</label>
                <select name="MATERIAL UTILIZADO" id="MATERIAL UTILIZADO">
                <option value=""></option>
<option value='152'>ABRACADEIRA ACO INOX AUTO TRAVANTE S/PROT </option><option value='15'> AC 50 X 100 </option><option value='16'> AC 50 X 200 </option><option value='608'> AC 50 x 300 </option><option value='14'> AC 50 X 50 </option><option value='208'> ALCA PRE-FORMADA 4,8MM </option><option value='149'> ARAME DE ESPINAR </option><option value='220'> ARMARIO DISTR ALUMINIO ARD-AL 14 PEDESTAL </option><option value='55'> BLOCO BER-10 COMPACTO </option><option value='598'> BLOCO BLE-2 </option><option value='4'> CA 40 x 100 </option><option value='65'> CA 40 x 1200 </option><option value='18'> CA 40 X 1500 </option><option value='19'> CA 40 X 1800 </option><option value='1'> CA 40 x 20 </option><option value='5'> CA 40 x 200 </option><option value='20'> CA 40 X 2400 </option><option value='2'> CA 40 x 30 </option><option value='6'> CA 40 x 300 </option><option value='7'> CA 40 X 400 </option><option value='3'> CA 40 x 50 </option><option value='8'> CA 40 X 600 </option><option value='17'> CA 40 X 900 </option><option value='12'> CA 50 X 100 </option><option value='490'> CA 50 x 1200 </option><option value='491'> CA 50 x 1500 </option><option value='9'> CA 50 X 20 </option><option value='13'> CA 50 X 200 </option><option value='10'> CA 50 X 30 </option><option value='486'> CA 50 x 300 </option><option value='487'> CA 50 x 400 </option><option value='11'> CA 50 X 50 </option><option value='488'> CA 50 x 600 </option><option value='489'> CA 50 x 900 </option><option value='640'> CA 65 x 10 </option><option value='49'> CA 65 x 100 </option><option value='492'> CA 65 x 20 </option><option value='50'> CA 65 x 200 </option><option value='67'> CA 65 x 30 </option><option value='69'> CA 65 X 300 </option><option value='494'> CA 65 x 400 </option><option value='48'> CA 65 x 50 </option><option value='495'> CA 65 x 600 </option><option value='496'> CA 65 x 900 </option><option value='64'> CABO DE PAPEL (DIVS) </option><option value='467'> CCE ASF 50 x 10 </option><option value='68'> CCE ASF 50 x 4 </option><option value='465'> CCE ASF 50 x 6 </option><option value='54'> CEA </option><option value='29'> CEANS 200 </option><option value='30'> CEANS 300 </option><option value='31'> CEANS 400 </option><option value='41'> CEASH 1 </option><option value='42'> CEASH 2 </option><option value='43'> CEASH 3 </option><option value='44'> CEASH 4 </option><option value='45'> CEASV </option><option value='47'> CEMA </option><option value='35'> CEPM-1 </option><option value='34'> CEPM-2 </option><option value='33'> CEPM-3 </option><option value='32'> CEPM-4 </option><option value='27'> CERTA 10 </option><option value='28'> CERTA 20 </option><option value='52'> CEV-30 </option><option value='53'> CEV-55 </option><option value='46'> CLP </option><option value='36'> CONECTOR 101M </option><option value='38'> CONECTOR MODULAR DERIVADO </option><option value='37'> CONECTOR MODULAR DIRETO </option><option value='40'> CONECTOR PICABOND DERIVADO </option><option value='39'> CONECTOR PICABOND DIRETO </option><option value='95'> CONJUNTO BLOQUEIO PRESSAO ENFAIX CBP-I </option><option value='226'> CONJUNTO BLOQUEIO PRESSAO ENFAIX CBP-II </option><option value='227'> CONJUNTO BLOQUEIO PRESSAO ENFAIX CBP-III </option><option value='51'> CORDOALHA 4.8 </option><option value='66'> CORDOALHA 6.27 </option><option value='59'> CTS 40 x 1200 </option><option value='60'> CTS 40 x 1800 </option><option value='61'> CTS 40 x 2400 </option><option value='56'> CTS 40 x 400 </option><option value='57'> CTS 40 x 600 </option><option value='58'> CTS 40 x 900 </option><option value='341'> CTS 50 x 1200 </option><option value='62'> CTS 50 x 400 </option><option value='63'> CTS 50 x 600 </option><option value='342'> CTS 50 x 900 </option><option value='230'> DISCO FECHAMENTO LATERAL CEPM1 </option><option value='94'> DISCO FECHAMENTO LATERAL CEPM2 </option><option value='93'> DISCO FECHAMENTO LATERAL CEPM3 </option><option value='92'> DISCO FECHAMENTO LATERAL CEPM4 </option><option value='151'> FIO ESPINAR ISOLADO </option><option value='633'> FIO FE-AA-80 PEAD-X </option><option value='637'> FIO TELEF FDG-50-2 PRETO E LARANJA </option><option value='206'> LACO PRE-FORMADO 4,8 </option><option value='198'> POSTE CONCRETO CIRCULAR 10.5 x 300 </option><option value='192'> POSTE CONCRETO CIRCULAR 10.5 x 900 </option><option value='474'> POSTE CONCRETO CIRCULAR 11 x 300 </option><option value='199'> POSTE CONCRETO CIRCULAR 12 x 400 </option><option value='200'> POSTE CONCRETO CIRCULAR 12 x 800 </option><option value='196'> POSTE CONCRETO CIRCULAR 14 x 600 </option><option value='193'> POSTE CONCRETO CIRCULAR 7 x 300 </option><option value='75'> POSTE CONCRETO CIRCULAR 7 x 600 </option><option value='77'> POSTE CONCRETO CIRCULAR 8 x 200 </option><option value='76'> POSTE CONCRETO CIRCULAR 8 x 400 </option><option value='78'> POSTE CONCRETO CIRCULAR 8 x 600 </option><option value='74'> POSTE CONCRETO CIRCULAR 9 x 200 </option><option value='194'> POSTE CONCRETO CIRCULAR 9 x 400 </option><option value='195'> POSTE CONCRETO CIRCULAR 9 x 600 </option><option value='197'> POSTE CONCRETO CIRCULAR 9 x 800 </option><option value='588'> POSTE EUCALIPTO LEVE 11M </option><option value='417'> POSTE EUCALIPTO MEDIO 8M </option><option value='201'> POSTE EUCALIPTO PESADO 9M </option><option value='416'> POSTE MADEIRA 7M </option><option value='91'> RESINA BLOQUEIO PRESSURIZACAO E UMIDADE </option><option value='222'> SUPORTE CILINDRICO 100P - BER-10 </option><option value='224'> SUPORTE PERFIL CILINDRICO 50P BER-10 </option><option value='89'> SUPORTE PERFIL CILINDRICO 600P BL BER-10 </option><option value='26'> TAR-10 COTO 10M </option><option value='21'> TAR-10 COTO 3,0M </option><option value='24'> TAR-10 COTO 5,5M </option><option value='25'> TAR-20 COTO 10M </option><option value='22'> TAR-20 COTO 3,0M </option><option value='23'> TAR-20 COTO 5,5M </option>                                        </select>
</div>

<div class="campo">
                <label for="NOVO">NOVO</label>
                <input type="text" id="NOVO" name="NOVO" style="width: 10em" value="">
                        </div>
      
<div class="campo">
                <label for="REAPROVEITADO">REAPROVEITADO</label>
                <input type="text" id="REAPROVEITADO" name="REAPROVEITADO" style="width: 10em" value="">
                        </div>
      
<div class="campo">
                <label for="RETIRADO">RETIRADO</label>
                <input type="text" id="RETIRADO" name="RETIRADO" style="width: 10em" value="">
                        </div>

      <div class="campo">
<label for="Inserção">

<input type="radio" name="Atualizar" id="Atualizar" value="Atualizar"> Atualizar

<input type="radio" name="Incluir" id="Incluir" value="Incluir">Incluir

<input type="radio" name="Deletar" id="Deletar" value="Deletar">Deletar
</label>

</div>

<label for="Executar">
<button type="submit" class="Executar" id="Executar">Executar</button><br><br>
</label>
</div>

<div class="campo">
   <label class="arquivo" for="arquivo">Anexar imagem</label>
 <div class="arquivo">
   <input id="arquivo" name="arquivo" class="arquivo" type="file">
      </div>
 </div>

<input type="submit" name="Finalizar" value="Finalizar">
  
</form>

</body>

</html>

 

[Leonardo Persan]

HTML, CSS e JS são linguagens que rodam só no navegador se você quer qualquer tipo de interação com o usuário precisa de um servidor que roda alguma linguagem de programação, PHP, .NET, NodeJS, Python, Ruby...

Qual a linguagem você utiliza?

[luizalberto]

PHP, algumas parte código eu retirei só coloquei a qual estava tendo dificuldade.

[Leonardo Persan]

Na verdade a sua dificuldade está justamente na parte que você retirou.