Formularze
Wzór dokumentu z rubrykami do wypełnienia. Blankiet dokumentu z nadrukowanymi rubrykami i objaśnieniami sposobu ich wypełnienia.
Do tworzenia mapy używamy znaczników:
- <form></form>odpowiada za deklarację ram formularza.
-
Główne atrybuty formularza:
- action=" " → określa rodzaj akcji po naciśnięciu OK (aches mail, adres skryptu)
- methood="post" lub methood="get" → określa rodzaj metody, posti> jest bezpieczniejsze a get autmatycznie wybierany przez przeglądarki
- autocomplete="on" lub methood="off" → określa zapamiętywanie przez przeglaradkę wprowadzane dane (hasła, nr kart, loginy), on jest domyślne
- novalidate="novalidate" → włącza domyślne sprawdzanie zawartości
- readonly → uniemożliwia modyfikację wartości kontrolki, tabulatorem można wejść do niej
- disabled → kontrolka jest niedostępna
- tabindex → ustala kolejność w jakiej kontrolki formularza są odwiedzane przez tabulator, musi to być liczba calkowita
- accesskey → skróty klawiszowe
- maxlenght → maksymalna ilość możliwych do wpisania
- size → rozmiar, gryzie się w CSSie z szerokością width
- action="mailto" → wysyłanie maila, otwarcie okna poczty
- required, optional → pole, które nie są wymagane
Pole input
Jest to znacznik kontenerowy
Typy inputów:
- <input></input>ma adrybut type , który określa typ kontrolki formularza. Drugi atrybut to name, który określa nazwę elementu. Dodatkowo można użyć value, czyli wartości tego przycisku
<input
name
="nazwa"
type
="button"
value
="zaloguj"
> </input>
Typy inputów:
- text (automatyczny typ)
- password (wyświetlane są tylko kropki)
- submit (zaloguj)
- image (atrybuty: type, name, src, alt)
- reset
Przekazywanie plików
Kontrolka wyboru pliku
Przekazywanie plików przez formularz, posiada atrybuty type oraz name. Formularz musi być przekazany metodą post. Należy ustawić sposób kodowania danych pochądzących z formularza:
<input
type
="file"
> </input>
Przekazywanie plików przez formularz, posiada atrybuty type oraz name. Formularz musi być przekazany metodą post. Należy ustawić sposób kodowania danych pochądzących z formularza:
<input
name
="nazwa"
type
="file"
enctype
="multipart/form-data"
> </input>
Label
Spina elemnty, oznaczeine tekstu, będącego opisem pola formularza, elemnt liniowy
<label> </label>
Tworzenie listy
Za tworzenie listy odpowiedzialny jest:
- select (ramy)
- option (opcje)
<select
name
="Dzień"
>
<option>
Poniedziałek </option>
<option>
Wtorek </option>
<option>
Środa </option>
<option>
Czwartek </option>
<option>
Piątek </option>
<option>
Sobota </option>
<option>
NIedziela </option>
</select>
- size (liczba elementów widzialnych)
- multiple (możliwość wyboru kilku elementów)
Optgroup
Odpowiedzialne za tworzenie podgrup:
Grupowanie i podpisywanie kontrolek formularza:
<optgroup
label
="Samochód"
>
<option>
Opcje 1 </option>
<option>
Opcje 2 </option>
<option>
Opcje 3 </option>
</optgroup>
Grupowanie i podpisywanie kontrolek formularza:
- label
- fieldset (obramowanie)
- legend (napis na obramowaniu)
<fieldset>
<legend>
opis
<label>
<input>
Rozbudowane pole tekstowe
Służy do tego znacznik textarea
<textarea
rows
="1"
cols
= "5"
>
tekst </textarea>
Znak wodny
Znak wodny placeholder to automatyczny napis w bloku formularza
Połączenie listy z polem tekstowym
<datalist
id
="Połączenie"
>
<option
label
="1"
value
="1"
>
<option
label
="5"
value
="5"
>
</datalist>
<input
list
="Połączenie"
name
="Połączenie"
>
Czas na przykład - własny formularz
Powróć do menu głównego HTML