我们继续讲解css教程，今天介绍的是快速美化表单插件，这样不用一行一行的写css代码，极大的节省开发时间。我们看看插件怎么使用
我们看看效果图
我们看看代码怎么使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jqTransform</title>
<link href="//freemuban.com/js/427/plugins/jqtransform.css" rel="stylesheet" type="text/css" media="all" />
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/427/plugins/jquery.jqtransform.js"></script>
<script type="text/javascript">
$(function(){
$("form").jqTransform();
})
</script>
<style type="text/css">
form { background:#fff; }
</style>
</head>
<body>
<h1>jqTransform表单样式</h1>
<form action="" method="POST" class="p1">
<div class="rowElem">
<label>姓名:</label>
<input type="text" name="inputtext"/>
</div>
<div class="rowElem">
<label>密码:</label>
<input type="password" />
</div>
<div class="rowElem">
<label>是否同意: </label>
<input type="checkbox" name="chbox" id="">
</div>
<div class="rowElem">
<label>性别:</label>
<input type="radio" id="" name="question" value="oui" checked >
<label>男</label>
<input type="radio" id="" name="question" value="non" >
<label>女</label>
</div>
<div class="rowElem">
<label>回执 :</label>
<textarea cols="40" rows="12"></textarea>
</div>
<div class="rowElem">
<label>级别 :</label>
<select name="select">
<option value="">1 </option>
<option value="opt1">2 </option>
</select>
</div>
<div class="rowElem">
<label>月下独酌 :</label>
<select name="select2" >
<option value="opt1">花间一壶酒，独酌无相亲。</option>
<option value="opt2">举杯邀明月，对影成三人。</option>
<option value="opt1">月既不解饮，影徒随我身。</option>
<option value="opt2">暂伴月将影，行乐须及春。 </option>
</select>
</div>
<div class="rowElem">
<input type="submit" value="提 交" />
<input type="reset" value="重 设" />
<input type="button" value="确 认" />
</div>
</form>
</body>
</html>
