select / form / input / html and php integration

Asked

Viewed 1,518 times

-1

Well I’m trying to create a system that looks like this:inserir a descrição da imagem aqui

As I’m starting now, and I’m trying in every way to learn even if it takes a long time to get something close to it. So far I’ve managed to do this : inserir a descrição da imagem aqui

the html code so far:

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css.css">
    </head>
    <body>

        <p>
      <select class="basic">
        <option value="b" selected="selected" >Bronze</option>
        <option value="p" >Prata</option>
        <option value="g" >Gold</option>
        <option value="p" >Platina</option>
        <option value="d" >Diamante</option>
      </select>
    </p>

    <p>
      <select class="basic1">
        <option value="Gold" selected="selected" >Gold</option>
        <option value="lv" >lV</option>
        <option value="lll" >lll</option>
        <option value="ll" >ll</option>
        <option value="l" >l</option>
      </select>
        </p>
        <div class="botaocomprar">
      <form method="post" action="compra.php">
      <input type="button" name="btog" value="Valor 50 $$"/>
      </form>
    </div>


</body>
</html>

Well I wanted to know if my logic is on the right path or I need to change or improve something, and if anyone can tell me if the part of div class="botaocomprar" is correct or missing something?

I haven’t tried anything in php yet.

  • I still think you should study a little more and break your head more. All the questions you are asking are extremely simple and would be solved simply with an HTML + CSS course on Youtube. The way your question history is, if you keep asking questions at this level, you walk to have your account blocked for asking bad questions. It’s a friend warning! I recommend: https://www.youtube.com/watch?v=epDCjksKMok. Take this full course.

  • but only with html and css can you make a system like this?

  • https://elojobmax.com.br/elojob has a look at?

  • I was told that I would need jscript + php tb and I’m lost I started studying php I already have a notion of the majority because I know a bit of c , the structure of the language is not so difficult .

  • To program for web you need to know HTML + CSS + Programming Language (Php for ex) and also recommend studying JS (Java Script). I highly recommend that you search Youtube for "Basic HTML course, and then study CSS, only after you have mastered these two, start studying PHP.

1 answer

0

You can do this using CSS and HTML. Just create 3 divs side by side and a button at the bottom. Then you send the form data to a PHP page and do the treatments as you like. See how it would look (the image is just for example):

#_opcoes_main{
   font-size: 0;
   display: block;
   width: 100%;
   text-align: center;
   color: #444;
}

._opcoes_div{
   display: inline-block;
   margin: 10px 0;
   vertical-align: top;
   font-size: 18px;
   width: calc(100% / 3.5);
   min-width: 300px;
}

._opcoes_div em{
   color: #2896c8;
   font-size: 1.2em;
   font-weight: bold;
}

._opcoes_div p{
   font-size: .8em;
   font-weight: bold;
   margin: 3px 0;
}

._opcoes_div select{
   border: 1px solid #ddd;
   padding: 10px 15px;
   margin-bottom: 10px;
   width: 200px;
   font-size: .8em;
}

._opcoes_div img{
   height: 120px;
   margin: 70px 0 35px;
}

#_botao_valor{
   font-size: 0;
   border: 2px solid #000;
   margin-top: 20px;
   display: inline-block;
   cursor: pointer;
   padding: 0;
   filter: grayscale(100%);
   transition: all .2s ease-in-out;
}

#_botao_valor:hover{
   filter: grayscale(0%);
}

#_botao_valor div{
   font-size: 18px;
   display: inline-block;
}

#_botao_valor div:nth-child(1){
   font-weight: bold;
   background: #eff2f4;
   padding: 12px;
   border-right: 1px solid #000;
}

#_botao_valor div:nth-child(2){
   font-weight: bold;
   background: green;
   padding: 12px 20px;
   color: #fff;
}

#_botao label{
   font-size: 16px;
   font-weight: bold;
}
<div id="_opcoes_main">
   <form action="" id="_form" method="post">
      <div class="_opcoes_div">
         <em>1.</em> <strong>Selecione a Liga e Divisão atual</strong>
         <br />
         <img src="https://image.freepik.com/icones-gratis/variante-escudo-com-bordas-brancas-e-pretas_318-48076.jpg" />
         <br />
         <p>Liga</p>
         <select name="lig_atu" id="lig_atu">
            <option value="bronze">Bronze</option>
         </select>
         <br />
         <p>Divisão</p>
         <select name="div_atu" id="div_atu">
            <option value="v">V</option>
         </select>
      </div>
      <div class="_opcoes_div">
         <em>2.</em> <strong>Selecione a Liga e Divisão desejada</strong>
         <br />
         <img src="https://image.freepik.com/icones-gratis/variante-escudo-com-bordas-brancas-e-pretas_318-48076.jpg" />
         <br />
         <p>Liga</p>
         <select name="lig_des" id="lig_des">
            <option value="prata">Prata</option>
         </select>
         <br />
         <p>Divisão</p>
         <select name="div_des" id="div_des">
            <option value="iv">IV</option>
         </select>
      </div>
      <div class="_opcoes_div">
         <em>3.</em> <strong>Selecione a Fila desejada</strong>
         <br />
         <img src="https://image.freepik.com/icones-gratis/variante-escudo-com-bordas-brancas-e-pretas_318-48076.jpg" />
         <br />
         <p>Fila</p>
         <select name="fila" id="fila">
            <option value="solo/duo">Solo/Duo</option>
            <option value="flex">Flex</option>
         </select>
      </div>
      <br clear="all" />
      <div id="_botao">
      <button type="submit" id="_botao_valor">
         <div>
            R$ 95,00
         </div>
         <div>
            ADQUIRIR
         </div>
      </button>
      </div>
   </form>
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.