select / form / input / html and php integration

Question

select / form / input / html and php integration

Navigation

#1 by (0 votes)

-1

I'm trying to create a system that looks like this:

As I'm starting now, I'm trying anyway to learn even if it takes a long time to get something close to it. So far I've been able to do this:

htmlcodesofar:

<!DOCTYPEhtml><htmllang="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 track or I need to change or improve something, and if someone can tell me if the part of the div is correct or missing something?

I have not tried anything in php yet.

php html css

asked by anonymous 25.12.2017 / 20:25

1 answer

Regex in Python to find several possible names I am inserting an array into the database through a script that I did but only saves the first and second digits

score 0 · Answer 1

You can do this using CSS and HTML. Just create 3 divs side by side and a button underneath. Then you send the form data to a PHP page and do the treatments however you want. Here's 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><selectname="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><selectname="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><selectname="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>