1. 基础外观

    • 提示文字:
    • 提示文字:
    <div class="c_form">
    	<ul class="ul">
    		<li class="li">
    			<span class="label">提示文字:</span>
    			<span class="e_input"><span><input type="text" /></span></span>
    		</li>
    	</ul>
    </div>
    
  2. 扩展外观

    1. 提交按钮

      提交按钮在不设置列数时,将紧接在最后一个表单项之后显示

      • 提示文字:
      • 提示文字:
      <div class="c_form">
      	<ul class="ul">
      		<li class="li">
      			<span class="label">提示文字:</span>
      			
      		</li>
      	</ul>
      	<div class="submitPlace"></div>
      	<div class="submit">
      		<button class="e_button-form"><i class="e_ico-search"></i><span>查询</span></button>
      		<button class="e_button-form"><i class="e_ico-reset"></i><span>重置</span></button>
      	</div>
      </div>
      

      提交按钮在设置列数后,将固定显示在右下角,它将占据一个表单项的位置

      • 提示文字:
      • 提示文字:
      • 提示文字:
      • 提示文字:
      <div class="c_form c_form-col-3">
      	<ul class="ul">
      		<li class="li">
      			<span class="label">提示文字:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      	</ul>
      	<div class="submitPlace"></div>
      	<div class="submit">
      		<button class="e_button-form"><i class="e_ico-search"></i><span>查询</span></button>
      		<button class="e_button-form"><i class="e_ico-reset"></i><span>重置</span></button>
      	</div>
      </div>
      
    2. 列数设置

      当表单项出现多行时请设置 “列数” 和 “提示文字宽度

      1. 一般设置方法

        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        <div class="c_form c_form-col-3">
        	<ul class="ul">
        		<li class="li">
        			<span class="label">提示文字:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        	</ul>
        </div>
        

        【注】支持 1~5 列。

      2. 占据列数设置

        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        <div class="c_form c_form-col-2">
        	<ul class="ul">
        		<li class="li col-2">
        			<span class="label">提示文字:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        	</ul>
        </div>
        
      3. 混合列数设置

        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:
        • 提示文字:

        混合列数设置比较复杂,需要加入一个空 "li" 来为提交部分占据一个单元的位置。

        <div class="c_form c_form-col-mix">
        	<ul class="ul c_form-col-2">
        		<li class="li">
        			<span class="label">提示文字:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        	</ul>
        	<ul class="ul c_form-col-3">
        		<li class="li">
        			<span class="label">提示文字:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        		<li class="li"></li>
        	</ul>
        	<div class="submitPlace"></div>
        	<div class="submit">
        		<button class="e_button-form"><i class="e_ico-search"></i><span>查询</span></button>
        		<button class="e_button-form"><i class="e_ico-reset"></i><span>重置</span></button>
        	</div>
        </div>
        
    3. 提示文字宽度设置

      • 七个汉字的宽度:
      • 提示文字:
      • 提示文字:
      <div class="c_form c_form-col-1 c_form-label-7">
      	<ul class="ul">
      		<li class="li">
      			<span class="label">提示文字:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      	</ul>
      </div>
      

      【注】数值 “7” 代表可容纳的汉字个数,默认为 5 个,支持 0~12 个。

    4. 提示文字、表单元素上下排列方式

      • User name
      • Password
      • Your city
      <div class="c_form c_form-col-1 c_form-label-up">
      	<ul class="ul">
      		<li class="li">
      			<span class="label">提示文字:</span>
      			<span class="e_input"><span><input type="text" /></span></span>
      		</li>
      	</ul>
      </div>
      

      【注】上下排列方式一般用于英文系统

    5. 使用 select 替换提示文字

      • 提示文字:
      <div class="c_form">
      	<ul class="ul">
      		<li class="li">
      			<span class="label">
      				<span class="e_select e_select-left"><span><span>
      					<select>
      						<option>身份证</option>
      					</select>
      				</span></span></span>
      			</span>
      			<span class="e_input e_input-right"><span><input type="text" /></span></span>
      		</li>
      	</ul>
      </div>
      
    6. 内容变化

      1. 输入框 / 选择框 / 多行输入框 / 组合框

        • 输入框:
        • 选择框:
        • 多行输入框:
        • 组合框:
        <div class="c_form">
        	<ul class="ul">
        		<li class="li">
        			<span class="label">输入框:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        	</ul>
        </div>
        

        【注】将元素的代码直接替换指定区域即可。

      2. 纯文本

        • 提示文字: 大家好,我是纯文本。
        <div class="c_form">
        	<ul class="ul">
        		<li class="li">
        			<span class="label">提示文字:</span>
        			<span class="text">大家好,我是纯文本。</span>
        		</li>
        	</ul>
        </div>
        
      3. 单元项提示

        • 密码:
        • 提示文字:
        • 密码长度 6-14 位
        • 提示文字:
        <div class="c_form c_form-col-2 c_form-label-4">
        	<ul class="ul">
        		<li class="li">
        			<span class="label">密码:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        		<li class="li">
        			<span class="label">提示文字:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        		<li class="li">
        			<span class="e_tip">密码长度 6-14 位</span>
        		</li>
        		<li class="li">
        			<span class="label">提示文字:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        	</ul>
        </div>
        
        • 用户名:
        • 密码:
        • 密码长度 6-14 位
        <div class="c_form">
        	<ul class="ul">
        		<li class="li">
        			<span class="label">用户名:</span>
        			<span class="e_input"><span><input type="text" /></span></span>
        		</li>
        		<li class="li">
        			<span class="label">密码:</span>
        			<span class="e_input"><span><input type="password" /></span></span>
        		</li>
        		<li class="li">
        			<span class="e_tip l_ml">密码长度 6-14 位</span>
        		</li>
        	</ul>
        	<div class="submitPlace"></div>
        	<div class="submit">
        		<button class="e_button-form"><i class="e_ico-search"></i><span>查询</span></button>
        	</div>
        </div>
        
      4. checkbox/radio 组

        • checkbox/radio 组:
        <div class="c_form c_form-col-1">
        	<ul class="ul">
        		<li class="li">
        			<span class="label">check/radio box 组:</span>
        			<div class="c_fn">
        				<ul>
        					<li><label><input type="checkbox" class="e_checkbox" />越狱</label></li>
        				</ul>
        			</div>
        		</li>
        	</ul>
        </div>
        
      5. 表格

        • 表格:
          客户标识 客户姓名 年龄 出生年月 手机号码
          0000230 Sylvester Stallone 66 1946-07 13511223341
          0005458 Jason Statham 40 1972-09 13511223342
          0001472 Jet Li 49 1963-04 13511223343
          0001569 Chuck Norris 72 1940-03 13511223344
          0000246 Bruce Willis 47 1955-03 13511223345
        <div class="c_form c_form-col-1">
        	<ul class="ul">
        		<li class="li">
        			<span class="label">check/radio box 组:</span>
        			<div class="c_table">
        				...
        			</div>
        		</li>
        	</ul>
        </div>
        
      6. 编辑器

        • 编辑器:

        实现方式请参见 页面组件 > 元素 > Editor 编辑器

    7. 纯文字列表

      • 名称: 佐伊·丹斯切尔
      • 更多外文名: Zooey Claire Deschanel
      • 更多中文名: 素儿·克莱儿·达莎妮
      • 性别:
      • 星座: 摩羯座
      • 出生日期: 1980-01-17
      • 出生地: 美国·加利福尼亚州
      • 职业: 演员
      • 名称: 佐伊·丹斯切尔
      • 更多外文名: Zooey Claire Deschanel
      • 更多中文名: 素儿·克莱儿·达莎妮
      • 性别:
      • 星座: 摩羯座
      • 出生日期: 1980-01-17
      • 出生地: 美国·加利福尼亚州
      • 职业: 演员
      <div class="c_form c_form-text">
      	<ul class="ul">
      		<li class="li">
      			<span class="label">提示文字:</span>
      			<span class="text">数据值</span>
      		</li>
      	</ul>
      </div>
      

      【注】不加c_form-text和加上c_form-text的区别在于,前者更加紧凑,所以更适合 “纯” 文字列表。

    8. 插入图片

      • 名称: 佐伊·丹斯切尔
      • 更多外文名: Zooey Claire Deschanel
      • 更多中文名: 素儿·克莱儿·达莎妮
      • 性别:
      • 星座: 摩羯座
      • 出生日期: 1980-01-17
      • 出生地: 美国·加利福尼亚州
      • 职业: 演员
      • Customer name
      • Birthday
      • Modify Date
      • Age
      • Residence address
      • Phone Number
      • Related customers in the expendables
      • Email
      <div class="c_form">
      	<div class="pic">
      		<img src="..." />
      	</div>
      	<div class="content">
      		<ul class="ul">
      			<li class="li">
      				<span class="label">提示文字:</span>
      				<span class="e_input"><span><input type="text" /></span></span>
      			</li>
      		</ul>
      	</div>
      </div>