Web Front-end
JS Tutorial
How to use HTML, CSS and jQuery to realize the advanced function of automatic saving of forms
How to use HTML, CSS and jQuery to realize the advanced function of automatic saving of forms
Oct 28, 2023 am 08:20 AM
How to use HTML, CSS and jQuery to implement the advanced function of automatic saving of forms
In modern web applications, forms are one of the most common elements. When users enter form data, how to implement the automatic saving function can not only improve the user experience, but also ensure data security. This article will introduce how to use HTML, CSS and jQuery to implement the automatic saving function of the form, and attach specific code examples.
1. Structure of HTML form
Let’s first create a simple HTML form structure. The following is an example:
<form id="myForm"> <input type="text" name="name" placeholder="姓名" /> <input type="email" name="email" placeholder="郵箱" /> <textarea name="message" placeholder="留言"></textarea> </form>
2. CSS style settings
Next, we need to set some styles on the form to make it more beautiful. Here are just simple examples, you can design it to suit your needs.
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. Use jQuery to auto-save the form
Now, we need to use jQuery to implement the auto-save function of the form. We will use localStorage to store form data. As the user enters input into the form, the data is automatically saved in localStorage. When the user refreshes the page or closes the browser, and then visits the page again, the form will automatically fill in the previously saved data.
// 當(dāng)用戶輸入時，保存表單數(shù)據(jù)到localStorage
$('input, textarea').on('keyup', function() {
var inputName = $(this).attr('name');
var inputValue = $(this).val();
localStorage.setItem(inputName, inputValue);
});
// 當(dāng)頁面加載完成后，自動填充表單數(shù)據(jù)
$(document).ready(function() {
$('input, textarea').each(function() {
var inputName = $(this).attr('name');
var inputValue = localStorage.getItem(inputName);
$(this).val(inputValue);
});
});4. Complete sample code
The following is the complete sample code, including HTML, CSS and 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>
// 當(dāng)用戶輸入時，保存表單數(shù)據(jù)到localStorage
$('input, textarea').on('keyup', function() {
var inputName = $(this).attr('name');
var inputValue = $(this).val();
localStorage.setItem(inputName, inputValue);
});
// 當(dāng)頁面加載完成后，自動填充表單數(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>Summary
Go through the above steps , we can easily implement the automatic saving function of the form. Users do not need to worry about data loss, the data will still be retained even if they close the browser or refresh the page. Of course, this is just a simple example and you can extend and optimize the code according to your specific needs. Hope this article helps you!
The above is the detailed content of How to use HTML, CSS and jQuery to realize the advanced function of automatic saving of forms. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How can you animate an SVG with CSS?
Jun 30, 2025 am 02:06 AM
AnimatingSVGwithCSSispossibleusingkeyframesforbasicanimationsandtransitionsforinteractiveeffects.1.Use@keyframestodefineanimationstagesforpropertieslikescale,opacity,andcolor.2.ApplytheanimationtoSVGelementssuchas,,orviaCSSclasses.3.Forhoverorstate-b
What is Autoprefixer and how does it work?
Jul 02, 2025 am 01:15 AM
Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.
What is the loading='lazy' one of the html attributes and how does it improve page performance?
Jul 01, 2025 am 01:33 AM
loading="lazy" is an HTML attribute for and which enables the browser's native lazy loading function to improve page performance. 1. It delays loading non-first-screen resources, reduces initial loading time, saves bandwidth and server requests; 2. It is suitable for large amounts of pictures or embedded content in long pages; 3. It is not suitable for first-screen images, small icons, or lazy loading using JavaScript; 4. It is necessary to cooperate with optimization measures such as setting sizes and compressing files to avoid layout offsets and ensure compatibility. When using it, you should test the scrolling experience and weigh the user experience.
What is the conic-gradient() function?
Jul 01, 2025 am 01:16 AM
Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin
What are best practices for writing valid and well-formed HTML code?
Jul 01, 2025 am 01:32 AM
When writing legal and neat HTML, you need to pay attention to clear structure, correct semantics and standardized format. 1. Use the correct document type declaration to ensure that the browser parses according to the HTML5 standard; 2. Keep the tag closed and reasonably nested to avoid forgetting closed or wrong nesting elements; 3. Use semantic tags such as, etc. to improve accessibility and SEO; 4. The attribute value is always wrapped in quotes, and single or double quotes are used uniformly. Boolean attributes only need to exist, and the class name should be meaningful and avoid redundant attributes.
CSS tutorial focusing on mobile-first design
Jul 02, 2025 am 12:52 AM
Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the
What are the essential HTML elements for structuring a webpage?
Jul 03, 2025 am 02:34 AM
The web page structure needs to be supported by core HTML elements. 1. The overall structure of the page is composed of , , which is the root element, which stores meta information and displays the content; 2. The content organization relies on title (-), paragraph () and block tags (such as ,) to improve organizational structure and SEO; 3. Navigation is implemented through and implemented, commonly used organizations are linked and supplemented with aria-current attribute to enhance accessibility; 4. Form interaction involves , , and , to ensure the complete user input and submission functions. Proper use of these elements can improve page clarity, maintenance and search engine optimization.
How to create button elements in HTML forms.
Jul 03, 2025 am 02:39 AM
Buttons are key interactive elements in HTML forms. There are two main ways to create: 1. Use tags to create custom buttons that support nested content, and the type attribute can be set to submit, reset or button; 2. Use tags to create basic buttons that only display text, suitable for simple scenarios. It is also recommended to combine CSS to set padding, font-size, border-radius and other styles to improve clickability and appearance, and enhance the interactive experience through:hover and:active status. The submission button can also use the disabled attribute to prevent repeated submissions.
