Top

Forms

Use any of the available classes of Base Stylesheets to quickly create a custom style.

(1) Style 1

Form title: 
 
HTML Code:

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

   <fieldset>
        <legend>Form title:</legend>
        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>

        <label class="dsure-br"><input required type="text" style="width:285px" tabindex="5" maxlength="15" placeholder="text"></label>
        <label class="dsure-br"><input required type="text" style="width:285px" tabindex="6" maxlength="5" placeholder="text"></label>
        
        <div class="dsure-br-box">
            <label><input type="text" placeholder="tagline"></label>
            <label><input type="email" placeholder="email"></label>
            <label><input type="password" placeholder="password"></label>
        </div>
        
        <label><input type="text" placeholder="name"></label>
        
        <label class="dsure-controls">
            <input type="checkbox" value=""> sex
        </label>
        
        <label class="dsure-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>Job 1</option>
                          <option>Job 2</option>
                    </select>
                </span>
            </span>
        </label>
        
        <label class="dsure-br"><textarea cols="73" rows="5" placeholder="content"></textarea></label>
        
        <label class="dsure-br-controls">
                <input type="checkbox" value=""> Are you ready?
        </label>
        <label class="dsure-br-controls">
        
            <label>
                <input type="radio" ="demo-radio" value="option1" checked> boy
            </label>
            
            <label>
                <input type="radio" ="demo-radio" value="option2"> girl
            </label>
            
        </label>
        
        <label class="dsure-br-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>My name is？</option>
                          <option>What is my lover？</option>
                    </select>
                </span>
            </span>
        </label>
        
        <label class="dsure-br-controls">
            <label class="dsure-br">
                <input type="radio" ="demo-radio2" value="option1" checked> Option 1
            </label>
            
            <label class="dsure-br">
                <input type="radio" ="demo-radio2" value="option2"> Option 2
            </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">cancel</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) Style 2

Button 
 
HTML Code:

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

    <fieldset>
        <label><input type="text" placeholder="Site Name"></label>
        <label><input type="text" placeholder="http://"></label>
        <a class="dsure-i-btn dsure-i-btn-blue" href="#"><span class="dsure-i-btn-inner">Button</span></a>
        
    </fieldset>

</form>

(3) Style 3

Utilize the.f??? class to change text sizes. 

 
HTML Code:

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

        <label class="dsure-br"><input type="text" placeholder="name"></label>
        <label class="dsure-br"><input type="email" placeholder="email"></label>
        <label class="dsure-br-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>My name is？</option>
                          <option>What is my lover？</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) Style 4

The label text for right-alignment by default. 

 
HTML Code:

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

        <div class="dsure-div">
            <label class="dsure-text">username</label><input type="text" size="30" value="">
        </div>
        <div class="dsure-div">
            <label class="dsure-text">password</label><input type="password" size="30" value="">
        </div>
        
        <div class="dsure-div-controls">
            <label>
                <input type="checkbox" value=""> Are you ready?
            </label>
        </div>
        <div class="dsure-div-controls">
            <label>
                <input type="radio" ="demo-radio" value="option1" checked> boy
            </label>
            
            <label>
                <input type="radio" ="demo-radio" value="option2"> girl
            </label>
            
        </div>  
                            

        <div class="dsure-div-controls">
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>My name is？</option>
                          <option>What is my lover？</option>
                    </select>
                </span>
            </span>
        </div>
        
        <div class="dsure-div-controls">
            <label class="dsure-br">
                <input type="radio" ="demo-radio2" value="option1" checked> Option 1
            </label>
            
            <label class="dsure-br">
                <input type="radio" ="demo-radio2" value="option2"> Option 2
            </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">Submit</button>

        </div>

</form>

(5) Style 5

Utilize the .dsure-text-left class to change align method. 

 
HTML Code:

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

        <div class="dsure-div">
            <label class="dsure-text dsure-text-left">username</label><input class="ma-l5" type="text" size="30" value="">
        </div>
        <div class="dsure-div">
            <label class="dsure-text dsure-text-left">password</label><input class="ma-l5" type="password" size="30" value="">
        </div>
        
        <div class="dsure-div ma-t10">
            <label class="dsure-text dsure-text-left">Question</label>
            <span class="dsure-selectBox">
                <span class="dsure-selectBox-inner">
                    <select>
                          <option>My name is？</option>
                          <option>What is my lover？</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">Submit</button>
             
             <button type="reset" class="dsure-c-btn dsure-c-btn-small dsure-bg-silver">Clear</button>

        </div>

</form>

(6) Style 6

 
HTML Code:

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

        
            <label class="dsure-br">username</label>
            <label class="dsure-br"><input type="text" size="30" value=""></label>
            
            <label class="dsure-br">password</label>
            <label class="dsure-br"><input type="password" size="30" value=""></label>

            <label class="dsure-br">Question</label>
            <label class="dsure-br">   
                <span class="dsure-selectBox">
                    <span class="dsure-selectBox-inner">
                        <select>
                              <option>My name is？</option>
                              <option>What is my lover？</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">Submit</button>


</form>

(7) Style 7

 
HTML Code:

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

        <label class="dsure-br"><input class="disabled" type="text" size="30" value="text" disabled></label>
        <label class="dsure-br"><input class="readonly" type="text" size="30" value="text" readonly></label>
        <button type="submit" class="dsure-c-btn dsure-c-btn-disabled dsure-bg-gray" disabled>Submit</button>

</form>

(8) Style 8

Utilize the.dsure-form-full-width class. 

 
HTML Code:

<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>My name is？</option>
                          <option>What is my lover？</option>
                    </select>
                </span>
            </span>
        </label>
        
        <button type="submit" class="dsure-c-btn dsure-btn-t-white dsure-bg-blue">Button</button>
        
</form>

(9) Style 9

 
HTML Code:

<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> submit</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> submit</button>       
</form>

(10) Style 10

Utilize the.dsure-radius-none class. 

 
HTML Code:

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

        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
       
</form>

(11) Style 11

Utilize the.dsure-b-shadow-none class. (Only supports up to IE 9.) 

 
HTML Code:

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

        <label><input type="text" placeholder="text"></label>
        <label><input type="text" placeholder="text"></label>
       
</form>

(12) Style 12

Utilize the .dsure-radius-small, .dsure-radius-medium or .dsure-radius-big class. (Only supports up to IE 9.) 

 
HTML Code:

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

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

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