przykład formularza - Kurs HTML i CSS
Komendy HTML 4.01 / Zdarzenia...i umożliwiający wykonywanie pewnych dynamicznych zadań, niedostępnych na zwykłych statycznych witrynach. Skrypty są często używane w połączeniu z formularzami, których kontrolki (pola) służą do wprowadzania danych i wyprowadzania wyników. Przykład <input onclick> Po wpisaniu: <input type="button" value="Kliknij tutaj!" onclick="window.alert('To jest właśnie obsługa zdarzenia, jakim było kliknięcie myszką na przycisku.')"> Otrzymamy: Jak widać aby obsłużyć zdarzenie, należy podać w...
- Komendy HTML 4.01 / Wykaz elementów
...definicyjna DT wymag/opcj Definicja terminu EM wymag/wymag w linii Wyróżnienie FIELDSET wymag/wymag w bloku Grupa kontrolek formularza FONT wymag/wymag w linii Atrybuty czcionki FORM wymag/wymag w bloku Formularz FRAME wymag/zabr Ramka FRAMESET wymag/wymag Ustawienie ramek H1,H2,H3,H4,H5,H6 wymag/wymag w bloku Nagłówek HEAD opcj/opcj Nagłówek dokumentu HR wymag/zabr w bloku Pozioma linia HTML opcj/opcj Główny...
- HTML5 / Tryb wpisywania <... inputmode>
...wyszukiwania. Urządzenia mobilne są wyposażone w klawiaturę ekranową, która potrafi dopasować zestaw klawiszy do typu wprowadzanej wartości. Na przykład przy wprowadzaniu wartości numerycznej, dostępne mogą być tylko cyfry, przecinek i minus. Możemy ręcznie wymusić określony tryb wprowadzania tekstu poprzez przypisanie atrybutu inputmode="...". Warto zauważyć, że niektóre wartości atrybutu trybu wpisywania odpowiadają typom pól formularza: inputmode="text" i type="text...
Selektory pseudoklas CSS / Zogniskowanie :focus...style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla elementu (np. odsyłacza lub pola formularza), który przyjmuje w danej chwili zogniskowanie. Przykładowo dotyczy to odsyłacza, wybranego za pomocą klawisza tabulatora czy pola formularza, w którym znalazł się kursor. Przykład :focus textarea:focus { color: white; background-color: black } Kliknij tutaj lub przenieś kursor za pomocą klawisza tabulatora, a tło w tym polu stanie...
- Rozmiary CSS / Przeciąganie {resize}
...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 obszaru tekstowego, ponieważ może to skutecznie uprzykrzyć życie użytkownikom. O ile czasami zmiana szerokości pola...
- HTML5 / Pola formularza <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week" min max step multiple>
...odpowiednią wartość ręcznie. Przykład <input "color, date, datetime-local, email, month, number, range, search, tel, time, url, week"> Zobacz przykład: INPUT Minimum, maksimum, krok <input "date, month, week, time, datetime-local, number, range" min max step> (interpretuje: Internet Explorer 10, Firefox 16, Opera 12.1, Chrome 5) <input type="typ" min="minimum" max="maksimum" step="krok"> typ Można podać wyłącznie: date, month, week, time, datetime-local, number lub range. Nie...
- HTML5 / Okienko popover <... popover, button "button" popovertarget popovertargetaction, input "button" popovertarget popovertargetaction>
...na stronie poza tym okienkiem.</p> </div> <button type="button" popovertarget="popover1">Otwórz/zamknij popover</button> Bardziej zaawansowany przykład z osobnym przyciskiem zamykania i blokadą przypadkowego zamknięcia: <div id="popover2" popover="manual"> <p>To jest popover, który powinien się wyświetlić ponad standardową zawartością strony.</p> <p>Aby go zamknąć, kliknij przycisk:</p> <button type="button" popovertarget="popover2" popovertargetaction="hide">Zamknij...
- HTML5 / Blokada autouzupełniania <form autocomplete, input autocomplete, select autocomplete, textarea autocomplete>
...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 <form>, <input>, <select> lub <textarea>. Na przykład: <input...
- Tekst CSS / Tryb pisania {writing-mode}
...W wielu językach azjatyckich tekst podczas pisania tradycyjnie układany jest pionowo, gdzie kolejne linijki są położone obok siebie. Na przykład w językach pochodzenia mongolskiego linijki ułożone są pionowo obok siebie od lewej do prawej strony - tzn. pierwsza linijka tekstu znajduje się przy lewej krawędzi kartki, a ostatnia - przy prawym jej brzegu. Pionowe ułożenie tekstu możemy uzyskać właśnie dzięki użyciu stylu "writing-mode: vertical-lr" (języki mongolskie) albo...
- Tekst CSS / Orientacja tekstu {text-orientation}
...vertical-lr; text-orientation: upright; } otrzymamy: Kolumna 1 Kolumna 2 Kolumna 3 Wiersz 1 1 2 3 Wiersz 2 4 5 6 Wiersz 3 7 8 9 [Porównaj przykład z rozdziału: Tryb pisania] 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...