原文：入力フォームをデザインする時に気をつけること8つ
地址：https://liginc.co.jp/395158
原作者：もーりー
翻译：章鱼小年糕（若有翻译错误，欢迎提出）

大家好，我是设计师もーりー先生。
最近接触了很多关于表单的设计，我在网上搜索了许多资料，这次接着这个机会在这里把所学到的一些点都一起整理一下。

输入元素成列的放置

因为网站本来就是从上到下浏览的，所以把输入元素成列的放置：

把标题与输入元素分组化

如果输入元素的标题（Label）是和输入元素成线性摆放的，记得给它们加上margin值为他们划分成一个个组：

避免全部使用大写字母

当元素标题要使用英语的时候，会有全部使用大写字母的情况。虽然有时候这可能会很酷炫，但是很遗憾这样会让人不好识别。

如果选项不超过6个就都展示

如果选项很多的话使用下拉框会比较好，但是如果选项并不多，全部把它展示出来也没什么难的。因为下拉框选择的话，必须要点击2次才能从选项里面选到想要的。

checkbox和radio纵向排列

为了说明，checkbox纵向排列会更加容易进行选择。

错误提示为了醒目放在离输入框近的地方

这样是为了减少出错后定位到出错输入表单元素的时间。

把握输入表单元素的宽度

如果是输入像电话号码、邮件号码等数量少（或者固定）的文字情况，请配合文字数量调整输入元素的宽度。

不使用*来表示必填与非填项

用*来区分必填项目和非必填项目是很难让人理解的，所以对所有的情况最好是使用“必填”和“非必填”等字样来进行提示。

小结

怎么样？上面写的内容都是设计师的观点，在实际进行设计的时候或者在验证的时候还是要和程序员一起商量哦。
以上就是所要介绍的所有内容~
（年糕君：其实这是一篇非常小清新的内容，文字也很少，虽然也不是绝对的标准，但是也稍微有一点点小技巧包含在里面）

【译】在设计表单的时候应该注意的八点相关推荐

使用开源的驰骋表单设计器设计表单案例演示
我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下: 工业设计和创意需求登记表原始表单图在ccform表单设计器中,设计如下: 驰骋表单设计器,设计表单所见既所得,操 ...
驰骋表单设计器设计表单案例演示
为什么80%的码农都做不了架构师?>>> 我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下:工业设计和创意需求登记表原始表单图在ccform ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（44）-工作流设计-设计表单...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后 ...
html5 设计 form,为HTML5表单设计表单模板
为HTML5表单设计表单模板 AEM中的HTML5表单组件提供了将XFA表单模板渲染为HTML5格式的功能. 表单设计人员可以使用Forms Designer设计表单模板,并使用HTML5呈现功能. ...
移动UI设计-表单设计
移动UI设计-表单设计登入表单注册表单核对表单计算表单搜索表单多步骤表单长表单
html语言设计表单实例,Html表格制作及实例
简单标准表格: Html命令: 第1行第1列第1行第2列第2行第1列第2行第2列 31 32 41 42 第1行第1列第1行第2列第2行第1列第2行第2列 31 32 41 42 上下合并 ...
HTML 自学笔记（HTML框架+表单设计）
HTML框架什么是框架:将浏览器划分成不同部分,每一部分加载不同的网页,用以实现在同一浏览器窗口中加载多个页面的效果. <frameset> 划分框架标记. 语法格式:<frame ...
电子表单设计，表单打印，表单填写，数据发布，VC++，VB，源代码组件库
电子表单设计,表单打印,表单填写,数据发布,VC++,VB,源代码组件库 -- 为您提供即刻可以拿来使用的源码级电子表单解决方案! E-Form++可视化组件库企业版本电子表单解决方案在E-Form+ ...
android 漂亮的表单界面,面向ArcGIS for Android的表单界面生成器的设计与实现
孙俊英陈忠超摘要:基于ArcGIS for Android的采集系统作为当下主要的野外采样方式之一,被广泛的应用于各类场景,针对不同采集内容,采集系统的主要差异在于采样的属性数据所有不同,使用传 ...

【译】在设计表单的时候应该注意的八点