HTML5表单网站设计

发布日期:2015-09-11 16:28:08
我决定让人们可以在网站上对那些已经获得大奖的烂电影发泄他们的不满。我要制作一个表单,让人们发表想法,说说哪些电影不该获奖,而那些电影应该得奖。下图展示了我们要制作的表单在 Chrome(v16)中添加了一点基本样式后的效果:
除了标准的表单输入框和文本输入域之外,表单中还有一个数字控制器、一个滑动输入条,并且很多表单域都有占位符文字。如果我们聚焦(选中)某个表单域,其中的占位符文字就会自动消失;如果表单域失去焦点且未输入任何内容(点击一下输入框以外的区域即可) ,占位符文字又会再次显示。此外,如果在 Google Chrome浏览器中查看页面,当我们准备提交没有任何内容的表单时,就会看到下面的结果:
页面不仅包含一些视觉元素(滑动条a和控制器) ,还具有基本的客户端验证功能。我们知道,过去的表单验证一般都需要依赖 JavaScript。
现在,所有这些用户界面元素(包括上述的滑动条、占位符文字和控制器)和表单验证都可以使用原生的 HTML5 来完成,不需要再依赖 JavaScript,这是个很好的消息。让我们来看看如何使用这些新的表单特性。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计