how to set a form field label on top of field??

[chrisschristou]

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.

[nauticalmac]

example please. Is this just an html layout question?

[chrisschristou]

like on thsi picture

[JorgeM]

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.

[nauticalmac]

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

[chrisschristou]

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>

[nauticalmac]

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.

[chrisschristou]

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

[chrisschristou]

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>