Gdzie wykorzystać ten przykład?
Formularze kontaktowe, wyszukiwarki i ustawienia. Wariant „Pola formularzy: ikona przy polu” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
Przykład prezentuje wygląd i zachowanie pojedynczego elementu formularza. Nie wysyła wiadomości ani nie zapisuje danych na serwerze.
Jak dodać go na stronę?
- Otwórz przykład w edytorze i podmień tekst oraz kolory.
- HTML wstaw w miejscu, w którym ma pojawić się element.
- CSS przenieś do arkusza stylów swojej strony. Reguły
body z podglądu dopasuj do własnego układu. - JavaScript uruchom po załadowaniu elementów HTML, na przykład przed zamknięciem
</body>. - Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Dodaj etykiety i własną obsługę wysyłania. Kontrola danych w przeglądarce nie zastępuje sprawdzenia danych po stronie serwera.
Co możesz zmienić w konfiguratorze?
Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Pola formularzy: ikona przy polu
HTML
<div class="effect"><label class="field-pack"><span class="field-label">Pola formularzy</span><span class="input-wrap"><span class="prefix" aria-hidden="true">⌕</span><input type="text" maxlength="120" placeholder="Wpisz tutaj…"><span class="suffix" aria-hidden="true"></span></span><small class="input-note" role="status">Wpisz coś, aby zobaczyć reakcję.</small></label></div>
CSS
*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.field-pack{display:block;width:min(450px,100%);margin:auto;text-align:left}.field-label{display:block;font-size:12px;margin-bottom:9px;color:#62774f;transition:.3s}.input-wrap{display:flex;align-items:center;background:#fff;border-radius:7px;padding:4px 12px;transition:.3s;border:1px solid #d5dfc9}.input-wrap input{width:100%;min-width:0;border:0;padding:12px 3px;background:none;color:inherit;font:14px Arial;outline:0}.input-wrap:focus-within{border-color:#e95b30;}.prefix,.suffix{font:11px monospace;color:#e95b30;padding-inline:4px}.input-note{display:block;font-size:10px;color:#81916f;margin-top:8px}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}
JavaScript
const field=document.querySelector('.field-pack input');
field.addEventListener('input',()=>{document.querySelector('.input-note').textContent=field.value.length?'Wpisano '+field.value.length+' znaków.':'Wpisz coś, aby zobaczyć reakcję.'});