我没有使用表单提交答案,所以“required”命令不起作用。相反,在用户按下按钮之后,我将答案保存在一个变量中以便稍后显示。
<!-- First Question = 1 -->
<section class="container-fluid section" id="1" style="display: block;">
<div class="row">
<div class="col-12 top">
<span id="back-btn" class="question-previous badge badge-pill badge-dark" onclick="back0()">Voltar</span>
<span class="question-progress">1/15</span>
<a href="#"><h1 class="logo">norun</h1></a>
</div>
<div class="col-12 question-title">
<h2>Nome da empresa</h2>
</div>
<div class="col-12 question-input">
<input autofocus type="text" id="answer1" class="input-field">
</div>
<div class="col-12 submit-button">
<button onclick="next1();" type="button" class="btn"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</section>
<!-- Second Question = 2 -->
<section class="container-fluid section" id="2" style="display: none;">
<div class="row">
<div class="col-12 top">
<span class="question-previous badge badge-pill badge-dark" onclick="back1()">Voltar</span>
<span class="question-progress">2/15</span>
<a href="#"><h1 class="logo">norun</h1></a>
</div>
<div class="col-12 question-title">
<h2>Ramo de atuação</h2>
</div>
<div class="col-12 question-input">
<input type="text" id="answer2" class="input-field">
</div>
<div class="col-12 submit-button">
<button onclick="next2();" type="button" class="btn"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</section>
您可以通过添加一个在结尾处带有onsubmit值并返回false的表单来归档相同的内容:
<section class="container-fluid section" id="1" style="display: block;">
<form onsubmit="next1(); return false">
<div class="row">
<div class="col-12 top">
<span id="back-btn" class="question-previous badge badge-pill badge-dark" onclick="back0()">Voltar</span>
<span class="question-progress">1/15</span>
<a href="#"><h1 class="logo">norun</h1></a>
</div>
<div class="col-12 question-title">
<h2>Nome da empresa</h2>
</div>
<div class="col-12 question-input">
<input autofocus type="text" id="answer1" class="input-field">
</div>
<div class="col-12 submit-button">
<input type="submit" type="button" class="btn"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</form>
</section>
这样做还有一个好处,即用户可以使用标准表单功能,如箭头和tab键等