返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: html教程 >

使用formToWizard插件

2020-05-07 文章标签: 表单 插件 浏览次数:

我们讲解下使用formToWizard的使用,什么是formToWizard,简单介绍下就是在我们登录啊,注册的时候,第一步,第二步,第三步的时候会遇到。而不是跳转到3个页面的做法。

HTML5教程

我们看看效果图,使用方式我们在需要的节点上填写fieldset属性就可以了,就把一个完整的表单分成了3步

formToWizard

填写step1,step2,step3

使用formToWizard插件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>formToWizard</title>
<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/507/formToWizard.js"></script>
<script type="text/javascript">
$(function(){
$("#form1").formToWizard({ submitButton: 'SaveAccount' })
})
</script>
<style type="text/css">
#wrap { margin:1em 4em; font-size:12px; padding:1em 1em; border:solid 1px #fff; }
fieldset { border:none; width:320px; }
legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold; }
label { display:block; margin:15px 0 5px; }
input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000; }
.prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none; }
.prev:hover, .next:hover { background-color:#000; text-decoration:none; }
.prev { float:left; }
.next { float:right; }
#steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px; }
#steps li { font-size:24px; float:left; padding:10px; color:#b0b1b3; }
#steps li span { font-size:11px; display:block; }
#steps li.current { color:#000; }
#makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px; }
#makeWizard:hover { background-color:#000; }
</style>
</head>
<body>
<h1>formToWizard表单填充向导</h1>
<div id="wrap">
    <form id="form1" action="">
        <fieldset>
            <legend>登录信息</legend>
            <label for="Name">昵称</label>
            <input id="Name" type="text" />
            <label for="Email">Email</label>
            <input id="Email" type="text" />
            <label for="Password">密码</label>
            <input id="Password" type="password" />
        </fieldset>
        <fieldset>
            <legend>公司信息</legend>
            <label for="CompanyName">公司名称</label>
            <input id="CompanyName" type="text" />
            <label for="Website">公司网址</label>
            <input id="Website" type="text" />
            <label for="CompanyEmail">公司邮箱</label>
            <input id="CompanyEmail" type="text" />
        </fieldset>
        <fieldset>
            <legend>个人信息</legend>
            <label for="NameOnCard">真实姓名</label>
            <input id="NameOnCard" type="text" />
            <label for="CardNumber">身份证号</label>
            <input id="CardNumber" type="text" />
            <label for="CreditcardMonth">发卡日期</label>
            <select id="CreditcardMonth">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
            <select id="CreditcardYear">
                <option value="2009">2009</option>
                <option value="2010">2010</option>
                <option value="2011">2011</option>
            </select>
            <label for="Address1">地址1</label>
            <input id="Address1" type="text" />
            <label for="Address2">地址2</label>
            <input id="Address2" type="text" />
            <label for="City">城市</label>
            <input id="City" type="text" />
            <label for="Country">国家</label>
            <select id="Country">
                <option value="CA">Canada</option>
                <option value="US">United States of America</option>
                <option value="GB">United Kingdom (Great Britain)</option>
                <option value="AU">Australia</option>
                <option value="JP">Japan</option>
            </select>
        </fieldset>
        <div>
            <input id="SaveAccount" type="button" value="提交表单" />
        </div>
    </form>
</div>
</body>
</html>



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

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