Создание текстового поля для ввода имени пользователя с сохранением

На чтение2 мин

Обновлено2 дня назад

Просмотров

Чтобы создать текстовое поле для ввода имени пользователя и сохранить его на веб-сайте, вы можете использовать HTML для формы, JavaScript для обработки ввода и сохранения его в локальном хранилище браузера (для сохранения данных в разных сеансах). Этот пример демонстрирует базовую реализацию.

Пример: Создание и сохранение имени пользователя

HTML <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Save Username</title>
</head>
<body><h2>Enter Your Username</h2><form id="usernameForm"><label for="username">Username:</label><input type="text" id="username" name="username" required><button type="submit">Save</button></form>

  <p id="message"></p>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Check if a username is already saved and display it
      const savedUsername = localStorage.getItem('username');
      const message = document.getElementById('message');

      if (savedUsername) {
        message.textContent = `Welcome back, ${savedUsername}!`;
      }

      // Form submission handler
      const form = document.getElementById('usernameForm');
      form.addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent form from refreshing the page

        // Get the entered username
        const usernameInput = document.getElementById('username').value;

        // Save the username in localStorage
        localStorage.setItem('username', usernameInput);

        // Display a message
        message.textContent = `Username saved: ${usernameInput}`;
      });
    });
  </script>
</body>
</html>

Вывод:

Screenshot-2024-11-08-152534 TextField

Screenshot-2024-11-08-152550 Saved Data

Объяснение:

HTML-форма :Простая форма с полем для ввода текста ( <input type="text">) для имени пользователя и кнопкой «Отправить».
Атрибуты id помогают получить доступ к элементам через JavaScript.
Локальное хранилище (localStorage) :localStorage.setItem('key', 'value')сохраняет данные. В этом случае имя пользователя сохраняется с ключом 'username'.
localStorage.getItem('key') извлекает сохраненные данные при загрузке страницы, чтобы проверить, существует ли уже такое имя пользователя.
Обработка форм с помощью JavaScript :Отправка формы перехватывается с целью event.preventDefault()предотвращения перезагрузки страницы.
Входное значение извлекается, сохраняется localStorage и отображается пользователю.

Примечания:

Постоянное хранилище : localStorage сохраняет данные даже после закрытия и повторного открытия браузера, что делает его пригодным для сохранения простых данных, таких как имя пользователя.
Вопросы безопасности : для конфиденциальных данных используйте более безопасные методы хранения (например, сеансы, хранилище на стороне сервера) и рассмотрите возможность использования HTTPS для передачи данных.

Этот подход обеспечивает простой и удобный способ захвата и сохранения имени пользователя на веб-сайте с использованием HTML и JavaScript.