Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk"

Anatol Chmiel
9 lat temu
Przeglądów:

1 Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk

2 Moduł 3 Formularze

3 Agenda Podstawy formularzy HTML Podstawowe kontrolki formularzy HTML Nowe kontrolki z HTML 5

4 Podstawy formularzy HTML Znacznik form

5 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>

obowiązkowe) method wyznacza metodę przesłania formularza enctype wyznacza

6 Podstawowe kontrolki formularzy HTML Znacznik input Znacznik textarea Znacznik select Przyciski Grupowanie

7 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

name określa nazwę pola disabled określa aktywność pola (disabled =

8 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"

Może zawierać następujące atrybuty value pozwala na ustawienie domyślnej wartości pola size pozwala na

9 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.

10 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ę

Może zawierać następujące atrybuty: value pozwala na rozróżnienie poszczególnych

11 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ę

12 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

Może zawierać następujące atrybuty: size pozwala na określenie ile znaków będzie jednocześnie widocznych w polu

13 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.

14 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

następujące atrybuty: cols liczba kolumn, które mogą zmieścić się w

15 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.

wprowadzamy za pomocą znacznika <option>. Opcje domyślne oznaczamy atrybutem selected="selected".

16 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.

Atrybut value ustawia w tym przypadku tekst na przycisku.

17 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.

Podobne dokumenty

FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.

1 FORMULARZE Formularz ma formę ankiety, którą można wypełnić na stronie. Taki formularz może być np. przesłany pocztą elektroniczną e-mail.