网站的表单功能主要是通过form标签来实现,通过form表单可以实现将表单内输入的数据提交到服务器端进行处理。下面以登录功能,输入用户名、密码作为表单元素来介绍网站表单功能的实现。
在HTML技术未进行第五次修订之前,表单元素置于form标签的开头与结尾中,而HTML5技术的升级使这个数据处理过程得到了完善,让form表单以一种声明式表单的形式出现,打破了原有表单元素放置位置的局限性,HTML5技术中form表单新增了很多新的表单属性和控件类型,让网页开发工作者不需要再编写大量的Java代码就能够实现很多性能,让form表单的制作变得更加简便快捷。
网页开发工作者只需将表单元素放置网页任意位置,就能依照相应的运用要求实现id关联就能完成。例如:新增color类型可以弹出一个颜色选择器,用户只需选择颜色值后可以直接反馈给value;还有email、tel、url类型可以对文本框中的邮箱地址、电话号码、网址的合法性进行检测等功能的完成。
网页设计表单制作技巧,教你如何设计网页表单元素
作为UI设计师,需要对网页中,界面中的元素熟悉和了解,有这样一种元素,它作为页面中的一种元素非常常见,而且在用户交互中起着非常重要的作用,那就是表单元素。那么,什么是表单?表单在网页中主要负责数据采集功能,一个表单有三个基本组成部分:表单标签:包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法;表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等;表单按钮:包括提交按钮、复位按钮和一般按钮。
网页表单元素,可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁。实质上表单包括两个部分:一部分是HTML源代码用于描述表单(例如,域,标签和用户在页面上看见的按钮),另一部分是脚本或应用程序用于处理提交的信息(如CGI脚本)。不使用处理脚本就不能收集表单数据。而我们现在要讨论的网页设计表单就是第一部分的设计,而我们UI设计师需要设计的就是表单元素的样式。
不管你在团队中处于什么样的地位,是设计界面还是编写代码,无论是要设计复选框还是要制作更为复杂的CRM程序,表单的设计至关重要。在许多情形下,用户需要同这些表单进行长时间、大范围的交互和操作,任何效率上的提升都会带来体验的极大优化。请务必记住,精心设计的界面不止是要保证形式上的漂亮,方便和高效的设计也是造福用户的重要手段。
表单设计人性化设计的四个技巧:
1.一般表单中包括必填项和选填项,其中必填项会用“*”符号标识出来,而且数量占多数,而选填项最好只有1-2个,因为它们往往容易被用户所忽略,而且用处不大,比如职业、兴趣等,多了就会让人觉得累赘,影响用户填写表单的效率。
2.当添加单行文或多行文表单项时,会有“提醒文字”一栏需要我们完成,这个步骤千万不可以省去,因为它可以提示和引导用户如何填写表单,如果没有的话,用户很有可能会对着一片空白无从下手,以致于跳出表单填写。
3.有时候,用户填写表单时可能需要进行验证,而验证的方式有很多种,包括手机验证、邮箱验证和身份验证。不得不说,手机验证相对于其他验证方式,有着更高的方便性和快捷性,因为一般用户都会随身携带手机,打开手机验证信息只是一秒钟的事。