Na stronie   W katalogu
     
Rozumiem I Akceptuje (X)
Ta strona używa plików cookies aby lepiej spełnić Państwa oczekiwania. Jednocześnie informuje, że można zablokować zapisywanie cookies, zmieniając ustawienia przeglądarki.


    Dodaj strone do katalogu     Dodaj reklame     Pobierz program     Dodaj do ulubionych     Kontakt   


Formularze w html5 - Nowe typy pól


Jak już wcześniej wspomniałem formularze w html5 zmieniły się dość znacznie. Projektując formularz w html5 trzeba jednak mieć na uwadze, że nie wszystkie przeglądarki wszystko w pełni obsługują.

Nowe typy pól



input type number - pole do wprowadzania cyfr


Jest to specjalne pole do wprowadzania cyfr. Dodatkowo podaje się zakres wprowadzanych cyfr od minimum do maximum. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.



A tak wygląda kod


<input type="number" min="0" max="10" value="5" />

input type email - pole dla adresu e-mail

Jak sama nazwa wskazuje pole to służy do wprowadzania adresu e-mail. Przeglądarki działające pod Windows dotychczas wyświetlają to pole jako zwykły input type tekst. Jednak nowoczesne przeglądarki w urządzeniach mobilnych dostosowują odpowiednią klawiaturę do wprowadzania adresu e-mail.


A tak wygląda kod


<input type="email" />

input type url - pole dla adresu sieciowego


Jak sama nazwa wskazuje pole to służy do wprowadzania adresu url. Podobnie jak poprzednio przeglądarki działające pod Windows dotychczas wyświetlają to pole jako zwykły input type tekst. Jednak nowoczesne przeglądarki w urządzeniach mobilnych dostosowują odpowiednią klawiaturę do wprowadzania adresu url.


A tak wygląda kod


<input type="url" />

input type tel - pole do wprowadzania numeru telefonu


Jak sama nazwa wskazuje pole to służy do wprowadzania numeru telefonu. Podobnie jak poprzednio przeglądarki działające pod Windows dotychczas wyświetlają to pole jako zwykły input type tekst. Jednak nowoczesne przeglądarki w urządzeniach mobilnych dostosowują odpowiednią klawiaturę do wprowadzania numeru telefonu.


A tak wygląda kod


<input type="tel" />

input type search - pole do wprowadzania tekstu dla wyszukiwarki


Jak sama nazwa wskazuje pole to służy do wprowadzania tekstu dla wyszukiwarki. Oczywiście można go użyć z placeholder Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.



A tak wygląda kod


<input type="search" placeholder="Wpisz szukany tekst" />

input połączony z DATALIST - pozwala zdefiniować listę danych dla input


Znacznik DATALIST służy do połączenia input z wcześniej zdefiniowaną listą podpowiedzi które można umieścić w polu input. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.


Jakiej używasz przeglądarki


A tak wygląda kod


<p>Jakiej używasz przeglądarki </p>
<input type="text" name="" list="lista">
<datalist id="lista">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
</input>

input type range - pole do wprowadzania cyfr z danego zakresu


Jest to specjalne pole do wprowadzania cyfr z danego zakresu od minimum do maximum. Prawidłowo wyglądająca kontrolka to estetyczny suwak Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.



A tak wygląda kod


<input type="range" name="" min="1" max="5" value="1" />

Kontrolki ułatwiające wprowadzanie daty i czasu.


Jak sama nazwa wskazuje kontrolki te mają za zadanie ułatwienie wprowadzania daty i czasu do formularzy. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.


  • input type date - kalendarz
  • input type month - kalendarz z wyborem całego miesiąca
  • input type week - kalendarz z wyborem tygodnia w roku
  • input type datetime - kalendarz z wyborem daty i czasu
  • input type datetime-local - kalendarz z wyborem daty i czasu lokalnego
  • input type time - ustawienie czasu (godziny, minuty)

Cały kalendarz - input type date



kalendarz z wyborem całego miesiąca - input type month



kalendarz z wyborem tygodnia w roku - input type week



kalendarz z wyborem daty i czasu - input type datetime



kalendarz z wyborem daty i czasu lokalnego - input type datetime-local



ustawienie czasu (godziny, minuty) - input type time



A tak wygląda kod


<p>Cały kalendarz</p>
<input type="date" name="" value="" /><br /><br />
<p>kalendarz z wyborem całego miesiąca</p>
<input type="month" name="" value="" /><br /><br />
<p>kalendarz z wyborem tygodnia w roku</p>
<input type="week" name="" value="" /><br /><br />
<p>kalendarz z wyborem daty i czasu</p>
<input type="datetime" name="" value="" /><br /><br />
<p>kalendarz z wyborem daty i czasu lokalnego</p>
<input type="datetime-local" name="" value="" /><br /><br />
<p>ustawienie czasu (godziny, minuty)</p>
<input type="datetime-local" name="" value="" /><br />

input type color - pole do wprowadzania koloru


Jak sama nazwa wskazuje kontrolka ta ma za zadanie ułatwienie wprowadzania koloru do formularza. Uwaga jeśli twoja przeglądarkach nie obsługuje tego to nie zobaczysz efektu.



A tak wygląda kod


<input type="color" name="" value="" />