Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk
Moduł 3 Formularze
Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML 5
Podstawy formularzy HTML Znacznik form
Znacznik form Wyznacza ramy formularza Może zawierać następujące atrybuty: action najczęściej określa adres, pod który ma być wysłany formularz (pole obowiązkowe) method wyznacza metodę przesłania formularza enctype wyznacza sposób kodowania danych <form action="zatwierdz.php" method="get"> </form>
Podstawowe kontrolki formularzy HTML Znacznik input Znacznik textarea Znacznik select Przyciski Grupowanie
Znacznik input (1) Odpowiada za wygenerowanie większości rodzajów pól formularza Może zawierać następujące atrybuty: type określa rodzaj pola name określa nazwę pola disabled określa aktywność pola (disabled = "disabled") Pole może zawierać również inne atrybuty w zależności od wartości atrybutu type
Znacznik input (2) Type="text" Wprowadza do formularza pole pozwalające na wprowadzenie jednej linii tekstu. Może zawierać następujące atrybuty value pozwala na ustawienie domyślnej wartości pola size pozwala na określenie ile znaków będzie jednocześnie widocznych w polu maxlength pozwala na określenie ile znaków można wprowadzić do pola readonly pozwala na określenie czy pole ma być tylko do odczytu readonly="readonly"
Znacznik input (3) Type="password" Wstawia do formularza pole pozwalające na wprowadzenie jednej linii tekstu, który będzie widoczny jako "*". Może zawierać takie same atrybuty jak pole <input type="text" /> z wyjątkiem atrybutu value.
Znacznik input (4) Type="checkbox" Wstawia do formularza pole pozwalające na wybranie zero lub więcej z n opcji. Może zawierać następujące atrybuty: value pozwala na rozróżnienie poszczególnych opcji checked pozwala na określenie czy pole ma być domyślnie zaznaczone name pola logicznie ze sobą połączone powinny mieć tę samą nazwę
Znacznik input (5) Type="radio" Wstawia do formularza pole pozwalające na wybranie jednej i tylko jednej z n opcji. Może zawierać następujące atrybuty: value pozwala na rozróżnienie poszczególnych opcji checked pozwala na określenie czy pole ma być domyślnie zaznaczone name pola logicznie ze sobą połączone powinny mieć tę samą nazwę
Znacznik input (6) Type="file" Wstawia do formularza pole pozwalające na wybranie pliku i przesłanie go na serwer. Może zawierać następujące atrybuty: size pozwala na określenie ile znaków będzie jednocześnie widocznych w polu accept pozwala na określenie jakie pliki mogą być akceptowane przez pole (Uwaga! należy podać typ MIME) UWAGA! Aby móc przesłać pliki na serwer atrybut enctype formularz musi być ustawiony na wartość multipart/form-data
Znacznik input (7) Type="hidden" Wstawia do formularza pole ukryte. Może zawierać następujące atrybuty: value pozwala na określenie wartości przechowywanej w polu.
Znacznik textarea Wstawia do formularza pole pozwalające na wprowadzenie tekstu zawierającego wiele linii Może zawierać następujące atrybuty: cols liczba kolumn, które mogą zmieścić się w polu bez przewijania rows liczba wierszy,które mogą zmieścićsię wpolu bez przewijania
Znacznik select Wstawia do formularza pole pozwalające na wybranie jednej lub wielu opcji z dostępnej listy Może zawierać następujące atrybuty: multiple określa czy możliwy jest wybór jednej czy wielu opcji (multiple="multiple") size liczba opcji widocznych bez przewijania Poszczególne opcje wprowadzamy za pomocą znacznika <option>. Opcje domyślne oznaczamy atrybutem selected="selected". Każdej opcji można przypisać inną wartość atrybutem value Istnieje możliwość grupowania opcji. Realizuje się to przez znacznik <optgroup>, który może przyjmować jeden atrybut label, określający nazwę grupy.
Przyciski Do generowania przycisków można wykorzystać dwa znaczniki: <input> - w tym przypadku atrybut type należy ustawić wartość: submit, reset, button. Atrybut value ustawia w tym przypadku tekst na przycisku. <button>- rodzaj przycisku określa atrybut type. Zawartość przycisku podajemy pomiędzy znacznikami otwierającym i zamykającym.
Grupowanie Za pomocą znacznika fieldset pola formularza można wizualnie pogrupować w logiczne części. Nagłówek takiej grupy ustawia się znacznikiem legend, który musi być umieszczony wewnątrz znacznika fieldset.