在Web中通过HTML的表单和用户交互是最常见的方式之一，同时HTML的表单也是Web最为复杂的交互部分之一。正因为其复杂，Web中的表单开发也令开发较为头疼。另外，Web表单涵盖了很多部分，除了我们最为熟悉的的<input>、<button>、<select>等表单元素之外，还有其他新的表单元素，比如在HTML5新增的<datalist>、<output>、<progress>和<meter>等元素。简单地说，这些元素可以构建出人与机对话或交互用户界面，然而由于历史和技术上的原因，如何充分发挥它们的潜力并不总是显而易见的。就拿<input>来说吧，要想彻底了解和懂得用<input>并不是易。既然如此，我们在这篇文章中就来和大家聊聊<input>中的故事。

在Web的开发中，对于下拉选项的称谓各有不同，比如下拉菜单，下拉选择框等等。不同的场景之下，采用的方式也有所不同，比如在表单中会使用<select>元素，在自动输入框时会使用HTML的<datalist>和<input>结合使用。而表单中的控件在Web中是件复杂的事情，特别是CSS样式方面更是如此。在这篇文章中，我们就一起来聊聊Web下拉选项相关的事情。

表单一直以来对于CSSer来说都是一件不易的事情，很难用CSS处理好表单要样式。但是有一些很少使用的选择器，却赋予我们不一样的能力，可以让我们很好的控制input元素和其周边元素的样式，而且是根据功能来调整不同的样式，这些往往都是通过JavaScript辅助完成的。而这些选择器中有一些是较新的，而另一些是老的选择器，只不过没有过多的被重视，甚至没什么人使用。以至于这么强大的功能就这样被忽视。

你可以只使用HTML属性实现表单验证的效果，可以使用CSS选择器带来简洁的用户体验。但是，你需要使用一些CSS技巧让效果更好。

表单控件在网页设计中无疑是占有重要地位的。由于表单控件是用户频繁使用到的页面元素，所以有必要使用 Sass 来快速美化项目中的表单控件。

对表单感兴趣的人并不多，但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 FormData 对象让创建表单变得更轻松，甚至可能更富有趣味性。

好久没有处理过IE6下的兼容问题了，今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边，就算是你在样式中重置了一个border属性也是如此。真是蛋疼的很。后来经过查找相关的资料，终于找到了解决方法，放上来与大家分享一下，这个问题有可能不只一个人会碰到。(^_^)

在介绍如何处理这个bug之间我们一起来回顾一下，在IE6-7下，input[type="submit"]和button[type="submit"]存在的问题还不仅是这个，常见的有：button在IE67下的宽度兼容问题、button的行高问题（各浏览器下解析不一样）、button的outline问题，甚至submit在ios下也存在问题。这么多烦人的事，苦逼了前端人员，（具体解决方案可以点击这里查看）。今天就在为大家增加一个问题的解决方案——如何去除IE67下按钮的黑边框

自从完成上次iPhone的几个页面效果后，一直在没有制作iPhone的页面效果了，今天在公司写了一个登录页面效果，让我碰到一个怪异的问题——“表单中的input[type="submit"]和input[type="reset"]按钮在iPhone的safari浏览器下圆角有一个bug”。下面我来简单的描述一下这个bug的样子：

初载入页面后，表单中的input[type="submit"]和input[type="reset"]按钮渲染成下图的样子：

奇怪的是你点击以后就会正常：

对比一下，你也会觉得怪，怪都算了，还不知道如何下手:

前几天在W3cplus Demo站上放了一个CSS3 Sliding Form Helps效果。

今天我们就一起来看看他是如何实现的。

这两天制作了一个登入栏效果的案例，简单点说就是集成了以前本站介绍的几个效果。

1、CSS3制作Login栏

2、CSS3和jQuery制作翻转表单