Tworzenie stron internetowych 3

Tworzenie stron internetowych
z wykorzystaniem HTM5,
JavaScript,
JavaScript, CSS3 i jQuery
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
–
• method –
• enctype –
`
najczęściej określa adres, pod który ma być wysłany
formularz (pole obowiązkowe)
wyznacza metodę przesłania formularza
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
• size
`
– pozwala na ustawienie domyślnej wartości pola
– 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
–
• accept –
pozwala na określenie ile znaków będzie jednocześnie
widocznych w polu
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ę w polu 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.