Form

概述

注意：以下示例中的绿色虚线表示容器边界。

表单布局

表单的容器（通常就是 <form> 元素）需要添加 .cm-form 这个类。建议把表单作为 <section> 的子元素。

表单的每个字段独占一行，以下简称 “表单行”。每个表单行都需要有 .cm-form-line 这个类。

多个表单行可以组成一个区块（.cm-section-content）；整张表单可能是由多个区块组成的。区块之间有间隙。

表单的结构大致如下：

main > section    //视图主体中的逻辑区块
	form.cm-form  //表单容器
		div.cm-section-content  //表单区块
			div.cm-form-line    //表单行
			div.cm-form-line    //表单行
			...
		div.cm-section-content  //表单区块
			div.cm-form-line    //表单行
			...

可以在表单区块的上方添加标题（.cm-section-title）。

表单行

表单行内的基本结构如下：

div.cm-form-line    //表单行
	label.cm-form-label  //标签容器
		em.required '*'  //必填标记（可选）
		'标签'           //标签文本
	div.cm-form-ctrl     //控件容器
		input            //控件

控件的详细约定将在下面详细陈述（各控件的结构约定请直接查看页面源码）。

基本控件

文本输入框（包括数字、Email、URL 等 HTML5 新增的文本类型的输入框）的效果如下：

还可以有单位（请留意该元素在结构中的位置）：

多行文本输入框的效果如下：

下拉框的效果如下：

关于占位符

文本输入框的占位符采用原生的 placeholder 属性来实现。

下拉框的占位符效果需要分三步走：

给用作占位符的 <option> 元素添加 .cm-form-placeholder 类。
在页面中加载 CMUI 的脚本文件及其依赖，下拉框即可获得占位符效果。
为避免脚本生效前后的闪动效果，对于那些给没有初始值的（即默认选中占位符选项的）下拉框，我们可以为它们手动添加 .cm-form-placeholder 类。如果下拉框是在脚本加载之后动态生成的，也需要做这个处理。

没有初始值的下拉框的结构如下：

div.cm-form-select-wrapper    //下拉框的容器
	select.cm-form-placeholder      //下拉框
		option.cm-form-placeholder  //占位符选项
			'请选择颜色'
		option '红'                 //常规选项
		option '黑'                 //常规选项

有初始值的下拉框的结构如下：

div.cm-form-select-wrapper    //下拉框的容器
	select                          //下拉框
		option.cm-form-placeholder  //占位符选项
			'请选择颜色'
		option @selected '红'       //常规选项
		option '黑'                 //常规选项

复合控件

某些字段包含了多个控件，其布局也稍复杂。

两个下拉框的组合有两种形式：

多个复选框的效果如下：

图片上传

注意：CMUI 只提供了图片上传控件的样式，未提供上传功能。

图片上传控件的初始状态如下。

已上传不同张数的效果分别如下。

（图片来源：Peter Miller @ Flickr）

上传的不同阶段的样式分别如下。

提示信息

静态的提示语有以下两种形式。首先是块状的强化提示：

然后是放置在输入框附近的弱化提示：

动态的提示语也有两种形式。一是表单校验时显示的错误信息，效果如下：

注意：CMUI 仅提供了错误信息的样式，未提供表单校验功能。

二是交互过程中产生的强化错误提示，参见以下效果：

交互组件

某些字段点击后会打开一个独立的交互组件（比如 Panel、Dialog 或 Subview）来完成内容的填写。因此这些字段在显示值的位置并不是一个表单控件，而是交互组件的占位符和触发器。

已填状态如下。

<< 返回首页