マルチステップフォームは、フォームが大きく、多くのコントロールがある場合に適しています。モバイルデバイス上の非常に長いフォームをスクロールしたい人はいません。画面ごとにコントロールをグループ化することにより、長く複雑なフォームに記入する経験を向上させることができます。
しかし、最後にマルチステップフォームを開発したのはいつですか？それはあなたにとっても楽しく聞こえますか？考えるべきことがたくさんあり、管理する必要がある非常に多くの感動的な作品があるので、フォームライブラリや、すべてを処理するフォームウィジェットに頼ることであなたを責めることはありません。しかし、手作業でそれを行うことは、良い運動であり、基本を磨くための素晴らしい方法です。最初のマルチステップフォームをどのように作成したかを紹介します。それがどれほど親しみやすいかを見るだけでなく、私の仕事をさらに良くするために領域を見つけられることを願っています。
一緒に構造を通り抜けます。私たちの多くは、私たちの多くが最近の日に関係することができると思います。最初にベースラインHTML、CSS、およびJavaScriptを足場にし、次にアクセシビリティと検証に関する考慮事項を検討します。途中で参照したい場合は、最終コード用のGitHubリポジトリを作成しました。
サンプルコードを取得しますマルチステップフォームの構造
求人申請書には4つのセクションがありますが、最後には要約ビューがあり、ユーザーが提出する前にすべての回答を表示します。これを達成するために、HTMLを4つのセクションに分割します。各セクションはIDで識別され、ページの下部にナビゲーションを追加します。次のセクションでそのベースラインHTMLをお伝えします。
ロジックにもっと焦点を当てますが、最後にコードスニペットと完全なコードへのリンクを提供します。
ページを保持するフォルダーを作成することから始めましょう。次に、index.htmlファイルを作成し、次のことを貼り付けます。
コードを見ると、3つのセクションとナビゲーショングループが表示されます。セクションにはフォーム入力が含まれており、ネイティブフォームの検証はありません。これは、ネイティブフォームの検証が[送信]ボタンをクリックするとトリガーされるため、エラーメッセージの表示をより適切に制御できるようにするためです。
次に、styles.cssファイルを作成して、それに貼り付けます：
<form >
<section >
<div >
<div >
<label for="name">Name <span style="color: red;">*</span></label>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div >
<label for="idNum">ID number <span style="color: red;">*</span></label>
<input type="number" name="idNum" placeholder="Enter your ID number">
</div>
</div>
<div >
<div >
<label for="email">Email <span style="color: red;">*</span></label>
<input type="email" name="email" placeholder="Enter your email">
</div>
<div >
<label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
<input type="date" name="birthdate" max="2006-10-01" min="1924-01-01">
</div>
</div>
</section>
<section >
<div >
<label for="document">Upload CV <span style="color: red;">*</span></label>
<input type="file" name="document" >
</div>
<div >
<label for="department">Department <span style="color: red;">*</span></label>
<select name="department">
<option value="">Select a department</option>
<option value="hr">Human Resources</option>
<option value="it">Information Technology</option>
<option value="finance">Finance</option>
</select>
</div>
</section>
<section >
<div >
<label for="skills">Skills (Optional)</label>
<textarea name="skills" rows="4" placeholder="Enter your skills"></textarea>
</div>
<div >
<input type="checkbox" name="terms" >
<label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
</div>
<button type="submit">Confirm and Submit</button>
</section>
<div >
<button type="button" >Previous</button>
<span ></span>
<button type="button" >Next</button>
</div>
</form>
<script src="script.js"></script>ブラウザでHTMLファイルを開きます。現在のページインジケーターとナビゲーションを備えた次のスクリーンショットで2列のレイアウトのようなものを取得する必要があります。
バニラJavaScriptを使用して機能を追加しますベーススクリプトを開きます
:root {
--primary-color: #8c852a;
--secondary-color: #858034;
}
body {
font-family: sans-serif;
line-height: 1.4;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
max-width: 600px;
}
h1 {
text-align: center;
}
form {
background: #fff;
padding: 40px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.form-group {
display: flex;
gap: 7%;
}
.form-group > div {
width: 100%;
}
input:not([type="checkbox"]),
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-control {
margin-bottom: 15px;
}
button {
display: block;
width: 100%;
padding: 10px;
color: white;
background-color: var(--primary-color);
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: var(--secondary-color);
}
.group-two, .group-three {
display: none;
}
.arrows {
display: flex;
justify-content: space-between
align-items: center;
margin-top: 10px;
}
#navLeft, #navRight {
width: fit-content;
}
@media screen and (max-width: 600px) {
.form-group {
flex-direction: column;
}
}上記のJavaScriptコードが行っていることをさらに深く掘り下げましょう。 updateStepVisibility（）関数では、最初にすべてのセクションを非表示にして、きれいなスレートを持っています。
次に、現在アクティブなセクション：
次に、指標がフォームを介して進行するというテキストを更新します。
const stepInfo = document.getElementById("stepInfo");
const navLeft = document.getElementById("navLeft");
const navRight = document.getElementById("navRight");
const form = document.getElementById("myForm");
const formSteps = ["one", "two", "three"];
let currentStep = 0;
function updateStepVisibility() {
formSteps.forEach((step) => {
document.getElementById(step).style.display = "none";
});
document.getElementById(formSteps[currentStep]).style.display = "block";
stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;
navLeft.style.display = currentStep === 0 ? "none" : "block";
navRight.style.display =
currentStep === formSteps.length - 1 ? "none" : "block";
}
document.addEventListener("DOMContentLoaded", () => {
navLeft.style.display = "none";
updateStepVisibility();
navRight.addEventListener("click", () => {
if (currentStep < formSteps.length - 1) {
currentStep++;
updateStepVisibility();
}
});
navLeft.addEventListener("click", () => {
if (currentStep > 0) {
currentStep--;
updateStepVisibility();
}
});
});ページが読み込まれたときに何が起こるかを見てみましょう。最初のセクションにフォームが読み込まれたときに、最初に前のボタンを非表示にします：
formSteps.forEach((step) => {
document.getElementById(step).style.display = "none";
});次に、次のボタンをつかみ、現在のステップカウントを条件付きで増分するクリックイベントを追加し、UpdateStepVisibility（）関数を呼び出します。これにより、表示される新しいセクションが更新されます。
document.getElementById(formSteps[currentStep]).style.display = "block";`
最後に、前のボタンをつかんで同じことをしますが、逆です。ここでは、ステップカウントを条件付きで減らし、updateStepVisibility（）を呼び出しています：
stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;処理エラー
navLeft.style.display = currentStep === 0 ? "none" : "block"; navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";
の前に
を修正できるようにします。それが私たちの形で私たちがすることです。document.addEventListener("DOMContentLoaded", () => {
navLeft.style.display = "none";
updateStepVisibility();私たちの原則は、どのコントロールにエラーがあるかを明確に示し、意味のあるエラーメッセージを提供することです。ユーザーが必要なアクションを実行するときにエラーをクリアします。フォームに検証を追加しましょう。まず、必要な入力要素をつかみ、これを既存の要素に追加しましょう。
navRight.addEventListener("click", () => {
if (currentStep < formSteps.length - 1) {
currentStep++;
updateStepVisibility();
}
});<form >
<section >
<div >
<div >
<label for="name">Name <span style="color: red;">*</span></label>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div >
<label for="idNum">ID number <span style="color: red;">*</span></label>
<input type="number" name="idNum" placeholder="Enter your ID number">
</div>
</div>
<div >
<div >
<label for="email">Email <span style="color: red;">*</span></label>
<input type="email" name="email" placeholder="Enter your email">
</div>
<div >
<label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
<input type="date" name="birthdate" max="2006-10-01" min="1924-01-01">
</div>
</div>
</section>
<section >
<div >
<label for="document">Upload CV <span style="color: red;">*</span></label>
<input type="file" name="document" >
</div>
<div >
<label for="department">Department <span style="color: red;">*</span></label>
<select name="department">
<option value="">Select a department</option>
<option value="hr">Human Resources</option>
<option value="it">Information Technology</option>
<option value="finance">Finance</option>
</select>
</div>
</section>
<section >
<div >
<label for="skills">Skills (Optional)</label>
<textarea name="skills" rows="4" placeholder="Enter your skills"></textarea>
</div>
<div >
<input type="checkbox" name="terms" >
<label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
</div>
<button type="submit">Confirm and Submit</button>
</section>
<div >
<button type="button" >Previous</button>
<span ></span>
<button type="button" >Next</button>
</div>
</form>
<script src="script.js"></script>ここで、必要な各入力に何らかの値があるかどうか、電子メール入力に有効な入力があるかどうかを確認します。次に、それに応じてisValidブール波を設定します。また、ShowerRor（）関数を呼び出しますが、これはまだ定義されていません。
このコードをbealteStep（）関数の上に貼り付けます：
:root {
--primary-color: #8c852a;
--secondary-color: #858034;
}
body {
font-family: sans-serif;
line-height: 1.4;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
max-width: 600px;
}
h1 {
text-align: center;
}
form {
background: #fff;
padding: 40px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.form-group {
display: flex;
gap: 7%;
}
.form-group > div {
width: 100%;
}
input:not([type="checkbox"]),
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-control {
margin-bottom: 15px;
}
button {
display: block;
width: 100%;
padding: 10px;
color: white;
background-color: var(--primary-color);
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: var(--secondary-color);
}
.group-two, .group-three {
display: none;
}
.arrows {
display: flex;
justify-content: space-between
align-items: center;
margin-top: 10px;
}
#navLeft, #navRight {
width: fit-content;
}
@media screen and (max-width: 600px) {
.form-group {
flex-direction: column;
}
}
const stepInfo = document.getElementById("stepInfo");
const navLeft = document.getElementById("navLeft");
const navRight = document.getElementById("navRight");
const form = document.getElementById("myForm");
const formSteps = ["one", "two", "three"];
let currentStep = 0;
function updateStepVisibility() {
formSteps.forEach((step) => {
document.getElementById(step).style.display = "none";
});
document.getElementById(formSteps[currentStep]).style.display = "block";
stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;
navLeft.style.display = currentStep === 0 ? "none" : "block";
navRight.style.display =
currentStep === formSteps.length - 1 ? "none" : "block";
}
document.addEventListener("DOMContentLoaded", () => {
navLeft.style.display = "none";
updateStepVisibility();
navRight.addEventListener("click", () => {
if (currentStep < formSteps.length - 1) {
currentStep++;
updateStepVisibility();
}
});
navLeft.addEventListener("click", () => {
if (currentStep > 0) {
currentStep--;
updateStepVisibility();
}
});
});最後に、ユーザーが正しい情報の入力を開始したときにエラーがなくなるように、リアルタイムエラー処理を追加する必要があります。この関数をvalimatestep（）関数の下に追加します：
リアルタイム検証スクリプトを開きます
formSteps.forEach((step) => {
document.getElementById(step).style.display = "none";
});そして、ユーザーが正しい値で入力するとエラーがクリアされました：
document.getElementById(formSteps[currentStep]).style.display = "block";`
フォームの提出
マルチステップ形式では、ユーザーが提出する前に最後にすべての回答の要約を表示し、必要に応じて回答を編集するオプションを提供することが価値があります。その人は、後方にナビゲートせずに以前の手順を見ることができないため、最後のステップで要約を表示すると、保証と間違いを修正する機会が与えられます。
HTMLを開きます
stepInfo.textContent = `Step ${currentStep + 1} of ${formSteps.length}`;
navLeft.style.display = currentStep === 0 ? "none" : "block"; navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";
次に、この関数をscripts.js：
document.addEventListener("DOMContentLoaded", () => {
navLeft.style.display = "none";
updateStepVisibility();これにより、入力値がフォームの概要セクションに動的に挿入され、ファイル名が切り捨てられ、不要な入力のフォールバックテキストが提供されます。
次に、updatestepvisibility（）関数を更新して、新しい関数を呼び出します。navRight.addEventListener("click", () => {
if (currentStep < formSteps.length - 1) {
currentStep++;
updateStepVisibility();
}
});最後に、これをdomcontentloadedイベントリスナーに追加します：
<form >
<section >
<div >
<div >
<label for="name">Name <span style="color: red;">*</span></label>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div >
<label for="idNum">ID number <span style="color: red;">*</span></label>
<input type="number" name="idNum" placeholder="Enter your ID number">
</div>
</div>
<div >
<div >
<label for="email">Email <span style="color: red;">*</span></label>
<input type="email" name="email" placeholder="Enter your email">
</div>
<div >
<label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
<input type="date" name="birthdate" max="2006-10-01" min="1924-01-01">
</div>
</div>
</section>
<section >
<div >
<label for="document">Upload CV <span style="color: red;">*</span></label>
<input type="file" name="document" >
</div>
<div >
<label for="department">Department <span style="color: red;">*</span></label>
<select name="department">
<option value="">Select a department</option>
<option value="hr">Human Resources</option>
<option value="it">Information Technology</option>
<option value="finance">Finance</option>
</select>
</div>
</section>
<section >
<div >
<label for="skills">Skills (Optional)</label>
<textarea name="skills" rows="4" placeholder="Enter your skills"></textarea>
</div>
<div >
<input type="checkbox" name="terms" >
<label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
</div>
<button type="submit">Confirm and Submit</button>
</section>
<div >
<button type="button" >Previous</button>
<span ></span>
<button type="button" >Next</button>
</div>
</form>
<script src="script.js"></script>マルチステップフォームを使用すると、ユーザーが送信する前に提供するすべての情報を編集して確認できるようになりました。
:root {
--primary-color: #8c852a;
--secondary-color: #858034;
}
body {
font-family: sans-serif;
line-height: 1.4;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
max-width: 600px;
}
h1 {
text-align: center;
}
form {
background: #fff;
padding: 40px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.form-group {
display: flex;
gap: 7%;
}
.form-group > div {
width: 100%;
}
input:not([type="checkbox"]),
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.form-control {
margin-bottom: 15px;
}
button {
display: block;
width: 100%;
padding: 10px;
color: white;
background-color: var(--primary-color);
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: var(--secondary-color);
}
.group-two, .group-three {
display: none;
}
.arrows {
display: flex;
justify-content: space-between
align-items: center;
margin-top: 10px;
}
#navLeft, #navRight {
width: fit-content;
}
@media screen and (max-width: 600px) {
.form-group {
flex-direction: column;
}
}マルチステップフォームをアクセス可能にすることは、基本から始まります：
セマンティックHTMLを使用します。より技術的なアクセシビリティを得るために、マークアップに次の調整を行いましょう：
スキルを除くすべての入力にaria-required = "true"を追加します。
エラースパンにロール= "アラート"を追加します。
ロール= "status" aria-live = "polite" to g.stepinfo。
これは、スクリーン読者がステップ情報が状態のタブを保持することを理解するのに役立ちます。そしてこれが私がそれにアプローチした方法です！繰り返しますが、私はこれを個人的な挑戦として引き受け、どこまで手に入れることができるかを確認しました。しかし、これをユーザーエクスペリエンスとアクセシビリティの思いやりにさらに念頭に置くための追加の機会があるかどうかを知りたいです。
参照
以上がバニラJavaScriptとCSSでマルチステップフォームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
