ordering boxes in html

Question

I want to order my boxes in an html form . my boxes are unordered and I dont know how to order them and exactly say where to place boxes and botton infront of each text /

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<body>
MAC Adress : <input type="text" name="mac-addr">
<input type="submit" value="change"><br>
IP Adress : <input type="text" name="ip-addr">
<input type="submit" value="change"><br>
Gateway Adress : <input type="text" name="gate-addr">
<input type="submit" value="change"><br>
Subnet Mask : <input type="text" name="sub-msk">
<input type="submit" value="change"><br>
Ntp Server IP :  <input type="text" name="ntp-ip">
<input type="submit" value="change"><br>
</head>
</body>
</html>

What do you mean by "order them"? What's the problem? – Oded Mar 10 '13 at 08:52 — Oded, Mar 10 '13 at 08:52
http://learnlayout.com may help. – Oded Mar 10 '13 at 08:53 — Oded, Mar 10 '13 at 08:53
Do you mean how to layout the form elements? – Amy Mar 10 '13 at 08:54 — Amy, Mar 10 '13 at 08:54

score 2 · Answer 1 · answered Mar 10 '13 at 08:55

2

This is how you should do it

<label for="#">MAC Adress : </label>
<input type="text" name="mac-addr"><br />


label {
    display: inline-block;
    margin-top: 50px;
}

Demo

Demo 2 (With Buttons)

answered Mar 10 '13 at 08:55

Mr. Alien

153,751
34
298
278

Saman Gholami · Answer 2 · 2013-03-10T09:59:53.233

You can use this code :

<body>
    <table><tr><td>
        MAC Adress : </td><td><input type="text" name="mac-addr"></td><td>
        <input type="submit" value="change"></td>
        </tr><tr><td>IP Adress : </td><td><input type="text" name="ip-addr"></td><td>
        <input type="submit" value="change"></td></tr>
        <tr><td>Gateway Adress : </td><td><input type="text" name="gate-addr"></td><td>
            <input type="submit" value="change"></td></tr>
            <tr><td>Subnet Mask : </td><td><input type="text" name="sub-msk"></td><td>
                <input type="submit" value="change"></td></tr><tr>
                <td>Ntp Server IP :  </td><td><input type="text" name="ntp-ip"></td><td>
                <input type="submit" value="change"></td></td></table>
    </body>

And this is preview : http://jsfiddle.net/Gn7aU/

UPDATE :

This is the best way that you can order your items, using div :

<div class="tbl">
        <div class="tbl-row">
            <div class="tbl-cell">
                MAC Adress :
            </div>
            <div class="tbl-cell">
                <input type="text" name="mac-addr">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
        <div class="tbl-row">
            <div class="tbl-cell">
                IP Adress :
            </div>
            <div class="tbl-cell">
                <input type="text" name="ip-addr">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
        <div class="tbl-row">
            <div class="tbl-cell">
                Gateway Adress :
            </div>
            <div class="tbl-cell">
                <input type="text" name="gate-addr">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
        <div class="tbl-row">
            <div class="tbl-cell">
                Subnet Mask :
            </div>
            <div class="tbl-cell">
                <input type="text" name="sub-msk">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
        <div class="tbl-row">
            <div class="tbl-cell">
                Ntp Server IP :
            </div>
            <div class="tbl-cell">
                <input type="text" name="ntp-ip">
            </div>
            <div class="tbl-cell">
                <input type="submit" value="change">
            </div>
        </div>
    </div>

And you should add css style for this :

.tbl
{
    display:table;
}
.tbl-row
{
    display:table-row;
}
.tbl-cell
{
    display:table-cell;
}

this is the preview : http://jsfiddle.net/aksVm/

-10 for @Oded : If you read the question, you know that the user is a little starter.i use table for this reason.i use div for myself. — Saman Gholami, Mar 10 '13 at 09:44
So, just because the user is starting off, you think the right thing to do is teach them the **wrong** way to do this? No - you should show them the **right way** to do things. — Oded, Mar 10 '13 at 09:45
It **is** the wrong way. Tables are for tabular data. CSS is for layout. You are using tables for layout. It is the **wrong** way. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — Oded, Mar 10 '13 at 09:47
@Oded I think it's the simple way for start but for your reason i add the **BEST** way too. — Saman Gholami, Mar 10 '13 at 10:01

Mauritz Hansen · Answer 3 · 2013-03-10T10:01:17.970

The preferred solution for this is to use CSS to style the table (see Mr Alien's answer).

Simply using XHTML to realize this you can use a table to format your data (although this approach is frowned upon):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<table>
  <tr>
    <td>MAC Adress :</td>
    <td><input type="text" name="mac-addr"></td>
    <td><input type="submit" value="change"></td>
  </tr>
  <tr>
    <td>IP Adress :</td>
    <td><input type="text" name="ip-addr"></td>
    <td><input type="submit" value="change"></td>
  </tr>
  <tr>
    <td>Gateway Adress :</td>
    <td><input type="text" name="gate-addr"></td>
    <td><input type="submit" value="change"></td>
  </tr>
  <tr>
    <td>Subnet Mask :</td>
    <td><input type="text" name="sub-msk"></td>
    <td><input type="submit" value="change"></td>
  </tr>
  <tr>
    <td>Ntp Server IP :</td>
    <td><input type="text" name="ntp-ip"></td>
    <td><input type="submit" value="change"></td>
  </tr>
</table>
</body>
</html>

On a side note, your closing head tag should come before your opening body tag.

-1 Tables for layout? CSS for layout. Use tables for _tabular_ data. — Oded, Mar 10 '13 at 09:39
Oded, you are right, of course. However, considering the level of the question I would suggest something that is doable with the apparent skill level - pragmatic approach. I have modified the answer to reflect this. — Mauritz Hansen, Mar 10 '13 at 10:03

ordering boxes in html

3 Answers3