专业表格设计 [英] Professional Form Design

问题描述

有没有人知道有关设计专业HTML表单的任何资源？


我可以用HTML和CSS编写代码，但我不是最好的设计师。我只需要关于良好，干净的专业设计的指示。


我知道CSS风格的法西斯主义者（可能过于强烈）不赞成在表格上使用CSS，认为它会妨碍而不是帮助用户，因为用户已经习惯了在浏览器上显示表单的方式，更重要的是让它看起来很漂亮。


但是，我认为，并且有许多人持有相同的观点，与网站的专业外观相匹配的小风格改变不会带来任何伤害并且可以增强用户体验。


有问题的表格是具有许多领域的高级搜索表单。这个表格应该拆分成相关部分还是一个大表格好吗？我们谈论的是16个左右的字段，其中一些包含选择框，复选框和单选按钮。


此外，是否有人对样式按钮有意见？重置按钮怎么样？完全摆脱它还是把它移到一边？


提前谢谢。

Does anyone know of any resources on designing professional HTML forms?

I can code in HTML and CSS, but I''m not the best designer. I just need pointers on good, clean professional design.

I am aware that the CSS style fascists (maybe too strong a word) disapprove the use of CSS on forms arguing that it hampers rather than aids the user because users have grown used to the way the form is displayed on their browser and function is more important that making it look pretty.

However, I am of the opinion, and there are many that hold the same view, that small style changes that match the professional look of a website poses no harm and can enhance the user experience.

The form in question is an advanced search form with many fields. Should this form be split into related parts or is one large form OK? We are talking about 16 or so fields with some containing select boxes, check boxes and radio buttons.

Also, does anyone have opinions on styling buttons? What about the reset button? Get rid of it altogether or move it to the side?

Thanks in advance.

推荐答案

我会用一张桌子或者是一些div来解决它。我也会使用CSS来帮助表单匹配网站的其余部分。当我创建表单时，我不会试图让它们过于花哨，我不希望用户猜测任何事情。至于复位按钮，你也可以包括它，你不必真的用它做任何编码所以为什么不拥有它？您可能还想让用户预览数据，如果它将是一个大表格。


HTH，

Aric

I would use a table or some div''s to lay it out. I also, would use CSS to help the form match the rest of the site. I wouldn''t try to make them too fancy, when I create forms I don''t want the user to have to guess about anything. As far as the reset button you may as well include it, you don''t really have to do any coding with it so why not have it? You may also want to let the user preview the data if it''s going to be a large form.

HTH,
Aric

我会使用一个表或一些div来表示它。我也会使用CSS来帮助表单匹配网站的其余部分。当我创建表单时，我不会试图让它们过于花哨，我不希望用户猜测任何事情。至于复位按钮，你也可以包括它，你不必真的用它做任何编码所以为什么不拥有它？您可能还想让用户预览数据，如果它将是一个大型表格。


HTH，

Aric

I would use a table or some div''s to lay it out. I also, would use CSS to help the form match the rest of the site. I wouldn''t try to make them too fancy, when I create forms I don''t want the user to have to guess about anything. As far as the reset button you may as well include it, you don''t really have to do any coding with it so why not have it? You may also want to let the user preview the data if it''s going to be a large form.

HTH,
Aric

感谢您的评论。我使用表来布置表单，因为尝试使用div来布置表单是不值得的，特别是考虑到系统用户使用IE和版本6。大多数人可能都没有听说过Firefox，或者认为只有程序员使用Firefox，Opera和其他浏览器！


是的，我同意不要让表格过于花哨。我在谈论简单的变化，例如轻微阴影，边框颜色变化，按钮着色和颜色变化（但不是太多）。这是本主题的主要目的：提供专业的表格提示。


实际上，这不仅限于表格，而是一般的网站。当然，我可以使用HTML / CSS等进行编码，但设计一个包含漂亮专业形式的漂亮网站是另外一回事。我遇到的主要问题是找到合适的混合色和混合色。


我倾向于三种选择中的一种：蓝色主题，蓝色，主要是白色橙色和绿色，或褐色主题，混合了明暗色调。如果有人可以通过示例，模板或类似方法建议一个好的颜色主题给我一些想法，我将不胜感激。


重置可能很难使用，如果有人点击重置怎么办？按钮而不是搜索按钮？这就是我询问重置按钮的原因。有人建议将它从主按钮（搜索）移开，因为它是一个辅助功能，只在需要时才会很少使用。


在这种情况下，预览不合适，因为它是一种具有一般默认设置的搜索表单，其中大多数默认设置从未更改（但仅在需要时包括在内）。无论何时进行搜索，都可以在两到三个项目上进行搜索，不再需要，但是所有选项都是必需的，因此表格的大小也是如此。日期是最重要的，因为最常用的是。


我还有另一件事是，为方便起见，搜索和重置按钮同时出现在表单的顶部和底部。它是一个很大的形式，可能会超出浏览器窗口大小，除非用户有一个窗口大小最大的大屏幕。我已经将表格限制在760-70px以允许800px屏幕的用户。


所以任何想法（尤其是第4段中提到的颜色）？

Thanks for your comments. I use a table to lay out the form because it''s not worth the effort trying to get divs to lay out the form, especially considering the system users use IE and version 6 at that. Most have probably not even heard of Firefox or think only programmers use Firefox, Opera and other browsers!

Yes, I agree about not making forms too fancy. I''m talking about simple changes such as slight shading, border colour changes, button shading and colour changes (but not too much). This is the main purpose of this thread: any tips on giving a professional touch to forms.

Actually, this is not limited to forms but to a website in general. Sure I can code using HTML/CSS, etc. but designing a good-looking site which includes a nice professional form is something else. The main problem I have is finding the right mix and blend of colours.

I''m inclined towards either one of three options: a blue theme with shades of blue, mainly white with orange and green, or brownish theme with a mixture of light and dark shades. If anyone can suggest a good colour theme with examples, templates or similar to give me ideas, I would be grateful.

The reset is probably hardly used and what if someone clicks on the reset button instead of the Search button? That''s why I asked regarding the reset button. Some suggest moving it away from the primary button (search) because it is a secondary function that''s only used rarely when needed.

A preview would not be appropriate in this case because it''s a search form which has general default settings most of which are never changed (but included just in case they are needed). Whenever a search is made, it is made on probably two to three items, no more, but all the options are required hence the size of the form. The date is at the top because that is used most often.

One other thing I have is the Search and Reset buttons appear both at the top and the bottom of the form for convenience since it is a large form which will probably exceed the browser window size unless the user has a large screen with a maximised window size. i have restricted the form to 760-70px to allow for users with 800px screens.

So any ideas (especially on colour as mentioned in 4th paragraph)?

在图形设计方面，我怀疑你需要我的帮助我的所有网站都是以灰色阴影完成的。蓝色的sheme听起来是三者中最好的。

Doubt you want my help when it comes to graphic design all of my sites are done in a shade of grey. The blue color sheme sounds the best of the three.

这篇关于专业表格设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！