Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

HTML: Input type color

poniedziałek,

HTML: Input type color

Element input type="color" jest użytecznym dodatkiem do formularzy HTML, który umożliwia użytkownikom wygodne wybieranie kolorów bez konieczności wpisywania ich kodu ręcznie. Stanowi przydatne narzędzie w tworzeniu interaktywnych stron internetowych, które wymagają od użytkowników wyboru kolorów, na przykład w celu dostosowania wyglądu strony lub wyboru kolorów dla produktów. Dzięki niemu proces wyboru kolorów staje się łatwiejszy i bardziej przyjemny dla użytkowników.

Przykład użycia

Używanie input type="color" jest bardzo proste. Oto przykład:

<form>
  <label>
    Wybierz kolor: <input type="color" name="color">
  </label>
</form>

W tym przykładzie występuje formularz zawierający pole input type="color". Gdy użytkownik kliknie to pole, pojawi się interfejs wyboru koloru, który pozwoli mu na wybór interesującego go koloru.

Demonstracja

Jak działa input type="color"?

Gdy użytkownik kliknie pole input type="color", przeglądarka wyświetli wbudowany interfejs wyboru koloru, który może różnić się w zależności od używanej przeglądarki internetowej. Zazwyczaj jest to okno dialogowe lub paleta kolorów, która umożliwia użytkownikowi przeglądanie różnych kolorów i wybieranie interesującego go koloru za pomocą myszy lub klawiatury.

Po wybraniu koloru przez użytkownika, wartość koloru zostanie zapisana w formie kodu szesnastkowego lub RGB i zostanie przypisana do pola input. W ten sposób możliwe jest przesłanie wybranego koloru razem z innymi danymi formularza, gdy użytkownik wyśle formularz.

Niestety, w przypadku standardowego elementu input type="color" w HTML nie ma możliwości bezpośredniego wymuszenia formatu zapisu koloru (np. HEX lub RGB).

Artykuł: Harmonogram egzaminów maturalnych

Harmonogram egzaminów maturalnych

Artykuł: Staże w Hiszpanii

Staże w Hiszpanii

Artykuł: Conformité Européenne

Conformité Européenne

Artykuł: Display Stream Compression

Display Stream Compression

Artykuł: High Dynamic Range

High Dynamic Range

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły