1

Previously i have been using <table> tag in order to structure a form in such a way that we a nice formatted form so that each label and field is on line with eachother like the following:

Email:       [############]
Password:    [############]

However there's a semantic problem here, a form is not exactly table data. So where a table is graphically suiting, its not on a semantic level.

What would be the proper way to structure a form so it's also graphically pleasing as well as semantically correct in terms of data type?

netbrain
  • 9,194
  • 6
  • 42
  • 68

2 Answers2

1

This A List Apart article does exactly that.

It uses semantically correct tags, and CSS styling to build a table-less form with stable margins. In a nutshell, it uses label tags to display the text, and gives them fixed widths to make the form fields start at the same horizontal position.

For a solution with flexible dimensions, see Fluid input elements.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • the only trouble with this that tables DO provide, is if you wanted it to be autosized, and not fixed width. – netbrain Apr 18 '13 at 06:53
  • @netbrain yeah, tables offer some unique layouting capabilities that can't be reproduced with CSS (except for the IMO incredibly silly `display: table` workaround). Flexible width can be done with CSS though, this should give you what you need: [Fluid input elements](http://stackoverflow.com/q/7120066) – Pekka Apr 18 '13 at 06:56
0

Try using <fieldset> then customizing your CSS for a better look.

<fieldset>
    <legend>Login</legend>
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" />
    <br />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" />
    <br />
</fieldset>
Felix Pamittan
  • 31,544
  • 7
  • 41
  • 67