Podpowiedź pola formularza <input placeholder, textarea placeholder>
Jak umieścić podpowiedź w polu formularza HTML w postaci szarego tekstu, który zniknie po rozpoczęciu wprowadzania danych?
- Pole tekstowe:
<input placeholder="podpowiedź">
- Obszar tekstowy:
<textarea placeholder="podpowiedź">...</textarea>
- podpowiedź
- Dowolny tekst niezawierający znaku nowej linii, który może wstępnie pojawić się wewnątrz pola w postaci wyszarzonego tekstu
Atrybut placeholder="..." podpowiada użytkownikowi, co powinien wpisać w danym polu formularza. Przez przeglądarki może być obsługiwany w ten sposób, że jego wartość będzie na początku wpisana w pole w postaci wyszarzonego tekstu, który zniknie po umieszczeniu w nim kursora tekstowego przez użytkownika i rozpoczęciu wpisywania właściwej wartości.
Przykład <input placeholder>
📋 Zaznacz kod ▶ Edytuj na żywo
<input type="search" name="q" placeholder="Szukaj w serwisie...">
Zobacz przykład: placeholder="..."
Pytania i odpowiedzi <input placeholder, textarea placeholder>
Co to jest "placeholder" HTML?
Placeholder w HTML to atrybut, który wyświetla tymczasowy tekst w polu formularza, zanim użytkownik wprowadzi własne dane. Jest on używany jako wskazówka lub sugestia, co należy wpisać w danym polu, np.: placeholder="Wprowadź swój e-mail".
Jak ustawić "placeholder"?
Aby ustawić "placeholder" w polu formularza HTML, należy dodać atrybut placeholder="..." do elementu <input> lub <textarea> . Przykład: <input type="text" placeholder="Wprowadź swoje imię"> lub <textarea placeholder="Wpisz swoją wiadomość"></textarea>.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | Poziom wsparcia min. 2,5 roku | |
|---|---|---|---|---|---|---|
<input placeholder> | 3 2009-09-15 | 4 2011-03-22 | 12 2015-07-29 | ≤12.1 2012-11-20 | 4 2009-06-08 | |
<textarea placeholder> | 4 2010-01-25 | 4 2011-03-22 | 12 2015-07-29 | ≤12.1 2012-11-20 | 5 2010-06-07 |
Komentarze
Comandeer16.02.2022 12:52
Tak, ale to jest by design.
Zobacz więcej
Gość16.02.2022 12:29
Nie działa atrybut autoplay
Zobacz więcej- UszatySiemanko
15.11.2021 10:13
* poradnik dzięki 8) 8) 8) 8) 8) 8)
Zobacz więcej - kiszuriwalilibori
04.01.2018 18:57
Czy tylko u mnie (firefox) Datalist działa w dziwny sposób? Nie wyświetla listy wyboru po wejściu, ale dopiero po wpisaniu znaku, i to nie każdego ale pierwszego, który jest zawarty w polach opcji. A jak nie ma tego znaku to nic nie wyświetla. I nie musi to być pierwszy znak, tylko jakikolwiek...
Zobacz więcej - Michalski Bydgoszcz
27.03.2017 14:36
Aha dzięki pomogłeś, a z tym progress bar sobie podaruję wymyśle coś innego
Zobacz więcej - Comandeer
27.03.2017 14:33
Tylko w JS.
Zobacz więcej - Michalski Bydgoszcz
27.03.2017 14:32
Aha dzięki ogarnąłem jeszcze musze ogarnąć to z <progress> czy jest to możliwe tylko w js czy może także w tym ulepszonym html5 ?
Zobacz więcej - Michalski Bydgoszcz
27.03.2017 14:28
Więc czy muszę wpisać jakich kodeków używa plik lub/czy wystarczy podać format plików???
Zobacz więcej - Comandeer
27.03.2017 14:24
Tam, gdzie będzie iframe, tam będzie odtwarzacz z YT.
Zobacz więcej - Michalski Bydgoszcz
27.03.2017 14:23
Dzięki musiałem coś przeoczyć w samouczku html 5 bo pierwszy raz spotykam się z i frame a może używałem jej poprostu do czego innego i nie pojąłem tego iż można to wykożystać w taki sposób.
Jeśli dobrze pamiętam to wg. Twojego przykładu <i frame ustawia miejsce znajdowania się miniatury video...
Zobacz więcej
