Question

我正在寻找可以在任何网站上使用的时尚网络表单的一些示例。我搜索过“时尚的网页表单”，但我发现的大多数例子都是非常华丽的形式，使用大量的图像，这些图像在其他使用不同配色方案的网站上看起来不太好。我也发现了许多使用CSS来布局表单的例子，但是他们通常不会对表单应用任何样式来使它们看起来很好。

我正在寻找的是介于两者之间的东西：

正确布局，例如标签和输入对齐（我对整个“标签顶部或旁边”辩论没有意见）
设计精美，但不使用图像，因此可以轻松更改颜色
语义上有效的标记，例如没有表格或JavaScript，虽然我不是原教旨主义者（一些额外的div可以）

指向单个示例的响应比“这是一个包含百万示例表单的页面更有用，其中大多数不符合您的要求”。

我意识到我在这里要求很高，所以道歉并感谢！

Answer 1

这里有一些很好的网站，有自我解释的例子和用法。

http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/.../
http://jeffhowden.com/code/css/forms/
http://24ways.org/2006/showing-good-form

还有数十亿的在线，教程，可下载的示例，样式表。要获得理想的解决方案，您可能需要将它们混合在一起。

Answer 2

请参阅Prettier Accessible Forms。

但是，如Styling form controls with CSS, revisited所述，您在浏览器和操作系统中的外观会有很多差异。

这些文章将向您展示构建视觉上令人愉悦的表单的，而不是为您提供一系列现成模板的目录。

Answer 3

我不确定这是否与您所要求的一样全面，但我喜欢这样简单的事情：

<fieldset>
  <legend>New customer?  Provide the following</legend>

  <label for="FirstName">First Name:</label>
  <input type="text" ID="FirstName" name="FirstName" />

  <label for="LastName">Last Name:</label>
  <input type="text" ID="LastName" name="LastName" />

  <label for="Address">Address:</label>
  <input type="text" ID="Address" name="Address" />

  <label for="City">City:</label>
  <input type="text" ID="City" name="City" />

  <label for="State">State:</label>
  <input type="text" ID="State" name="State" />

  <label for="Zip">Zip:</label>
  <input type="text" ID="Zip" name="Zip" />

  <input type="submit" Text="Submit Order" />
</fieldset>

使用这样的CSS：

fieldset {
  overflow: hidden;
}

label {
  clear: both;
  float: left;
  margin-top: 10px;
  width: 125px;
  /* If you want the labels flush along the right edge */
  padding-right: 5px;
  text-align: right;
}

input {
  float: left;
  margin-top: 10px;
}

/* Align the submit button under the fields */
input[type=submit] {
  clear: both;
  float: left;
  margin-left: 135px;
  margin-top: 10px;
}

这会产生早期in this (completely unrelated) post图像中显示的布局。如果您不介意ASP.NET，那么还有一个带有标记和CSS的源代码下载。

说到重用，我发现基本结构足够灵活，可以在任何地方使用。例如，我们对这个更加自定义的联系表单使用了基本相同的标记和CSS：http://www.thirtyfiveatlanta.com/meet/

Answer 4

我非常喜欢Wufoo的表格：http://wufoo.com/examples/ 我已经复制并使用他们的HTML和CSS作为我自己的项目，效果很好。

Answer 5

Uni-Form

此回复是Darmen发表的评论，但我觉得它应该被提升为回复非常有用

Answer 6

http://www.rockettheme.com/有一些相当不错的模板和主题。它们通常用于现有的CMS系统，但您可以根据自己的站点调整它们或部分它们。

时尚的可重复使用的Web表单

6 个答案: