Placeholder css/html, псевдо элемент/атрибут примеры placeholder

"placeholder css/html" - объединим сразу несколько тем, "placeholder в css" и "placeholder в html". "Placeholder псевдоэлемент" и/или "Placeholder атрибут?". В последнем абзаце рассмотрю вопросы, которые никуда не вошли.

Подробно о placeholder в css и html

1. Вообще о placeholder
2. Placeholder атрибут или "placeholder в html"
Исключение для атрибута placeholder

3. "Placeholder css" или placeholder псевдоэлемент"
4. Дополнительно о placeholder
css placeholder font size
шрифт placeholder css
placeholder image

5. Скачать

Вообще о placeholder

Как уже было сказано выше... placeholder может быть в css и html.

placeholder в css - это псевдоэлемент

placeholder в html - это атрибут

Placeholder перевод

Один из общих вопросов и "placeholder" - это "placeholder перевод":

placeholder переводится как : "заполнитель" - существительное.

Что важнее "Placeholder псевдоэлемент" или "Placeholder атрибут?"

Либо этот же вопрос можно задать так:

- Что первичнее "Placeholder css" или "Placeholder html?"

Ответ:

Конечно же важнее - "Placeholder атрибут", потому, что он устанавливается в тег и соответственно имеет физическую оболочку.

А "Placeholder псевдоэлемент" - даже по его типу можно понять, что он будет вторичным - это слово "псевдоэлемент"(ни в коем случае не обижая "псевдоэлемент")

Из-за этого и начнем с первого пункта!




"Placeholder атрибут" или "placeholder в html"!

Начнем с заголовка - "Placeholder атрибут" или "placeholder в html"!

Что такое "placeholder" в html?

"Placeholder" - это один из атрибутов html.

Зачем нужен атрибут "placeholder" в html?

Атрибут "placeholder" в html нужен для создания "текста внутри" поля ввода(input или textarea)

Синтаксис атрибута "placeholder html"!

Если поле ввода textarea:

<textarea placeholder="Пример placeholder в textarea"></textarea>

Если поле ввода input:

<input type="text" placeholder="Пример placeholder в input">

Пример вывода атрибута "placeholder html".

Выше вы видели синтаксис использования атрибута placeholder, теперь давайте этот код выведем прямо здесь:

Пример textarea и атрибута "placeholder".




Пример input и атрибута "placeholder".

Исключение для атрибута placeholder

Есть ли "исключение для атрибута placeholder"?

Одно из исключений поля ввода, где не работает "атрибут placeholder" - это type {submit}, для данного типа, value - будет исполнять(условно) роль placeholder

Пример исключения для атрибута placeholder

<input type="submit" value="Исключение placeholder в input">

Вывод исключения для атрибута placeholder




"Placeholder css" или placeholder псевдоэлемент"

Кроме того, что "placeholder" может быть атрибутом, но и "placeholder" может быть "псевдоэлементом"... хотя его поведение отличается от... например before - т.е. он не выводится отдельно от элемента, а он выводится внутри "поля ввода".

Синтаксис placeholder псевдоэлемент"

selector::placeholder {

property: value;

}

Зачем нужен псевдоэлемент placeholder"

"Псевдоэлемент placeholder" нужен для того, чтобы изменить свойства выводимого текста в поле ввода, например цвет.

Пример использования псевдоэлемента placeholder"

Html

<input class="example_placeholder" placeholder="Здесь текст внутри инпута">

Css

<style>

.example_placeholder::-webkit-input-placeholder {color:red ;;}

.example_placeholder::-moz-placeholder {color:red ;}

.example_placeholder:-moz-placeholder {color:red ;}

.example_placeholder:-ms-input-placeholder {color:red ;}

</style>

Вывод на экран псевдоэлемента placeholder"




Дополнительно о placeholder

Несколько дополнительных вопросов о placeholder, о которых делать страницу невозможно, и не сказать нельзя!

Css placeholder font size

Для того, чтобы изменить "font size" у placeholder вам понадобится - "font-size:"

Html

<input class="example_placeholder_2" placeholder="css placeholder font size">

Css

<style>

.example_placeholder_2::-webkit-input-placeholder {font-size: 20px;}

.example_placeholder_2::-moz-placeholder {font-size: 20px;}

.example_placeholder_2:-moz-placeholder {font-size: 20px;}

.example_placeholder_2:-ms-input-placeholder {font-size: 20px;}

</style>

Пример изменения font size у placeholder

Шрифт placeholder css

Для того, чтобы изменить "шрифт css у placeholder" вам понадобится - "font-family"

Html

<input class="example_placeholder_3" placeholder="css placeholder font size">

Css

<style>

.example_placeholder_3::-webkit-input-placeholder {font-family: fantasy;}

.example_placeholder_3::-moz-placeholder {font-family: fantasy;}

.example_placeholder_3:-moz-placeholder {font-family: fantasy;}

.example_placeholder_3:-ms-input-placeholder {font-family: fantasy;}

</style>

Пример изменения шрифта у placeholder

Placeholder image

placeholder image... эээ? Что это: "placeholder image"?

placeholder image - не бывает...

Атрибут placeholder добавляется только полям ввода.

Если я правильно понял, то вам нужен атрибут title