
HTML、CSS、jQuery を使用してフォームの自動保存という高度な機能を?qū)g裝する方法
最新の Web アプリケーションでは、フォームは最も一般的な要素の 1 つです。ユーザーがフォームデータを入力する際に??、自動保存機能を?qū)g裝する方法は、ユーザーエクスペリエンスを向上させるだけでなく、データのセキュリティも確保できます。この記事ではHTML、CSS、jQueryを使ってフォームの自動保存機能を?qū)g裝する方法と具體的なコード例を紹介します。
1. HTML フォームの構造
まずは簡単な HTML フォーム構造を作成しましょう。以下は例です:
<form id="myForm">
<input type="text" name="name" placeholder="姓名" />
<input type="email" name="email" placeholder="郵箱" />
<textarea name="message" placeholder="留言"></textarea>
</form>
2. CSS スタイル設定
次に、フォームをより美しくするために、フォームにいくつかのスタイルを設定する必要があります。ここでは単純な例を示します。ニーズに合わせて設計できます。
form {
width: 400px;
margin: 0 auto;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
input[type="text"], input[type="email"] {
height: 40px;
}
textarea {
height: 100px;
}
.button {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
3. jQuery を使用してフォームを自動保存する
次に、jQuery を使用してフォームの自動保存機能を?qū)g裝する必要があります。 localStorage を使用してフォーム データを保存します。ユーザーがフォームに入力すると、データが自動的に localStorage に保存されます。ユーザーがページを更新するかブラウザを閉じて再度ページにアクセスすると、以前に保存したデータがフォームに自動的に入力されます。
// 當用戶輸入時,保存表單數(shù)據(jù)到localStorage
$('input, textarea').on('keyup', function() {
var inputName = $(this).attr('name');
var inputValue = $(this).val();
localStorage.setItem(inputName, inputValue);
});
// 當頁面加載完成后,自動填充表單數(shù)據(jù)
$(document).ready(function() {
$('input, textarea').each(function() {
var inputName = $(this).attr('name');
var inputValue = localStorage.getItem(inputName);
$(this).val(inputValue);
});
});
4. 完全なサンプル コード
以下は、HTML、CSS、jQuery を含む完全なサンプル コードです。
<!DOCTYPE html>
<html>
<head>
<title>表單自動保存</title>
<style>
form {
width: 400px;
margin: 0 auto;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
input[type="text"], input[type="email"] {
height: 40px;
}
textarea {
height: 100px;
}
.button {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<form id="myForm">
<input type="text" name="name" placeholder="姓名" />
<input type="email" name="email" placeholder="郵箱" />
<textarea name="message" placeholder="留言"></textarea>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
// 當用戶輸入時,保存表單數(shù)據(jù)到localStorage
$('input, textarea').on('keyup', function() {
var inputName = $(this).attr('name');
var inputValue = $(this).val();
localStorage.setItem(inputName, inputValue);
});
// 當頁面加載完成后,自動填充表單數(shù)據(jù)
$(document).ready(function() {
$('input, textarea').each(function() {
var inputName = $(this).attr('name');
var inputValue = localStorage.getItem(inputName);
$(this).val(inputValue);
});
});
</script>
</body>
</html>
概要
以上の手順でフォームの自動保存機能を簡単に実裝することができます。ユーザーはデータ損失を心配する必要はありません。ブラウザを閉じたり、ページを更新したりしても、データは引き続き保持されます。もちろん、これは単なる?yún)g純な例であり、特定のニーズに応じてコードを拡張および最適化できます。この記事がお役に立てば幸いです!
以上がHTML、CSS、jQueryを使ってフォームの自動保存という高度な機能を?qū)g現(xiàn)する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。