How to use HTML, CSS and jQuery to realize the advanced function of automatic saving of forms-JS Tutorial-php.cn

How to use HTML, CSS and jQuery to realize the advanced function of automatic saving of forms

王林

Release： 2023-10-28 08:20:31

Original

774 people have browsed it

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 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>

Copy after login

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;
}

Copy after login

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.

// 当用户输入时，保存表单数据到localStorage
$('input, textarea').on('keyup', function() {
  var inputName = $(this).attr('name');
  var inputValue = $(this).val();
  localStorage.setItem(inputName, inputValue);
});

// 当页面加载完成后，自动填充表单数据
$(document).ready(function() {
  $('input, textarea').each(function() {
    var inputName = $(this).attr('name');
    var inputValue = localStorage.getItem(inputName);
    $(this).val(inputValue);
  });
});

Copy after login

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>
    // 当用户输入时，保存表单数据到localStorage
    $('input, textarea').on('keyup', function() {
      var inputName = $(this).attr('name');
      var inputValue = $(this).val();
      localStorage.setItem(inputName, inputValue);
    });

    // 当页面加载完成后，自动填充表单数据
    $(document).ready(function() {
      $('input, textarea').each(function() {
        var inputName = $(this).attr('name');
        var inputValue = localStorage.getItem(inputName);
        $(this).val(inputValue);
      });
    });
  </script>
</body>
</html>

Copy after login

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!