warto - Kurs HTML i CSS
HTML5 / Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>...w HTML? Autouzupełnianie w HTML jest używane do ułatwienia użytkownikom wprowadzania danych poprzez automatyczne sugerowanie i uzupełnianie wartości na podstawie wcześniejszych wpisów lub zapisanych danych. Na przykład, w formularzu <input type="text" name="email"> przeglądarka może automatycznie wypełnić adres e-mail użytkownika, który był wcześniej używany. Jak wyłączyć autouzupełnianie w HTML? Autouzupełnianie można wyłączyć w HTML, dodając atrybut autocomplete="off" do tagu...
- HTML5 / Minimalna i maksymalna liczba znaków <input minlength maxlength, textarea minlength maxlength>
Pole tekstowe: <input minlength="minimum" maxlength="maksimum"> Obszar tekstowy: <textarea minlength="minimum" maxlength="maksimum">...</textarea> minimum maksimum Liczby całkowite oznaczające odpowiednio: najmniejszą liczbę znaków, którą użytkownik musi wpisać w polu tekstowym oraz największą liczbę znaków, której nie może przekroczyć Atrybuty te pozwalają wymusić wpisanie w polu formularza tekstu składającego się przynajmniej z podanej liczb znaków (minlength="...") lub/i...
- HTML5 / Tryb wpisywania <... inputmode>
...lub HTML5 zawierający powyższe znaczniki - polecenie zostanie zastosowane zbiorczo do nich wszystkich tryb Należy podać jedną z poniższych wartości: none - przeglądarka nie powinna w ogóle wyświetlać klawiatury ekranowej. Jest przydatne, jeśli na stronie wyświetlamy własną kontrolkę klawiatury. text - klawiatura ekranowa umożliwiająca wprowadzanie tekstu w lokalnym języku użytkownika. tel - klawiatura ekranowa umożliwiająca wprowadzanie numerów telefonów. Powinna zawierać klawisze...
- HTML5 / Osadzenie kodu HTML w ramce lokalnej <iframe srcdoc>
(interpretuje: Firefox 25, Opera 15, Chrome 20) Z użyciem apostrofu (przydatne kiedy wartość zawiera cudzysłowy): <iframe srcdoc='kod'></iframe> Z użyciem cudzysłowu (przydatne kiedy wartość zawiera apostrofy): <iframe srcdoc="kod"></iframe> kod Dowolny tekst ze znacznikami HTML. Może on składać się z wielu linijek. Dzięki atrybutowi srcdoc='...' do ramki lokalnej nie musimy wczytywać osobnego pliku HTML za pomocą atrybutu src="...", ale możemy wprost podać kod HTML, który się w...
- HTML5 / Walidacja pól formularza <input pattern>
...w polu formularza przez użytkownika. Jest to pewien rodzaj filtru, który uniemożliwia nieprawidłowe wypełnienie formularza. Jeśli użytkownik wpisze wartość w niepoprawnym formacie, przeglądarka wyświetli komunikat błędu i zablokuje możliwość wysłania formularza. Komunikat ten będzie jednak dość ogólny - np.: "Podaj wartość w wymaganym formacie". Niestety użytkownik może się nie domyślić, co właściwie oznacza ten "wymagany format". Dlatego zaleca się dodatkowo ustawić atrybut title="...", w...
Selektory elementów CSS / Ogólny selektor braci(CSS 3 - interpretuje Internet Explorer 7.0, Firefox, Opera, Chrome) brat1 ~ brat2 { cecha: wartość } gdzie wyrazy "brat1" oraz "brat2" są selektorami typu, przy czym leżą one w tym samym rzędzie hierarchii drzewa dokumentu [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu i zostaną opisane w dalszych rozdziałach. Selektor ten umożliwia nadanie określonych atrybutów wszystkim braciom - tym, których typ w deklaracji został podany jako drugi...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>
...własne napisy, które zostaną wyświetlone na przyciskach otwierających lub/i zamykających okienko popover tryb Należy podać jedną z poniższych wartości: auto - wartość domyślna manual - popover nie zostanie zamknięty poprzez kliknięcie w dowolny obszar strony poza jego obrębem ani po wciśnięciu klawisza Esc bądź przycisku "Wstecz" (na niektórych platformach mobilnych). akcja Może przyjąć postać: toggle - naprzemienne otwieranie i zamykanie popovera (domyślnie) show - otwieranie...
- Marginesy CSS / Wymiarowanie pudełka {box-sizing}
...dawnego sposobu interpretacji, aby nadal prezentowały się poprawnie. Warto zauważyć, że przy wymiarowaniu "border-box" miejsce na faktyczną zawartość treści w elemencie kurczy się w miarę dodawania marginesów wewnętrznych oraz obramowania. Może się zdarzyć zatem, że na właściwą zawartość w ogóle już nie wystarczy miejsca. Nie jest możliwe natomiast, aby właściwa zawartość treści elementu miała wartość ujemną. Używanie deklaracji "box-sizing: border-box" na nowych stronach raczej nie...
- Selektory specjalne CSS / Klasy selektorów <... class>
Spis treści <... class> Klasy selektorów <... class> Lista klas Podzbiory klas Klasy selektorów <... class> selektor.klasa { cecha: wartość } Selektorem może być dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli i inne) [zobacz: Wstawianie stylów]. Klasa to wartość atrybutu class="..." nadanego selektorowi z poziomu języka HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Jako...
- Selektory pseudoklas CSS / Łączenie selektorów
Na koniec warto wspomnieć o jeszcze jednej przydatnej własności selektorów CSS. Jak się można było przekonać, rodzajów selektorów jest bardzo wiele - każdy przeznaczony do innego celu. Co jednak zrobić, jeżeli potrzebujemy w jednej regule stylu zastosować kilka selektorów prostych? Czy jest to w ogóle możliwe? Oczywiście, że tak. Wystarczy po prostu wpisać je jeden po drugim (bez żadnych odstępów) w następującej kolejności: selektor typu lub selektor uniwersalny selektory atrybutów...