Geek Answers Handbook

Build a data entry form in an HTML table: tables or not?

I want to create a data entry form as follows:

Name:    [ Name textbox ]
Age:     [ Age textbox  ]
label n: [ textbox n    ]

If the labels are left-aligned and the text fields are left-aligned. I know that I can do this in an element table, but I also know that "tables should only be for tabular data." Although I partially agree / disagree with this statement - I would like to know whether it is possible / necessary to consider that my desired layout is “tabular data” and which alternative layout should have yielded the same results without dozens of rows of complex cross- CSS browser.

I am not involved in web development at the moment (strictly WinForms for some time when I work with the user interface), so I appreciate that there can be an elegant solution. Perhaps due to an unordered list with bullet points turned off and the position of the label-> field field shifted, maybe?

+5
source share
2 answers

Unordered lists with items labelshould be here. The markup I would use should look something like this:

<form id="person" method="post" action="process.php">
    <ul>
        <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li>
        <li><label for="age">Age: </label><input id="age" name="age" type="text" /></li>
        <li><label for="n">N: </label><input id="n" name="n" type="text" /></li>
    </ul>
</form>

And this CSS, if you get something similar to what you requested:

#person ul {
    list-style: none;
}

#person li {
    padding: 5px 10px;
}

#person li label {
    float: left;
    width: 50px;
    margin-top: 3px;
}

#person li input[type="text"] {
    border: 1px solid #999;
    padding: 3px;
    width: 180px;
}

See: http://jsfiddle.net/tZhUQ/1 for more interesting stuff you can try.

+4
source

Webcredible , text-align: right, , , , .

Smashing Magazine Design Shack .

+1

More articles:


All Articles