
HTML, CSS ? jQuery? ???? ?? ?? ??? ?? ??? ???? ??
?? ? ???????? ??? ?? ???? ?? ? ?????. ???? ?? ???? ??? ? ?? ?? ??? ???? ??? ??? ??? ???? ?? ??? ??? ??? ??? ? ????. ? ???? HTML, CSS, jQuery? ???? ??? ?? ?? ??? ???? ??? ???? ???? ?? ??? ?????.
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? ?? ??? ?? ?? ??? ???? ???. 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>
??
? ??? ?? ??? ?? ?? ??? ?? ??? ? ????. ???? ??? ??? ?? ??? ??? ????. ????? ??? ???? ?? ????? ???? ?? ?????. ?? ?? ??? ?? ??? ?? ?? ??? ?? ??? ???? ???? ? ????. ? ??? ??? ??? ????!
? ??? HTML, CSS ? jQuery? ???? ?? ?? ??? ?? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!