hello friends, Happy new year
all just want know how can i set the label of field on the top of field not left on the top.

example please. Is this just an html layout question?

Have you taken a look at the source code on the site you found that example on? I suspect its simply a label or span element above each input element.

Send your code with it on the left and then we can show you how to change it.

here is the form code

<form action="<?php echo $editFormAction; ?>" method="POST" name="formulaireajout" class="formulaireajout" id="formulaireajoutid">
        Product:<input name="article" type="text" id="champajout" value="valur" readonly>
        <select name="aditional" id="aditional">
        <option value="black" selected="selected">select color</option>
           <option value="black">Black</option>
           <option value="white">White</option>
         </select>
        Select a color<br>
         <input name="quantity" type="number" min="1" max="20" value="1"  id="quantityfield">
         Quantity<br>
        <input name="price" type="text" id="pricefield" value="value" readonly>Price<br>
        <select name="Shipping" id="shipping"> Shipping
        <option value="0" selected="selected">Shipping</option>
           <option value="0">0.00</option>
           <option value="9.80">9.85</option>
           <option value="19.60">19.80</option>
         </select>Shipping<br>
        <input name="total" type="text" id="totalfield" value="value" readonly> 
        Total<br>
         <input name="addtocart" type="submit" id="submittocart" value="ADD TO CART">
         </form>

Use a table.

<form action="<?php echo $editFormAction; ?>" method="POST" name="formulaireajout" class="formulaireajout" id="formulaireajoutid">
  <p>
    <table width="50%" border="0">
      <tr>
        <td>Product:</td>
        <td><input name="article" type="text" id="champajout" value="valur" readonly></td>
      </tr>
      <tr>
        <td>Select a color</td>
        <td><select name="aditional" id="aditional">
      <option value="black" selected="selected">select color</option>
      <option value="black">Black</option>
      <option value="white">White</option>
    </select></td>
      </tr>
      <tr>
        <td>Quantity</td>
        <td><input name="quantity" type="number" min="1" max="20" value="1"  id="quantityfield"></td>
      </tr>
      <tr>
        <td>Price</td>
        <td><input name="price" type="text" id="pricefield" value="value" readonly></td>
      </tr>
      <tr>
        <td>Shipping</td>
        <td><select name="Shipping" id="shipping">
      <option value="0" selected="selected">Shipping</option>
      <option value="0">0.00</option>
      <option value="9.80">9.85</option>
      <option value="19.60">19.80</option>
      </select></td>
      </tr>
      <tr>
        <td>Total</td>
        <td><input name="total" type="text" id="totalfield" value="value" readonly></td>
      </tr>
      <tr>
        <td colspan="2"><input name="addtocart" type="submit" id="submittocart" value="ADD TO CART"></td>
      </tr>
    </table>
  </p>
</form>

Change the first td in each row to "<td align='right' >" for the labels to tidy up the layout.
I'd recommend finding an online course on html and css if you want to continue designing web pages.

there is no way to do it without using table ??? cause i have to insert the form in a DB table.

i just tried this css and it work maybe someone fins it in future

<style media="screen" type="text/css">
 label{display:inline-block;}
input{display:block;}
select{display:block;}
</style>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.