【发布时间】：2015-03-14 18:23:25
【问题描述】：
谁能告诉我如何在fuelUX 向导中使用表单标签？ 我正在执行以下操作：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../../style/sb-admin-2.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../../style/ladda-themeless.min.css">
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.5.0/css/fuelux.min.css">
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//www.fuelcdn.com/fuelux/3.5.0/js/fuelux.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<i class="fa fa-user fa-2x"></i> Registration Form
</div>
<div class="panel-body">
<div class="fuelux">
<div class="wizard" data-initialize="wizard" id="registerWizard">
<ul style="margin-left: 0" class="steps">
<li data-step="1" class="active"><span class="badge badge-info">1</span>Personal Details<span class="chevron"></span>
</li>
<li data-step="2"><span class="badge">2</span>Work Section Information
<span class="chevron"></span>
</li>
<li data-step="3"><span class="badge">3</span>Verify All The Details<span class="chevron"></span>
</li>
</ul>
<div class="actions">
<button disabled="disabled" class="btn btn-default btn-prev">
<span class="fa fa-arrow-left"></span> Prev
</button>
<button class="btn btn-default btn-next" data-last="Done !">
Next <span class="fa fa-arrow-right"></span>
</button>
</div>
<!-- ./End actions -->
<div class="step-content">
<div class="step-pane sample-pane alert active" data-step="1">
<h4>Personal Information</h4>
<hr>
<form role="form" method="post" action="" id="personalInfoForm" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4" for="email">Full Name:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="fullname" placeholder="Enter Full Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="email">Email:</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="pwd">Mobile No:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="mid" placeholder="Enter Mobile Number">
</div>
</div>
</form>
</div>
<div class="step-pane sample-pane bg-info alert" data-step="2">
<h4>Work Section Information</h4>
<p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p>
</div>
<div class="step-pane sample-pane bg-danger alert" data-step="3">
<h4>Verify All The Details</h4>
<p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki
bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jÃcama salsify.</p>
</div>
</div>
<!-- ./End Step-content -->
</div>
<!-- ./End wizard -->
</div>
<!-- ./ End fuelux -->
<script type="text/javascript">
$("#registerWizard").wizard();
</script>
</div>
<div class="panel-footer">
<button id="register" class="btn btn-lg btn-success ladda-button" data-style="expand-right">
<span class="ladda-label"><i class="fa fa-check"></i>
Register !</span> <span class="ladda-spinner"></span> <span class="ladda-spinner"></span>
<div class="ladda-progress progress-bar" style="width: 105px;"></div>
</button>
<script type="text/javascript" src="../../js/ladda.spin.min.js"></script>
<script type="text/javascript" src="../../js/ladda.js"></script>
<script type="text/javascript">
Ladda.bind('.ladda-button', {
timeout: 2000
});
var laddaLoadingButton = Ladda.create(document
.querySelector("#register"));
$.ajax({
// some config
beforeSend: $("#register").click(
function() {
// When before sending the request, make the button loading
laddaLoadingButton.start();
laddaLoadingButton.setProgress(0);
var progress = 0;
var interval = setInterval(function() {
progress = Math.min(progress + Math.random() * 0.1, 1);
laddaLoadingButton
.setProgress(progress);
if (progress === 1) {
laddaLoadingButton.stop();
clearInterval(interval);
}
}, 200);
}),
success: function() {
// When complete the request, make the button stop
laddaLoadingButton.setProgress(1);
laddaLoadingButton.stop();
}
});
</script>
</div>
</div>
</div>
</div>
</body>
</html>每当我在 div 的开头包含标签并在 div 的结尾包含表单标签时，我都无法导航到下一步。我的猜测是，当我点击下一个按钮时，表单会被提交并重新加载页面。我试图通过在按钮上编写 JS 代码来解决这个问题。但这不符合我的目的。谁能帮我解决这个问题？我希望能够在向导中导航，同时能够捕获表单中的用户信息。我应该使用多种形式吗？还是只有一种形式可以解决我的问题？请帮忙。
【问题讨论】：
标签： html forms twitter-bootstrap wizard fuelux