jQuery簡單的表單美化，制作input輸入框，select下拉框，復(fù)選框，單選框表單美化實例代碼。
使用方法：
1、head引入css文件
<link type="text/css" href="css/style.css" rel="stylesheet" />
2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script language="javascript">
$(function(){
function test(func){
var start = new Date().getTime();
func();
var end = new Date().getTime();
return (end - start)+"ms";
}
$('.form').inform();
});
</script>
3、body引入HTML代碼
<div class="form">
<form action="" method="get">
<div class="item">
<span>用戶名：</span>
<label><input type="text" name="username" value="test" class="width" placeholder="用戶名" /></label>
</div>
<div class="item">
<span>密 碼：</span>
<label><input type="password" name="password" placeholder="密 碼" /></label>
</div>
<div class="item">
<span>性 別：</span>
<label><input type="radio" checked name="gender" value="1"/>男</label>
<label><input type="radio" name="gender" value="2"/>女</label>
<label><input type="radio" name="gender" value="0" disabled />人妖</label>
</div>
<div class="item">
<span>學(xué) 歷：</span>
<label>
<select name="edu" data-ratio="true">
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
<option value="2">?？?lt;/option>
<option value="1">高中</option>
<option value="0">初中</option>
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
<option value="2">專科</option>
<option value="1">高中</option>
<option value="0">初中</option>
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
<option value="2">?？?lt;/option>
<option value="1">高中</option>
<option value="0">初中</option>
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
<option value="2">?？?lt;/option>
<option value="1">高中</option>
<option value="0">初中</option>
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
<option value="2">?？?lt;/option>
<option value="1">高中</option>
<option value="0">初中</option>
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
<option value="2">?？?lt;/option>
<option value="1">高中</option>
<option value="0">初中</option>
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
<option value="2">?？?lt;/option>
<option value="1">高中</option>
<option value="0">初中</option>
</select>
</label>
</div>
<div class="item">
<span>學(xué) 歷：</span>
<label>
<select name="edu" data-ratio="true">
<optgroup label="高學(xué)歷">
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
</optgroup>
<option value="2">?？?lt;/option>
<option value="1">高中</option>
<option value="0">初中</option>
</select>
</label>
</div>
<div class="item">
<span>學(xué) 歷：</span>
<label>
<select name="edu" data-ratio="true">
<optgroup label="高學(xué)歷">
<option value="5">博士后</option>
<option value="4">研究生</option>
<option value="3">本科</option>
</optgroup>
<option value="2">?？?lt;/option>
<option value="1">高中</option>
<option value="0">初中</option>
</select>
</label>
</div>
<div class="item">
<span>愛 好：</span>
<label><input type="checkbox" data-checked="full" id="c1" name="like" value="1"/>籃球</label>
<label><input type="checkbox" checked name="like" value="2"/>足球</label>
<label><input type="checkbox" name="like" value="3"/>游泳</label>
<label><input type="checkbox" name="like" value="4" checked />動漫</label>
</div>
<div class="item">
<span>備 注：</span>
<label><textarea name="message" class="width" placeholder="備注"></textarea></label>
</div>
<div class="item">
<span></span>
<label><button type="submit">提交</button></label>
<label><button type="reset">重置</button></label>
</div>
</form>
</div>
