Top

表单

以下示例的按钮都可以实时改变色彩，请参考左侧导航详细的按钮调用方法

所有表单元素都可以使用左侧导航的所有class类进行细节样式的调整

(1) 紧凑式表单(使用<button>元素和<input>元素按钮)

a) 如果您想要换行，在label标签上增加样式.dsure-br
b) 如果是控件换行，在label标签上增加样式.dsure-br-controls
c) 如果是控件紧凑排列，在label标签上增加样式.dsure-controls
d) 如果按钮使用了input元素，则在.dsure-c-btn样式基础上叠加.dsure-c-btn-submit样式
e) 如果是换行区块，使用<div class="dsure-br-box"> ... </div>来包裹表单内容 以上样式属性的使用方法通用于下面所有的例子

表单栏目名称: 
 
HTML代码:

<form class="dsure-form" action="#">

   <fieldset>
        <legend>表单栏目名称:</legend>
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>

        <label class="dsure-br"><input required type="text" style="width:285px" tabindex="5" maxlength="15" placeholder="文本框"></label>
        <label class="dsure-br"><input required type="text" style="width:285px" tabindex="6" maxlength="5" placeholder="文本框"></label>
        
        <div class="dsure-br-box">
            <label><input type="text" placeholder="口头禅"></label>
            <label><input type="email" placeholder="电子邮箱"></label>
            <label><input type="password" placeholder="密码"></label>
        </div>
        
        <label><input type="text" placeholder="姓名"></label>
        
        <label class="dsure-controls">
            <input type="checkbox" value=""> 性取向
        </label>
        
        <label class="dsure-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>爱好1</option>
                          <option>爱好2</option>
                    </select>
                </span>
            </span>
        </label>
        
        <label class="dsure-br"><textarea cols="73" rows="5" placeholder="内容"></textarea></label>
        
        <label class="dsure-br-controls">
                <input type="checkbox" value=""> 是否属于人类?
        </label>
        <label class="dsure-br-controls">
        
            <label>
                <input type="radio" name="demo-radio" value="option1" checked> 男
            </label>
            
            <label>
                <input type="radio" name="demo-radio" value="option2"> 女
            </label>
            
        </label>
        
        <label class="dsure-br-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>我的故乡？</option>
                          <option>我最喜欢的动漫是？</option>
                    </select>
                </span>
            </span>
        </label>
        
        <label class="dsure-br-controls">
            <label class="dsure-br">
                <input type="radio" name="demo-radio2" value="option1" checked> 选择我你就惨了
            </label>
            
            <label class="dsure-br">
                <input type="radio" name="demo-radio2" value="option2"> 不选择我你更惨
            </label>
            
        </label>

        <div class="ma-t20">
           <button type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue">Button元素按钮</button>
           <button type="reset" class="dsure-c-btn dsure-bg-silver">取消</button>
           <input type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue dsure-c-btn-submit" value="Input元素按钮">
        </div>
        
   </fieldset>
        
</form>

(2) 单行式表单

注意：超链接按钮<a>...</a>大小是固定的，不随表单内字体的大小改变而改变

无圆角按钮 
 
HTML代码:

<form class="dsure-form" action="#">

    <fieldset>
        <label><input type="text" placeholder="网站名称"></label>
        <label><input type="text" placeholder="http://"></label>
        <a class="dsure-i-btn dsure-i-btn-blue" href="#"><span class="dsure-i-btn-inner">超链接式按钮</span></a>
        
    </fieldset>

</form>

(3) 扩展字体大小的表单

如果您想要扩展表单的大小，只要在.dsure-form样式后叠加相应的字体大小样式，属性为font-size
下面的例子是直接叠加左侧导航 内的样式 

 
HTML代码:

<form class="dsure-form f18" action="#">

        <label class="dsure-br"><input type="text" placeholder="姓名"></label>
        <label class="dsure-br"><input type="email" placeholder="电子邮箱"></label>
        <label class="dsure-br-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>我的故乡？</option>
                          <option>我最喜欢的动漫是？</option>
                    </select>
                </span>
            </span>
        </label>
        
        <div class="clear"></div>

       <button type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue">Button元素按钮</button>


</form>

(4) 带Label右对齐文字的行式表单

默认文字居右对齐 

 
HTML代码:

<form class="dsure-form" action="#">

        <div class="dsure-div">
            <label class="dsure-text">用户名</label><input type="text" size="30" value="">
        </div>
        <div class="dsure-div">
            <label class="dsure-text">密码</label><input type="password" size="30" value="">
        </div>
        
        <div class="dsure-div-controls">
            <label>
                <input type="checkbox" value=""> 是否属于人类?
            </label>
        </div>
        <div class="dsure-div-controls">
            <label>
                <input type="radio" name="demo-radio" value="option1" checked> 男
            </label>
            
            <label>
                <input type="radio" name="demo-radio" value="option2"> 女
            </label>
            
        </div>  
                            

        <div class="dsure-div-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>我的故乡？</option>
                          <option>我最喜欢的动漫是？</option>
                    </select>
                </span>
            </span>
        </div>
        
        <div class="dsure-div-controls">
            <label class="dsure-br">
                <input type="radio" name="demo-radio2" value="option1" checked> 选择我你就惨了
            </label>
            
            <label class="dsure-br">
                <input type="radio" name="demo-radio2" value="option2"> 不选择我你更惨
            </label>
            
        </div>  
        

        <div class="dsure-div-controls">
             <button type="submit" class="dsure-c-btn dsure-c-btn-big dsure-btn-t-white dsure-bg-blue font-weight-blod">提 交</button>

        </div>

</form>

(5) 带Label左对齐文字+下拉+小型按钮的行式表单

如果想要文字居左对齐，在.dsure-text样式后叠加样式.dsure-text-left即可 

 
HTML代码:

<form class="dsure-form" action="#">

        <div class="dsure-div">
            <label class="dsure-text dsure-text-left">用户名</label><input class="ma-l5" type="text" size="30" value="">
        </div>
        <div class="dsure-div">
            <label class="dsure-text dsure-text-left">密码</label><input class="ma-l5" type="password" size="30" value="">
        </div>
        
        <div class="dsure-div ma-t10">
            <label class="dsure-text dsure-text-left">回答问题</label>
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>我的故乡？</option>
                          <option>我最喜欢的动漫是？</option>
                    </select>
                </span>
            </span>
        </div>              

        

        <div class="dsure-div-controls pa-l5">
             <button type="submit" class="dsure-c-btn dsure-c-btn-small dsure-btn-t-white dsure-bg-blue">提 交</button>
             
             <button type="reset" class="dsure-c-btn dsure-c-btn-small dsure-bg-silver">清 空</button>

        </div>

</form>

(6) 带Label文字的重叠式表单

 
HTML代码:

<form class="dsure-form" action="#">

        
            <label class="dsure-br">用户名</label>
            <label class="dsure-br"><input type="text" size="30" value=""></label>
            
            <label class="dsure-br">密码</label>
            <label class="dsure-br"><input type="password" size="30" value=""></label>

            <label class="dsure-br">选择问题</label>
            <label class="dsure-br">   
                <span class="dsure-selectBox">
                    <span class="dsure-selectBox-inner">
                        <select>
                              <option>我的故乡？</option>
                              <option>我最喜欢的动漫是？</option>
                        </select>
                    </span>
                </span>
            </label>

 
            <button type="submit" class="dsure-c-btn dsure-c-btn-medium dsure-btn-t-white dsure-bg-blue font-weight-blod">提 交</button>


</form>

(7) 状态表单

a) 文本框/域禁用，可使用.disabled样式兼容所有浏览器和赋予动态样式
b) 文本框/域只可读不可写，可使用.readonly样式兼容所有浏览器和赋予动态样式
c) 按钮禁用，在.dsure-c-btn样式的基础上叠加样式.dsure-c-btn-disabled 

 
HTML代码:

<form class="dsure-form" action="#">

        <label class="dsure-br"><input class="disabled" type="text" size="30" value="禁用输入框" disabled></label>
        <label class="dsure-br"><input class="readonly" type="text" size="30" value="只可读不可写" readonly></label>
        <button type="submit" class="dsure-c-btn dsure-c-btn-disabled dsure-bg-gray" disabled>提 交</button>

</form>

(8) 100%宽度自适应表单

在.dsure-form样式的基础上叠加样式.dsure-form-full-width即可实现100%宽度表单 

 
HTML代码:

<form class="dsure-form dsure-form-full-width" action="#">

        <label><input type="text"></label>
        <label><input type="text"></label>
        <label><textarea cols="73" rows="5"></textarea></label>
        <label class="dsure-br-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>我的故乡？</option>
                          <option>我最喜欢的动漫是？</option>
                    </select>
                </span>
            </span>
        </label>
        
        <button type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue">Button元素按钮</button>
        
</form>

(9) 图标组合表单

 
HTML代码:

<form class="dsure-form f20" action="#">
        <label class="dsure-icon-txt dsure-icon-txt-bg"><i class="dsure-icon dsure-icon-search"></i><input type="text"></label>
</form> 
 

<form class="dsure-form" action="#">
        <label class="dsure-icon-txt dsure-icon-txt-bg"><i class="dsure-icon dsure-icon-search"></i><input type="text"></label>
</form> 


<form class="dsure-form" action="#">
        <label class="dsure-icon-txt"><i class="dsure-icon dsure-icon-users2"></i><input type="text"></label>
        <label class="dsure-icon-txt"><i class="dsure-icon dsure-icon-lock"></i><input type="text"></label>
        <button type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue"><i class="dsure-icon dsure-icon-forward"></i> 提交</button>       
</form> 


<form class="dsure-form f25" action="#">
        <label class="dsure-icon-txt"><i class="dsure-icon dsure-icon-users2"></i><input type="text"></label>
        <label class="dsure-icon-txt"><i class="dsure-icon dsure-icon-lock"></i><input type="text"></label>
        <button type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue"><i class="dsure-icon dsure-icon-forward"></i> 提交</button>       
</form>

(10) 无圆角效果的表单

在需要的地方叠加.dsure-radius-none样式即可 

 
HTML代码:

<form class="dsure-form dsure-radius-none" action="#">

        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
       
</form>

(11) 无阴影效果的表单

在需要的地方叠加.dsure-b-shadow-none样式即可

注意：IE9以下(且不能开启兼容模式)本身无阴影效果 

 
HTML代码:

<form class="dsure-form dsure-b-shadow-none" action="#">

        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label>
       
</form>

(12) 其它圆角效果的表单

在需要的地方叠加.dsure-radius-small、.dsure-radius-medium、.dsure-radius-big样式即可
注意：IE9以下(且不能开启兼容模式)无效

注意：IE9以下(且不能开启兼容模式)无效 

 
HTML代码:

<form class="dsure-form dsure-radius-small" action="#">
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label> 
</form>

<form class="dsure-form dsure-radius-medium" action="#">
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label> 
</form>

<form class="dsure-form dsure-radius-big" action="#">
        <label><input type="text" placeholder="文本框"></label>
        <label><input type="text" placeholder="文本框"></label> 
</form>