Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Inne typy pól formularza

Pozostało nam do omówienia kilka pól, które mogą być przydatne podczas tworzenia formularzy. Warto zauważyć, że jeśli jakaś przeglądarka nie wspiera danego pola, wyświetli zamiast niego zwykłe pole tekstowe.

  • <input type="tel"> – pole służące do wprowadzania numeru telefonu. Domyślnie nie narzuca ono żadnego konkretnego wzorca, ale możemy taki zdefiniować, używając atrybutu pattern, który omówimy na oddzielnych zajęciach. Pole nie różni się praktycznie niczym od zwykłego pola tekstowego, przy czym urządzenia z ekranem dotykowym zaproponują użytkownikowi do wypełniania pola klawiaturę numeryczną.
  • <input type="url"> – dzięki niemu, możemy wymusić na użytkowniku podanie poprawnego adresu URL. Na przykład adres ten, będzie musiał zaczynać się protokołem http://, https://, albo ftp://.
  • <input type="email"> – służy do wprowadzania adresu e-mail. Przeglądarka przy wprowadzaniu maila sprawdzi, czy wygląda on na poprawny, np. musi zawierać znak @, nie może kończyć, ani zaczynać się kropką itp.
  • <input type="date"> – pole służące do wprowadzania daty. Również bardzo przydatne, chociażby podczas podawania daty urodzenia. Datę podaje się w formacie rrrr-mm-dd (np. 2014-16-08). Po kliknięciu tego pola pojawia się kalendarz w którym możemy wskazać potrzebną nam datę.
  • <input type="time"> – służy do podawania czasu w formacie hh:mm:ss (np. 22:10:55). Pole jest wyposażone w przyciski służące do ustawienia godziny za pomocą myszki.
  • <input type="month"> - służy do wprowadzania liczb oznaczających datę w formacie rrrr-numer_mm (np.2014-10). Po kliknięciu pola pojawia się kalendarz w którym wskazujemy datę.
  • <input type="week"> - służy do wprowadzania liczb oznaczających datę w formacie rrrr-numer_tygodnia (np.2014-W30). Po kliknięciu pola pojawia się kalendarz w którym wskazujemy datę.
  • <input type="search"> – powinniśmy używać budując na stronie wyszukiwarkę. Od zwykłego pola typu text różni się przyciskiem służącym do usuwania wpisów.
  • <input type="range"> – pole, które służy do wybierania liczby z podanego zakresu. Wybór odbywa się za pomocą suwaka, zakres, podobnie jak w polu do wyboru liczby number, możemy ustalić za pomocą atrybutów min i max.
  • <input type="color"> – pole służące do wybierania koloru. Po użyciu tego pola zobaczymy paletę kolorów.
  • <input type="reset"> – przycisk czyszczący wszystkie pola formularza.
  • button – przycisk ogólnego przeznaczenia, będziemy go stosować kiedy nauczymy się JavaScript.

Ćwiczenie 2_6_5_1

Wykonaj stronę na której sprawdzisz działanie przedstawionych wyżej pól formularza (oprócz buttona). Do tego ćwiczenia zastosuj Google Chrome ponieważ Firefox może mieć pewne problemy. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <input type="tel" name="tel_1" value="" /> Telefon<br /><br />
  <input type="url" name="url_1" value="" /> Strona WWW<br /><br />
  <input type="email" name="email_1" value="" /> E-mail<br /><br />
  <input type="date" name="date_1" value="" /> Data<br /><br />
  <input type="time" name="time_1" value="" /> Która godzina<br /><br />
  <input type="month" name="month_1" value="" /> Miesiąc<br /><br />
  <input type="week" name="week_1" value="" /> Tydzień<br /><br />
  <input type="search" name="search_1" value="" /> Znajdź<br /><br />
  <input type="range" name="range_1" value="" min="0" max="100" /> Zakres liczb<br /><br />
  <input type="color" name="color_1" value="" /> Kolor<br /><br />
  <input type="reset" name="reset_1" value="Reset" />
  <input type="submit" name="przycisk_1" value="Ok" />
</form>

Tak powinna wyglądać wykonana strona:

  • Pole tel przyjmuje każdy wpisany teskst.
  • Wpisz w polu url np. Ala ma kota. W efekcie pojawi się dymek podpowiedzi, który prosi o wprowadzenie adresu URL. Usuń wpis przyciskiem Reset i wprowadź poprawny adres
  • Wpisz w polu email np. Ala ma kota. W efekcie pojawi się dymek podpowiedzi, który prosi o uwzględnienie znaku "@" w adresie. Wprowadź poprawny adres.
  • Wprowadź pozostałe dane.
  • Wyślij formularz przyciskiem Ok.
  • Zwróć uwagę, że kolor wysłany został w zapisie szesnastkowym.

Praca domowa

Wykonaj stronę z formularzem wysyłającym następujące dane osobowe:

  • imię;
  • nazwisko;
  • data orodzenia;
  • miejsce urodzenia;
  • adres zamieszkania - kod pocztowy, miasto, ulica, nr domu, nr mieszkania;
  • telefon;
  • e-mail.

Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.