formularzy - Kurs HTML i CSS
HTML5 / Nowe atrybuty HTML5...automatycznej kapitalizacji (dla obsługiwanych metod wprowadzania) autocomplete FORM, INPUT, SELECT, TEXTAREA Funkcja autouzupełniania pól formularzy autocorrect Wszystkie elementy Zalecane zachowanie automatycznej korekty (dla wspieranych metod wprowadzania) autofocus Wszystkie elementy Automatycznie ustawia zogniskowanie (fokus) na elemencie po załadowaniu strony blocking LINK (rel="stylesheet" lub rel="expect"), SCRIPT, STYLE Czy element może potencjalnie blokować...
- HTML5 / Główna treść <main>
...żadnych stałych elementów, które powtarzają się w całym serwisie: menu nawigacyjnego, informacji o prawach autorskich, logo serwisu, bannerów, formularzy wyszukiwania itp. Znacznik ten może jednak obejmować linki nawigujące do podsekcji głównej zawartości dokumentu, które nie powtarzają się na innych stronach. W pojedynczym dokumencie nie można umieścić więcej niż jednego elementu MAIN, chyba że zawiera atrybut hidden. Element MAIN nie może być również umieszczony - bezpośrednio lub...
- HTML5 / Wyszukiwarka <search>
...formularz. Do stworzenia wyszukiwarki można się posłużyć językiem takim jak PHP (wyszukiwarka), JavaScript (filtrowanie) albo skorzystać z gotowych formularzy wyszukiwarek internetowych. Przykład <search> <search> <form action="search.php"> <input type="search" name="q"> <button type="submit">Szukaj</button> </form> </search>
- HTML5 / Element bierny <... inert>
...być interaktywny - tzn.: Użytkownik nie będzie w stanie zaznaczyć tekstu takiego elementu. Nie będzie możliwości edytowania zawartości w polach formularzy ani elementach z atrybutem contenteditable="true". Zawartość, tak oznaczonego elementu, jest ignorowana podczas przeszukiwania dokumentu (skrót klawiaturowy Ctrl+F). Do skryptów JavaScript nie docierają z niego zdarzenia "click" ani "focus". Element i cała jego zawartość mogą być zignorowane przez technologie zwiększające dostępność...
- HTML5 / Pola formularza <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple>
...adres URL week - tydzień w roku [Zobacz również: Formularze] Znany ze specyfikacji HTML 4.01 element INPUT, tworzy większość rodzajów kontrolek formularzy. O tym, jaki typ elementu zostanie wyświetlony na ekranie, decyduje wartość atrybutu type="...". W języku HTML5 wprowadzono wiele dodatkowych typów kontrolek dla znacznika INPUT. W przypadku kiedy przeglądarka nie będzie obsługiwać nowych typów kontrolek, na ekranie zostanie wyświetlone zwykłe pole tekstowe (<input type="text">). Co...
Selektory pseudoklas CSS / Zaznaczenie :checked...Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Niektóre z pól formularzy pełnią rolę przełączników - można je zaznaczać i odznaczać. W związku z tym może się okazać przydatne dodatkowe wizualne wyróżnienie tych kontrolek, które użytkownik zaznaczył. Zaznaczenie dla opcji listy rozwijalnej obsługuje tylko Firefox. Przykład :checked Po wpisaniu w arkuszu stylów: input:checked, option:checked { margin-left...
- HTML5 / Przeciągnij i upuść <... draggable>
...użytkowników. Jeśli taki link zostanie upuszczony na pasku adresu przeglądarki, nastąpi jego wczytanie. Można je również upuszczać na pola tekstowe formularzy. W niektórych przypadkach możemy jednak nie chcieć takiego zachowania. Aby zablokować przypadkowe przeciągnięcie elementu przez użytkownika wystarczy nadać mu atrybut draggable="false". Oprócz tego do sterowania mechanizmem przeciągnij-i-upuść służą zdarzenia: ondragstart - zapoczątkowanie operacji przeciągania ondrag - kontynuacja...
- Rozmiary CSS / Przeciąganie {resize}
...i odczytać ukrytą treść. Taki przeciągany narożnik jest domyślnie dostępny w przeglądarce Safari i Chrome dla wszystkich obszarów tekstowych formularzy. W pewnych sytuacjach twórca strony może jednak nie chcieć, aby użytkownik rozciągał w ten sposób pola formularza, gdyż może to wywołać niekontrolowane zmiany wyglądu całego formularza. W takiej sytuacji przydatny może być styl: textarea { resize: none } Nie zaleca się jednak blokowania w każdej sytuacji możliwości zmiany rozmiaru...
- Selektory atrybutów CSS / Selektor atrybutu o określonej wartości
...title="Akapit" oraz lang="pl" (nie powinien być czerwony). Inne przydatne zastosowanie tego selektora to np. zmiana sposobu formatowania elementów formularzy. Niemal wszystkie kontrolki formularza są tworzone przy użyciu znacznika <input type="...">. O tym jaki rodzaj pola zobaczymy na ekranie, decyduje atrybut type="...". Jeśli chcielibyśmy zmienić rodzaj obramowania dla wszytkich pól tekstowych (type="text"), tak aby nie wpłynęło to na pola innego typu (np. na przycisk wysłania formularza...
- Tekst CSS / Tryb pisania {writing-mode}
...(poziomo): To jest pierwsza linijka... ...a to jest kolejna linijka. Ponadto niektóre przeglądarki mogą układać pionowo również tekstowe elementy formularzy: To jest pierwsza linijka... obszar tekstowy lista rozwijalna opcja 1 opcja 2 lista rozwijalna opcja 1 opcja 2 ...a to jest kolejna linijka. Jeśli powyżej widzisz pola formularza ułożone poziomo, to znaczy, że Twoja przeglądarka nie obsługuje pionowego ich ułożenia.