Formularze- sprawdzian praktyczny

Znacznik <form>- wywołanie formularza

Atrybuty <form>:

• action- link z plikiem gdzie będą dane


• method- metoda kodowania, może przyjmować:
  1. get- gdy nie mamy podanego pliku
  2. post- gdy mamy plik gdzie wysyłamy dane
  
  
• autocomplete- domyślne uzupełnianie wierszy (on/off)


• name- taka nazwa dla programisty co tam jest


• id- unikatowa, może się przydać

Przykładowe wywołanie formularza:

<form action="plik.php" method="post" autocomplete="off" name="formularz" id="formu"

Znacznik <input>- pole formularza

Atrybuty <input>:

1. type- typ pola np. tekst, liczba itp.
   Kod- <input type="text">
   


2. name- taka nazwa dla programisty co tam jest, natomiast gdy mamy pole wyboru dla danego pola wyboru name musi być takie sam żeby np. zaznaczyć jedą odpowiedź
   Kod- <input type="text" name="imie">
   


3. size- rozmiar w pikselach
   Kod- <input type="text" name="imie" size="60px">
   


4. maxlength- długość maksymalna, chodzi o liczbę znaków
   Kod- <input type="text" name="imie" maxlength="3"> spróbuj wpisać więcej niż 3 znaki
   


5. value- wartość pola, przykład w:
   • polu tekstowym
     
   • polu wyboru nie pełni funkcji widocznej, jest dla komputera informacją o czym jest dane pole, musi być
   • przycisku- wartość w tym atrybucie to nazwa przycisku np.
     
     


6. readonly- tylko do odczytu, przykład kodu i użycia
   <input type="text" readonly>
   


7. placeholder- tekst zastępczy, tekst który po wpisaniu do niego wartości znika
   Kod- <input type="text" placeholder="Wpisz coś">
   


8. checked- w polach wyboru domyślnie zaznaczona opcja
   Kod- <input type="radio" name="g" value="1" checked>1
   <input type="radio" name="g" value="2">2
   1
   2


9. accesskey- skrót klawiszowy, połączenie alt+ wartość wpisana w atrybucie
   Kod- <input type="radio" accesskey="t">
   Pole


10. autofocus- gdy damy ten atrybut, podczas pisania kursor zniknie (przyciągnie się do pola), oraz ta wartość będzie odrazu zaznaczona any w niej pisać, nie ma cudzysłowa (wartości)
    Kod- <input type="text" autofocus> Spróbuj coś napisać
    


11. required- obowiązkowy do wypełnienia, nie posiada wartości
    Kod- <input type="text" required> spróbuj klknąć wyślij bez wpisania czegoś w polu
    
    


12. title- podpowiedź, gdy najedziemy myszką na dane pole
    Kod- <input type="text" title="podpowiedź"> Najedź na pole
    


13. pattern- sprawdza czy tekst jest zgodny z wymaganiami. Przykłady wymagań:


• Ma mieć 8 znaków
  Kod- <input type="text pattern=".{8}"> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  


• 8 lub więcej
  Kod- <input type="text pattern=".{8,}"> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  


• 3 cyfry
  Kod- <input type="text pattern="[0-9]{3}"> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  


• 3 małe litery
  Kod- <input type="text pattern="[a-z]{3}"> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  


• 3 małe lub duże litery
  Kod- <input type="text pattern="[A-Za-z]{3}"> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  


• Kod pocztowy (XX-XXX)
  Kod- <input type="text pattern="[0-9]{2}[-]{1}[0-9]{3}"> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  


• 
  Kod- <input type="text pattern=""> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  


• Od 4 do 6 cyfr
  Kod- <input type="text pattern="[0-9]{4,6}"> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  


• Dokładny napis
  Kod- <input type="text pattern="^Kowalski$"> Spróbój wpisać jakąś inną wartośc i kliknij wyślij
  

Jakie mamy typy pól (chodzi o wartości type=""):

1. text- tekst
   Kod- <input type="text">
   


2. checkbox- pole wielkorotnego wyboru
   Kod- <input type="checkbox" name="pole1" value="1">1
   <input type="checkbox" name="pole1" value="2">2
   1
   2


3. radio- pole jednokrotnego wyboru
   Kod- <input type="radio" name="pole2" value="1">1
   <input type="radio" name="pole2" value="2">2
   1
   2


4. password- hasło
   Kod- <input type="password">
   


5. file- plik
   Kod- <input type="file">
   


6. sumbit- przycisk do wysyłania
   Kod- <input type="submit">
   


7. reset- przycisk do wyczyszczania całego formularza
   Kod- <input type="reset">
   


8. hidden- pole niewidoczne na stronie
   Kod- <input type="hidden">
   


9. button- przycisk, nic nie robi (musisz to w JS ale to nie na sprawdzian)
   Kod- <input type="button" value="nie działa">
   


10. color- wybór koloru
    Kod- <input type="color">
    


11. email- email
    Kod- <input type="email">
    


12. number- liczba (atrybuty min- od, max- do, step- co ile ma się przesuwać jak klikniemy na strzałki
    Kod- <input type="number" min="0" max="10" step="1">
    


13. date- data
    Kod- <input type="date">
    

Znacznik <label>- etykieta, niewidoczna na stronie, ale pozwala komputerowi podzielić stornę na segmenty

<label name="formularz">
<input type="text">
</label>

Znacznik <fieldset>- bardzo podobne do label, ale w tym znaczniku możemy dodać znacznik <legend> i będziemy mieli obramowanie

Kod- <fieldset name="dane">
<legend>Dane</legend>
<input type="text">
</fieldset>

Znacznik <select>- lista wyboru, aby dodać pojedynczą opcję w tym znaczniku dajemy <option>

Kod- <select name="pole" size="2" multible disabled id="pole">
<optgroup label="tytuł">
<option>Opcja1</option>
<option>Opcja2</option>
</optgroup>
</select>

Atrybuty dla select:
- name- nazwa
- size- ilośc wyświetlanych opcji na raz
- multible- większa ilosć zaznaczanych opcji na raz
- disabled- wyłączone kontrolki
- id- id
- selected- w znaczniku <option>, domyślne zaznaczenie
- value- wartość

Znacznik <textarea>- pole tekstowe na większe ilości tekstu, wielkość może dostosować użytkownik, ma 3 pochyłe kreseczki na dole

Kod- <textarea name="tekst" rows="2" cols="20"></textarea>

Atrybuty:
- name- nazwa
- rows- liczba wiersz
- cols- szerokość

Znacznik <datalist>- pole tekstowe z możliwością wyboru opcji

Kod- <input type="text" list="lista1">
<datalist id="lista1>
<option>Opcja1</option>
<option>Opcja2</option>
</datalist>