使用HTML输入数据的正确方法
[英]Proper way to input data using HTML
问题描述
I use ASP.NET. 
我使用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. 因此，我想知道，将输入字段放置在我的Web窗体上的正确方法是什么，但是要让它们看起来很漂亮，也就是说，在左对齐控件旁边放置一个rigth对齐标签，也许每行多个在下一行中，标签和控件与先前的控件对齐。
The only thing I can think of is one div per label / control, but that feels strange... 我唯一能想到的是每个标签/控件一个div，但这感觉很奇怪...
Also, should my controls be inside <form> tags? 另外，我的控件应该放在<form>标记内吗？ I've never ever used them. 我从来没有使用过它们。
4 个解决方案
解决方案1
2 已采纳 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". 我已经看到人们花了无数的时间试图用不同的HTML标签重新创建表结构，其原因无非是说“他们没有使用表”。 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. 是的，与表单相关的所有控件都应位于form标签内。
解决方案2
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. 您还可以使用CSS进行定位，但随后必须处理跨浏览器的支持。 Personally, I use tables for this kind of thing. 就个人而言，我将表用于此类事情。
解决方案3
0 2012-05-10 14:28:19
I think what you are asking relates to writing semantic HTML . 我认为您要问的与编写语义HTML有关 。 <TABLE> tags were originally intended for rendering tabular data, but got co-opted for use in general layout. <TABLE>标记最初是用于呈现表格数据的，但已被选择用于常规布局。 This has persisted to this day, despite the fact that HTML and CSS have since grown to have many more options for layout. 尽管HTML和CSS从那时起已经拥有更多的布局选项，但这种情况一直持续到今天。
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. 没有对与错，但是许多人为了编写更多的语义HTML而会在其输入周围使用<ul><li>标记，因为在某种意义上可以将表单输入视为一个列表。
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. 关于<FORM>标记的使用，由于现在流行AJAX GETS和POSTS，您并不总是需要它们，但我通常将它们包括在内，这既是制作更多语义代码的方式，也是对后续开发人员提高清晰度的一种方式，但作为要使用的容器，因此当我需要使用jQuery（或您选择的库）选择器时，可以处理子输入。
解决方案4
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. 相反，您应该使用div标签来布局页面的不同元素。 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. 然后，您应该使用CSS进行页面布局，以将各种元素放置在页面上所需的位置，并将元素彼此并排放置，等等。
Look into using CSS floats if you are new to using CSS for layout. 如果您不熟悉使用CSS进行布局，请考虑使用CSS float。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.