image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Lista de conteúdos
Cinthya Silva
Cinthya Silva17/09/2022 16:44
Compartilhe

Puxar imagem do HTML com variável

  • #PHP
  • #HTML

Poderia me ajudar a puxar imagem do HTML para o PHP no echo, vou deixar a pagina index abaixo:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <title>Copa do Mundo - Fase de Grupos</title>

    <link rel="stylesheet" href="estilos.css" />

</head>

<body>

    <h1>Copa do Mundo 2022 - Fase de Grupos</h1>

    <p>Selecione, em cada grupo, dois países que seguirão para a próxima fase.</p>

    <div>

        <form action="oitavas_de_final.php" method="post">

            <table>

                <!--------------------------------- GRUPO A ------------------------------------------->

                <tr class="linha_grupo">

                    <td colspan="4"><h2>Grupo A</h2></td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>1º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Catar.png" /></td>

                    <td><img src="imagens/Equador.png" /></td>

                    <td><img src="imagens/Senegal.png" /></td>

                    <td><img src="imagens/Holanda.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoA1" value="Catar"/>Catar</td>

                    <td><input type="radio" name="grupoA1" value="Equador"/>Equador</td>

                    <td><input type="radio" name="grupoA1" value="Senegal"/>Senegal</td>

                    <td><input type="radio" name="grupoA1" value="Holanda"/>Holanda</td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>2º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Catar.png" /></td>

                    <td><img src="imagens/Equador.png" /></td>

                    <td><img src="imagens/Senegal.png" /></td>

                    <td><img src="imagens/Holanda.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoA2" value="Catar"/>Catar</td>

                    <td><input type="radio" name="grupoA2" value="Equador"/>Equador</td>

                    <td><input type="radio" name="grupoA2" value="Senegal"/>Senegal</td>

                    <td><input type="radio" name="grupoA2" value="Holanda"/>Holanda</td>

                </tr>

                <tr><td colspan="4">&nbsp;</td></tr>

                <!--------------------------------- GRUPO B ------------------------------------------->

                <tr class="linha_grupo">    

                    <td colspan="4"><h2>Grupo B</h2></td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>1º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Inglaterra.png" /></td>

                    <td><img src="imagens/Irã.png" /></td>

                    <td><img src="imagens/Estados Unidos.png" /></td>

                    <td><img src="imagens/País de Gales.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoB1" value="Inglaterra"/>Inglaterra</td>

                    <td><input type="radio" name="grupoB1" value="Irã"/>Irã</td>

                    <td><input type="radio" name="grupoB1" value="Estados Unidos"/>Estados Unidos</td>

                    <td><input type="radio" name="grupoB1" value="País de Gales"/>País de Gales</td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>2º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Inglaterra.png" /></td>

                    <td><img src="imagens/Irã.png" /></td>

                    <td><img src="imagens/Estados Unidos.png" /></td>

                    <td><img src="imagens/País de Gales.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoB2" value="Inglaterra"/>Inglaterra</td>

                    <td><input type="radio" name="grupoB2" value="Irã"/>Irã</td>

                    <td><input type="radio" name="grupoB2" value="Estados Unidos"/>Estados Unidos</td>

                    <td><input type="radio" name="grupoB2" value="País de Gales"/>País de Gales</td>

                </tr>

                <tr><td colspan="4">&nbsp;</td></tr>

                <!--------------------------------- GRUPO C ------------------------------------------->

                <tr class="linha_grupo">    

                    <td colspan="4"><h2>Grupo C</h2></td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>1º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Argentina.png" /></td>

                    <td><img src="imagens/Arábia Saudita.png" /></td>

                    <td><img src="imagens/México.png" /></td>

                    <td><img src="imagens/Polônia.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoC1" value="Argentina"/>Argentina</td>

                    <td><input type="radio" name="grupoC1" value="Arábia Saudita"/>Arábia Saudita</td>

                    <td><input type="radio" name="grupoC1" value="México"/>México</td>

                    <td><input type="radio" name="grupoC1" value="Polônia"/>Polônia</td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>2º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Argentina.png" /></td>

                    <td><img src="imagens/Arábia Saudita.png" /></td>

                    <td><img src="imagens/México.png" /></td>

                    <td><img src="imagens/Polônia.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoC2" value="Argentina"/>Argentina</td>

                    <td><input type="radio" name="grupoC2" value="Arábia Saudita"/>Arábia Saudita</td>

                    <td><input type="radio" name="grupoC2" value="México"/>México</td>

                    <td><input type="radio" name="grupoC2" value="Polônia"/>Polônia</td>

                </tr>

                <tr><td colspan="4">&nbsp;</td></tr>

               <!--------------------------------- GRUPO D ------------------------------------------->

                <tr class="linha_grupo">    

                    <td colspan="4"><h2>Grupo D</h2></td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>1º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/França.png" /></td>

                    <td><img src="imagens/Australia.png" /></td>

                    <td><img src="imagens/Dinamarca.png" /></td>

                    <td><img src="imagens/Tunísia.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoD1" value="França"/>França</td>

                    <td><input type="radio" name="grupoD1" value="Australia"/>Australia</td>

                    <td><input type="radio" name="grupoD1" value="Dinamarca"/>Dinamarca</td>

                    <td><input type="radio" name="grupoD1" value="Tunísia"/>Tunísia</td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>2º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/França.png" /></td>

                    <td><img src="imagens/Australia.png" /></td>

                    <td><img src="imagens/Dinamarca.png" /></td>

                    <td><img src="imagens/Tunísia.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoD2" value="França"/>França</td>

                    <td><input type="radio" name="grupoD2" value="Australia"/>Australia</td>

                    <td><input type="radio" name="grupoD2" value="Dinamarca"/>Dinamarca</td>

                    <td><input type="radio" name="grupoD2" value="Tunísia"/>Tunísia</td>

                </tr>

                <tr><td colspan="4">&nbsp;</td></tr>

               <!--------------------------------- GRUPO E ------------------------------------------->

                <tr class="linha_grupo">    

                    <td colspan="4"><h2>Grupo E</h2></td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>1º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Espanha.png" /></td>

                    <td><img src="imagens/Costa Rica.png" /></td>

                    <td><img src="imagens/Alemanha.png" /></td>

                    <td><img src="imagens/Japão.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoE1" value="Espanha"/>Espanha</td>

                    <td><input type="radio" name="grupoE1" value="Costa Rica"/>Costa Rica</td>

                    <td><input type="radio" name="grupoE1" value="Alemanha"/>Alemanha</td>

                    <td><input type="radio" name="grupoE1" value="Japão"/>Japão</td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>2º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Espanha.png" /></td>

                    <td><img src="imagens/Costa Rica.png" /></td>

                    <td><img src="imagens/Alemanha.png" /></td>

                    <td><img src="imagens/Japão.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoE2" value="Espanha"/>Espanha</td>

                    <td><input type="radio" name="grupoE2" value="Costa Rica"/>Costa Rica</td>

                    <td><input type="radio" name="grupoE2" value="Alemanha"/>Alemanha</td>

                    <td><input type="radio" name="grupoE2" value="Japão"/>Japão</td>

                </tr>

                <tr><td colspan="4">&nbsp;</td></tr>

       

               <!--------------------------------- GRUPO F ------------------------------------------->

                <tr class="linha_grupo">    

                    <td colspan="4"><h2>Grupo F</h2></td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>1º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Bélgica.png" /></td>

                    <td><img src="imagens/Canadá.png" /></td>

                    <td><img src="imagens/Marrocos.png" /></td>

                    <td><img src="imagens/Croácia.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoF1" value="Bélgica"/>Bélgica</td>

                    <td><input type="radio" name="grupoF1" value="Canadá"/>Canadá</td>

                    <td><input type="radio" name="grupoF1" value="Marrocos"/>Marrocos</td>

                    <td><input type="radio" name="grupoF1" value="Croácia"/>Croácia</td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>2º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Bélgica.png" /></td>

                    <td><img src="imagens/Canadá.png" /></td>

                    <td><img src="imagens/Marrocos.png" /></td>

                    <td><img src="imagens/Croácia.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoF2" value="Bélgica"/>Bélgica</td>

                    <td><input type="radio" name="grupoF2" value="Canadá"/>Canadá</td>

                    <td><input type="radio" name="grupoF2" value="Marrocos"/>Marrocos</td>

                    <td><input type="radio" name="grupoF2" value="Croácia"/>Croácia</td>

                </tr>

                <tr><td colspan="4">&nbsp;</td></tr>

              <!--------------------------------- GRUPO G ------------------------------------------->

                <tr class="linha_grupo">    

                    <td colspan="4"><h2>Grupo G</h2></td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>1º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Brasil.png" /></td>

                    <td><img src="imagens/Sérvia.png" /></td>

                    <td><img src="imagens/Suíça.png" /></td>

                    <td><img src="imagens/Camarões.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoG1" value="Brasil"/>Brasil</td>

                    <td><input type="radio" name="grupoG1" value="Sérvia"/>Sérvia</td>

                    <td><input type="radio" name="grupoG1" value="Suíça"/>Suíça</td>

                    <td><input type="radio" name="grupoG1" value="Camarões"/>Camarões</td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>2º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Brasil.png" /></td>

                    <td><img src="imagens/Sérvia.png" /></td>

                    <td><img src="imagens/Suíça.png" /></td>

                    <td><img src="imagens/Camarões.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoG2" value="Brasil"/>Brasil</td>

                    <td><input type="radio" name="grupoG2" value="Sérvia"/>Sérvia</td>

                    <td><input type="radio" name="grupoG2" value="Suíça"/>Suíça</td>

                    <td><input type="radio" name="grupoG2" value="Camarões"/>Camarões</td>

                </tr>

                <tr><td colspan="4">&nbsp;</td></tr>      

              <!--------------------------------- GRUPO H ------------------------------------------->

                <tr class="linha_grupo">    

                    <td colspan="4"><h2>Grupo H</h2></td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>1º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Portugal.png" /></td>

                    <td><img src="imagens/Gana.png" /></td>

                    <td><img src="imagens/Uruguai.png" /></td>

                    <td><img src="imagens/Coreia do Sul.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoH1" value="Portugal"/>Portugal</td>

                    <td><input type="radio" name="grupoH1" value="Gana"/>Gana</td>

                    <td><input type="radio" name="grupoH1" value="Uruguai"/>Uruguai</td>

                    <td><input type="radio" name="grupoH1" value="Coreia do Sul"/>Coreia do Sul</td>

                </tr>

                <tr>

                    <td colspan="4"><b><h3>2º colocado</h3></b></td>

                </tr>

                <tr>

                    <td><img src="imagens/Portugal.png" /></td>

                    <td><img src="imagens/Gana.png" /></td>

                    <td><img src="imagens/Uruguai.png" /></td>

                    <td><img src="imagens/Coreia do Sul.png" /></td>

                </tr>

                <tr>

                    <td><input type="radio" name="grupoH2" value="Portugal"/>Portugal</td>

                    <td><input type="radio" name="grupoH2" value="Gana"/>Gana</td>

                    <td><input type="radio" name="grupoH2" value="Uruguai"/>Uruguai</td>

                    <td><input type="radio" name="grupoH2" value="Coreia do Sul"/>Coreia do Sul</td>

                </tr>

                <tr><td colspan="4">&nbsp;</td></tr>      

            </table>

            <input class="botao" type="submit" value="Próxima fase"/>

            <input class="botao" type="reset" value="Limpar"/>

        </form>

    </div>

</body>

</html>

Compartilhe
Comentários (1)
Humberto Moura
Humberto Moura - 17/09/2022 22:08

Talvez eu não seja a melhor pessoa pra te ajudar porque minha principal LP é Java e já tem algum tempo que não mexo com PHP, mas se bem entendi, você quer reutilizar a imagem que tem a ver com o input radio selecionado para usar na action do formulário oitavas_de_final.php.

Na sua action você receberá o resultado do seu radio acessando a variável que aponta para o name do atributo no forumlário, exemplo: se na variável você declara name="grupoA1", na action você recupera $_POST['grupoA1']. Você pode testar se a/o usuária(a) escolheu alguma opção utilizando isset($_POST['grupoA1']). Caso ele tenha escolhido, você pode receber e testar o valor com um monte de if ou switch case, mas eu não recomendo.

O que te sugiro é o seguinte:

  1. Renomeie as sua imagens retirando espaços, acentos e caracteres especiais, assuma um padrão, exemplo: Arábia Saudita.png >>> arabia_saudita.png
  2. Deixe os atributos value dos seus input radio de acordo com o nome das imagens, exemplo: <img src="imagens/portugal.png" /> >>> <input type="radio" name="grupoH2" value="portugal"/> sem o .png
  3. Em cada radio deixe um marcado como checked para evitar que seja submetido sem a escolha, geralmente o primeiro da lista exemplo: input type="radio" name="grupoH2" value="coreia_do_sul" checked />
  4. Na sua action insira o valor recebido na requisição na tag img que deseja concatenando com o que falta para acessar a imagem, exemplo: <img src="imagens/<?php $_POST['grupoA1'] ?>.png" />
  5. No passo 4 já funciona, mas antes de colocar o retorno da requisição direto você pode guardá-la em uma variável do tipo $grupoA1 = $_POST['grupoA1'] e utilizar a variável criada.
  6. Com checked você garante que o radio estará selecionado quando for enviado, exceto se a/o usuária(o) souber mexer no código fonte e quiser quebrar sua aplicação. Dá pra fazer pelo navegador. Não é tão necessário, mas você pode checar na sua action se os valores dos radios estão marcados com if(isset($_POST['grupoA1'])) fazendo a requisição voltar caso um dos options não esteja marcado.
Leia a seguir
Assis Medeiros
Desenvolvendo Soft Skills: Como Um Bootcamp Abriu Minha Mente Para Oportunidades no Mercado de TrabalhoAssis Medeiros - 15 de Setembro
#PHP#.NET C##JavaScript
Thiago Rossi
CAKEPHP pois o universo PHP vai muito além do LaravelThiago Rossi - 13 de Setembro
#PHP
Ravana Andrade
Aprendizado, Empreendedorismo e RealizaçãoRavana Andrade - 12 de Setembro
#Linux#PHP#SQL