返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: dw入门 >

jquery使用Transform插件快速美化表单

2020-04-27 文章标签: jquery 插件 表单 浏览次数:

我们继续讲解css教程,今天介绍的是快速美化表单插件,这样不用一行一行的写css代码,极大的节省开发时间。我们看看插件怎么使用

HTML5教程

我们看看效果图

使用jqTransform插件

我们看看代码怎么使用

<!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&nbsp;</option>
            <option value="opt1">2&nbsp;</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>


建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。