我创建了一个页面,其中有一个包含公司员工列表的表格,我实现了一个按钮,如果单击该按钮,它会弹出一个表单,其中包含一些关于新员工个人信息的问题,例如首先姓名、姓氏、出生日期等。我想将模态制作为三步形式,如下图所示。我想将此表单显示为弹出窗口,这就是为什么我的第一个解决方案是实现模式。
我已经有了所有的图像,比如图中显示的带圆圈的数字,但由于我是使用 Bootstrap 的初学者,是否有任何可能的解决方案来使用模态实现这 3 步表单,或者更有效的方法实现这个而不是模态的方式?
最佳答案
你看到这个了吗https://codepen.io/designify-me/pen/qrJWpG ?
<!-- MultiStep Form -->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Personal Details</li>
<li>Social Profiles</li>
<li>Account Setup</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">Tell us something more about you</h3>
<input type="text" name="fname" placeholder="First Name"/>
<input type="text" name="lname" placeholder="Last Name"/>
<input type="text" name="phone" placeholder="Phone"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
<input type="text" name="twitter" placeholder="Twitter"/>
<input type="text" name="facebook" placeholder="Facebook"/>
<input type="text" name="gplus" placeholder="Google Plus"/>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">Fill in your credentials</h3>
<input type="text" name="email" placeholder="Email"/>
<input type="password" name="pass" placeholder="Password"/>
<input type="password" name="cpass" placeholder="Confirm Password"/>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="submit" name="submit" class="submit action-button" value="Submit"/>
</fieldset>
</form>
<!-- link to designify.me code snippets -->
<div class="dme_link">
<p><a href="http://designify.me/code-snippets-js/" target="_blank">More Code Snippets</a></p>
</div>
<!-- /.link to designify.me code snippets -->
</div>
</div>
<!-- /.MultiStep Form -->
关于html - 如何在 Bootstrap 上使用模态创建多页表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59134915/