Добавьте заполнитель в HTML: атрибут, JavaScript, CSS и платформы

В HTML заполнитель — это текст или подсказка, которая отображается в поле ввода или элементе текстовой области перед тем, как пользователь вводит какое-либо значение. Он предоставляет подсказку или пример ожидаемого формата или содержимого поля ввода. Вот несколько способов добавить заполнитель в HTML:

  1. Использование атрибута «placeholder». Самый распространенный и простой метод — использовать атрибут «placeholder» внутри тегов input или textarea. Например:

    <input type="text" placeholder="Enter your name">
    <textarea placeholder="Enter your message"></textarea>
  2. JavaScript: вы также можете использовать JavaScript для динамической установки заполнителя. Этот метод позволяет вам изменять текст заполнителя в зависимости от определенных условий или действий пользователя. Вот пример использования JavaScript:

    <input type="text" id="nameInput">
    <script>
    document.getElementById("nameInput").placeholder = "Enter your name";
    </script>
  3. Псевдоэлементы CSS. Другой способ стилизации заполнителя — использование псевдоэлементов CSS. Селектор псевдоэлемента «::placeholder» позволяет применять определенные стили к тексту-заполнителю. Вот пример:

    <style>
    input::placeholder {
    color: red;
    font-style: italic;
    }
    </style>
    <input type="text" placeholder="Enter your name">
  4. Фреймворки и библиотеки. Если вы используете интерфейсную платформу или библиотеку, например React, Angular или Vue.js, они часто предоставляют свои собственные методы или компоненты для добавления заполнителей в поля ввода.