Proper way to input data using HTML
Question
I use ASP.NET. So far I've always used tables to put inputs on them and have all nice and well looking. But a while ago I read that tables are not for that. So, I want to know, what is the proper way to place input fields on my webforms, but stil having them look nice, that is, a rigth aligned label next to a left aligned control, perhaps more than one per row, and on the next row, labels and controls aligned to the previous controls.
The only thing I can think of is one div per label / control, but that feels strange...
Also, should my controls be inside <form> tags? I've never ever used them.
4 answers
solution1
2 ACCPTED 2012-05-10 14:46:34
Use tables when it makes sense. A form with a column of labels and a column of inputs makes perfect sense.
Honestly, I think the whole "table-less layout" movement has become more of a fad than anything else. I've seen people spend countless hours trying to recreate a table structure with different HTML tags for no other reason than to say that "they didn't use a table". That's just silly, why recreate something that already works perfectly fine as is?
The problem with using tables comes when you start to layout your pages with tables. For example:
Don't do this
<body>
<table>
<tr class="header"><td><!-- header content --></td></tr>
<tr class="content"><td><!-- page content, possibly with a two column table for sidebar --></td></tr>
<tr class="footer"><td><!-- footer content --></td></tr>
</table>
</body>
Using tables for building a form, however, makes perfect sense.
And yes, all controls pertinent to your form should be within form tags.
solution2
1 2012-05-10 14:21:55
There is nothing wrong with using tables to position items. You can also use CSS for positioning, but then you have to deal with cross-browser support. Personally, I use tables for this kind of thing.
solution3
0 2012-05-10 14:28:19
I think what you are asking relates to writing semantic HTML . <TABLE> tags were originally intended for rendering tabular data, but got co-opted for use in general layout. This has persisted to this day, despite the fact that HTML and CSS have since grown to have many more options for layout.
Tables are easy for us to understand, with their fixed grid layouts. Floats can take a little more work to understand.
There is no right or wrong, but many people, in an effort to write more semantic HTML, will use <ul><li> tags around their inputs, because form inputs can be viewed as a list in one sense.
Regarding the use of <FORM> tags, with the prevalence of AJAX GETS and POSTS now, you don't always need them, but I usually include them, both as a means of making more semantic code and improved clarity for the developers that follow, but as a container to use so I can address the child inputs when I need to using jQuery (or library of your choice) selectors.
solution4
0 2012-05-10 14:36:16
Tables should only be used to display tabular data on web pages. They should not be used for layout.
Instead, you should use div tags to layout the different elements of your page. eg:
<div class="Labels">
<label for="FullName">Name: *</label>
</div>
<div class="Fields">
<input class="text" type="text" name="FullName" id="FullName" />
</div>
You should then use CSS for the page layout to position the various elements where you want them on the page, and to position the elements alongside each other etc.
Look into using CSS floats if you are new to using CSS for layout.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.