フォームを簡単に装飾できるjQueryプラグイン

checkboxやradioボタンなどを簡単に装飾できます。

デモ
ダウンロード

HTML：headでjQueryやCSSを読み込む

<head>
    <link type="text/css" rel="stylesheet" href="jquery.formdesigner.css" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery.formdesigner-1.0.0-min.js"></script>
</head>

HTML：フォーム部分はこんな感じ

<form class="formDesigner formDesignerSkip" action="" method="post">
    
    <select name="myTestBox_1" class="myCustomClass">
        <option value="">please choose</option>
        <option value="1">test 1</option>
        <option value="2">test 2</option>
        <option value="3">test 3</option>
    </select>
    <br /><br />
    
    
    <input id="inputRadio_1" class="myCustomClassForRadio" type="radio" name="myTestBox_3" value="1" /> 
    <label for="inputRadio_1">Radio Button 1</label>
    
    <input id="inputRadio_2" class="myCustomClassForRadio" type="radio" name="myTestBox_3" value="2" /> 
    <label for="inputRadio_2">Radio Button 2</label>
    
    <input id="inputRadio_3" class="myCustomClassForRadio" type="radio" name="myTestBox_3" value="3" /> 
    <label for="inputRadio_3">Radio Button 3</label>
    <br /><br />


    <input id="inputCheckbox_1" class="myCustomClassForCheckbox" type="checkbox" name="myTestBox_5" value="1" /> 
    <label for="inputCheckbox_1">Checkbox 1</label>
    
    <input id="inputCheckbox_2" class="myCustomClassForCheckbox" type="checkbox" name="myTestBox_5" value="2" /> 
    <label for="inputCheckbox_2">Checkbox 2</label>
    
    <input id="inputCheckbox_3" class="myCustomClassForCheckbox" type="checkbox" name="myTestBox_5" value="3" /> 
    <label for="inputCheckbox_3">Checkbox 3</label>
    <br /><br />
    
    
    <label for="inputText_1">Input Textfield 1</label>
    <input id="inputText_1" class="myCustomClassForInput" type="text" name="myTestBox_7" value="" maxlength="255" />
    <br /><br />
    
    
    <label for="textarea_1">Textarea</label>
    <textarea id="textarea_1" class="myCustomClassForTextarea" name="myTestBox_9" cols="50" rows="10"></textarea>
    <br /><br />
    
    <input type="submit" name="submitFormSubmit" value="Submit">
        
</form>
<script type="text/javascript">
/* <![CDATA[ */
    jQuery(document).ready(function(){
        jQuery(".formDesigner").formDesigner();
    });
/* ]]> */
</script>

PiroQuery

東京のフリーエンジニアPiroのjQueryプラグインまとめブログです。

フォームを簡単に装飾できるjQueryプラグイン