美化之前

美化之后

使用步骤

引入必要js和css文件

<!-- 引进必要文件 -->
<link rel="stylesheet" type="text/css" href="jqtransformplugin/jqtransform.css"  media="all">
<script type="text/javascript" src="requiered/jquery.js"></script>
<script type="text/javascript" src="jqtransformplugin/jquery.jqtransform.js"></script>

编写HTML表单代码

<form id="jqtransform" >
        
    <div class="rowElem"><label>文本：</label><input type="text"></input></div>
        
    <div class="rowElem"><label>密码：</label><input type="password"></input></div>
        
    <div class="rowElem">
        <label>单选：</label>
        <input type="radio" name="radio">
        <label>A </label>
        <input type="radio" name="radio">
        <label>B</label>
    </div>
    
    <div class="rowElem">
        <label>下拉：</label>
        <select name="select">
            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
    <div class="rowElem">
        <label>多选：</label>
        <input type="checkbox" name="1" /><label>A</label>
        <input type="checkbox" name="2" /><label>B</label>
        <input type="checkbox" name="3" /><label>C</label> 
    </div>
    <div class="rowElem">
        <label>多行文本：</label>
        <textarea cols="25" rows="5" name="mytext"> </textarea>
    </div>
        

    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
</form>

调用jqtransformp插件

$(function() {
    $('form').jqTransform({imgPath:'jqtransformplugin/img/'});
})