form

聊聊input元素

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

聊聊Web中的下拉选项的事情

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

美化表单的CSS高级技巧

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

使用HTML和CSS提高表单验证用户体验

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

使用 Sass 美化表单控件

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

[转载]利用 HTML5 美化表单

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

伪元素控制表单样式

伪元素大家熟悉的可能也就是常见的那几种,比如“::before”、“::after”等,熟不知各大引擎浏览器都有自己的私有伪元素,用来做一些特别的处理。比如前段时间CtripUED团队整理的Webkit CSS Library,里面整理了所有webkit引擎浏览器的私有属性和一些伪元素对元素的样式处理。本文由D姐根据TJ VanToll的英文文章原名《List of Pseudo-Elements to Style Form Controls》进行翻译,向大家介绍了一些伪元素控制表单的样式方法。因为当开发web应用程序时,表单样式是个头疼的问题。以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式。然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示。然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎。以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表。希望这篇文章对大家处理表单时有所帮助。

CSS构建下拉列表

下拉选择框对于前端人员总是烦人的事情,早前要么就是默认的样式,但是有时候需要符合整体设计的需求,默认的总是让人不尽如意,为了解决这个问题,开始有使用j脚本来模仿效果。可是对于不懂js的同学来说,又不知道如何下手。不过不要紧,今天Jekst根据的英文文章原名《Css-only Alternative to the Select Element》进行翻译,给带大家来一篇纯css制作下拉选择框的效果,希望大家能从中找到自己需要的东东。

如何移除button在IE67下的黑边

好久没有处理过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上submit按钮bug

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

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

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

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

页面

返回顶部