JavaScript - lekcja 3

ELEMENTY SEMANTYCZNE - https://webaim.org/intro/
CHECKBOXY

1. Checkbox jest dobry w formularzach, kiedy oczekujemy wyrażenia zgody przez użytkownika (zgody RODO, na przetwarzanie danych - takie, jakie nie mogą być domniemane, muszą być wyrażone osobno)
2. Checkbox przydaje się do wielu wyborów, np do wyboru preferencji.
3. atrybut checked - domyślnie zaznaczony checkbox,
4. value="programming" - checkbox wysyła od razu do serwera
5. dobry checkbox to taki, ze moge nacisnąć na napis obok niego i zaznaczy opcje

RADIO BUTTONS:

1. Wybór jest tylko jeden
2. wartość w atrybucie value zostanie wysłana
3. dobrze mieć domyślną wartość - taka, która zostanie zaznaczona podczas ładowania strony, dzięki temu zawsze będzie cos wyslane

INPUT TYPE="file"

1. użytkownik moze cos wyslac
2. jak damy wartość do accept to ograniczamy jakie typy przyjmujemy, multiple pozwala na kilka plikow
3. uwaga na bezpieczeństwo, ktoś może zobaczyć, sposób uploadu, gdzie itd. to moze wyslac cos innego
4. po stronie serwera decyduje się dozwolony rozmiar, ponieważ dzieje się to dopiero po probie wyslania - bo tak to ktoś moze oszukać przegladarke i wyslac zly plik

INPUT TYPE="date"

1. Pole po kliknięciu otwiera nam NASZ lokalny kalendarz
2. można ustalić zakres dat i godzin
3. datetime=local pozwala pominąć strefe czasowa
4. stare przeglądarki zdegradują do pliku tekstowego

INPUT TYPE="date"

1. dobry do organizacji czasu/spotkań itp.

LISTY ROZWIJANE:

1. pierwsza opcja ma value="", czyli pusta i dobrze jest jej nadac instrukcje, co ma użytkownik zrobić
2. bez pierwszej opcji pustej - zawsze chcemy mieć jakas wartość, a użytkownik chce zmienić
3. tag optgroup z etykietą i pod nim opcje - dużo wartości, grupowanie opcji za pomocą taga
4. multiple (size) atrybut pozwala na wybór wielu opcji, ctrl+klik daje opcje wyboru kilku-jak jest dużo podkatalogów z roznymi opcjami
5. atrybut disabled - opcja jest wyłączona/niedostępna
6. pola min i max w input ustawiają zakres (minlength i maxlength dla tekstow)
7. atrybut step ustawia o ile zwieksza liczbe
8. pattern ustawia regexa, jakie znaki mogą być uzyte

Aria-label

1. mowi o dostepnosci, o tym czego brakuje itp.

CSS - sposoby dodawania PLUS ich ważność (kaskada stylów):

1. zdefiniowanie stylu w tagu za pomocą atrybutu style ZŁY
2. osobna sekcja style - dodaje style do WYBRANYCH rzeczy, zwykla klasa zaczyna się od kropki a potem nazwy, każdy wybrany tag - nazwa tagu, unikatowe id - #nazwa
3. ładowanie css z zewnętrznego pliku
   dodanie obok stylu !important robi z niego priorytet, ale tylko wtedy gdy jest naprawde potrzebny

priorytet: id (#), klasa (.), tag (np. p), wszystko (*)

dzieci priorytyzują swoje style!

SPAN NIE ROZPYCHA SIĘ, TAK JAK RESZTA INLINOWYCH ELEMENTOW - nie ustawia sie im wielkosci height i width

SELEKTOR * - dotyka wszystko, zazwyczaj stosuje sie go do resetu elementów (margin:0, padding:0, box-sizing: border-box)

:hover do elementu oznacza, ze bedzie miec okreslony styl po najechaniu na dany element myszką, jest to jedna z pseudoklas
:active - podczas kliknięcia
:focus - ma fokus w formularzu
:visited - odwiedzony link
reszta w kodzie

div p - wszystkie p wewnątrz div
no-repeat przy obrazku (background) oznacza, ze obrazek nie powtarza się w tle jesli zostalo jeszcze wolne miejsce do wypełnienia

font-family -> kolejność ważności czcionek

by dostać gradient w kolorach wystarczy użyć wartości
linear-gradient(to left/right, kolor1, kolor2) lub (stopnie, kolor1 procent, kolor2 procent....)
radiant-gradient(circle, kolor1, kolor2)