Ćwiczenia

Ćwiczenie 10 - Formularze

Formularz tworzymy za pomocą znacznika form a jego elementy za pomocą znacznika input. Można w nich używać CSS'a np zmieniać szerokość pola, kolor tekstu, bordery. W zależności od type, które jest częścią znacznika input. Niżej znajdują się przykładowe typy:

Pozostałe typu inputów:

Wprowadza pól, które powinny zawierać kolor | type="color"
Używany do pól wejściowych, które powinny zawierać datę | type="date"
Wprowadza godziny bez stref czasowej | type="datetime-local"
Wprowadzanie pól, które powinny zawierać adres e-mail | type="email"
Definiuje pole wyboru pliku i przycisk „Przeglądaj” do przesyłania plików | type="file"
Dediniuje ukryte pole wejściowe niewidoczne dla użytkownika | type="hidden"
Definiuje obraz jako przycisk przesyłania | type="image"
Pozwala wybrać miesiąc i rok | type="month"
Definiuje numeryczne pole wejściowe | type="number"
Definiuje pole hasła | type="password"
type="range"
Definiuje przycisk resetowania, który zresetuje wszystkie wartości formularzy do ich wartości domyślnych | type="reset"
type="search"
type="tel"
type="time"
type="url"
type="week"

Możemy stworzyć formularz z polami do wprowadzania tekstu. Wszystkie typy formularzy stosujemy na poniższym wzorze. Jednak należy pamiętać, że każdy typ, będzie inaczej działał, poniżej znajduje się kilka przykładów. Poniżej przykład do przetestowania oraz podgląd jak go wykonano:

 <form>
                <label for="imie">Imię:</label><br>
                <input type="text" id="imie" name="imie"><br>
                <label for="nazwisko">Nazwisko:</label><br>
                <input type="text" id="nazwisko" name="nazwisko"><br>
                </form>

Co możemy napisać wraz ze znacznikiem form:

action="" określa gdzie ma zostać wysłana zawartość formularza,
target="" działa w ten sam sposób jak w linkach,
method="" atrybut określa metodę HTTP, która ma być użyta podczas przesyłania danych formularza. Domyślnie jest to "get" jako zmienna url, ale możemy uczyć "post" jako transakcja http,

Form może zawierać co najmniej jeden z następujących elementów formularza:

input | można wyświetlić na kilka sposobów, w zależności od type atrybutu
label | definiuje etykietę dla kilku elementów formularza, czytnik ekranu odczyta na głos etykietę
select | definiuje listę rozwijaną
textarea | definiuje wielowierszowe pole wejściowe (obszar tekstowy)
button | definiuje klikalny przycisk
fieldset | służy do grupowania powiązanych danych w formularzu
legend | definiuje podpis fieldset elementu
datalist | określa listę predefiniowanych opcji dla input
output | reprezentuje wynik obliczenia (jak w skrypcie)
option | określają opcję, którą można wybrać

Atrybuty:

do option dodajemy selected, aby zdefiniować wybraną opcję
size, aby określić liczbę widocznych wartości
multiple, aby umożliwić użytkownikowi wybranie więcej niż jednej wartości
rows, określa widoczną liczbę linii w obszarze tekstowym
cols, określa widoczną szerokość obszaru tekstowego
do fieldset dodajemy legend, które definiuje podpis