text - Kurs HTML i CSS
Formularze HTML / Przykład formularza HTML...na temat dodatkowych możliwości pól formularza użytych w poniższym przykładzie, zobacz rozdziały: Ramy formularza <form> Pole tekstowe <input text> Pole opcji <input radio> Pole wyboru <input checkbox> Lista rozwijalna <select, option> Obszar tekstowy <textarea> Wysłanie formularza <input submit> Wyczyszczenie danych <input reset> Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat jeszcze bardziej zaawansowanych typów pól formularza, zobacz rozdział...
- Formularze HTML / Pole wyboru <input "checkbox">
...JavaScript: <input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = !this.checked"> <input type="text" name="nazwa2" disabled> Przykład <input "checkbox" onclick> Po wybraniu opcji, pole tekstowe zostanie odblokowane: Możliwe jest również odblokowanie kilku pól naraz (dowolnych typów): <input type="checkbox" name="nazwa" value="wartość" onclick="this.form.elements['nazwa2'].disabled = this.form.elements['nazwa3'].disabled...
Szablon strony na DIV-ach / Stały szablon...Nagłówek szablonu Menu nawigacyjne Treść strony Stopka serwisu html, body { background-color: #fff; color: #000; margin: 0; padding: 0; text-align: center; } #top { width: 780px; margin-left: auto; margin-right: auto; text-align: left; } #NAGLOWEK { background-color: #888; } #MENU { width: 150px; float: left; overflow: hidden; background-color: #ccc; } #TRESC { width: 630px; float: left; overflow: hidden; background-color: #fff; } #STOPKA { clear: both; width...
Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki...<form id="' + this.id + '" action="javascript:void(0)" onsubmit="' + this.id + '.wyswietl(); return false">' + '<input type="text" name="haslo" size="30" onkeyup="' + this.id + '.zaznacz()" class="text">' + '<div><select name="hasla" size="' + (typeof rozmiar != 'undefined' && rozmiar ? rozmiar : 15) + '" ondblclick="' + this.id + '.wyswietl()">' ); for (var i = 0; i < hasla.length; i++) { document.write('<option value="' + ((typeof adres_bazowy...
- Formularze HTML / Alternatywny sposób wysłania formularza
...(najlepiej w treści nagłówkowej dokumentu) następujący kod: <script> // www.kurshtml.edu.pl function mail_form(f) { function url_encode(text) { return text.replace(/%/g, '%25').replace(/\?/g, '%3F').replace(/=/g, '%3D').replace(/&/g, '%26').replace(/#/g, '%23').replace(/\r/g, '%0D').replace(/\n/g, '%0A'); } for (var i = 0, text = ''; i < f.elements.length; i++) { if (f.elements[i].name == '' || f.elements[i].disabled) continue; switch (f.elements[i].type) { case...
- Menu w CSS / Poziome menu
...Obramowanie ul, ul li { display: block; list-style: none; margin: 0; padding: 0; } ul li { float: left; } ul a:link, ul a:visited { text-decoration: none; display: block; width: 80px; text-align: center; background-color: #ccc; color: #000; border: 2px outset #ccc; padding: 5px; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } Odnośniki zostały wyświetlone blokowo, aby można było ustalić jednakową szerokość wszystkich przycisków. Czcionki Tekst...
- XHTML / Różnice między HTML 4 a XHTML 1.0
...linii) jest zamieniane na jeden. Skrypty osadzone i wewnętrzne arkusze stylów (element style) należy wstawiać w następujący sposób: <script type="text/javascript"> <![CDATA[ ...zawartość skryptu (może zawierać bezpośrednio znaki: <, >, &)... ]]> </script> Jest to konieczne, jeśli wewnętrzny skrypt lub arkusz stylów zawiera znaki: <, >, &, ponieważ w takim przypadku procesor XML potraktuje je jako znaczniki lub początek encji (znaków specjalnych). Uwaga! Przeglądarki mogą nie obsługiwać...
- Kolory CSS / Wykaz kolorów systemowych
...size box, and scroll bar arrow box Tekst w nagłówkach, polach zmiany rozmiaru i polach przewijania zawartości GrayText Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color Kolor tekstu na zablokowanych elementach Highlight Item(s) selected in a control Wybrana pozycja HighlightText Text of item(s) selected in a control Tekst wybranej pozycji InactiveBorder Inactive window border Obramowanie...
- Komendy HTML 4.01 / Elementy zdeprecjonowane
...HTML. Wykaz elementów zdeprecjonowanych Element Zamiennik APPLET OBJECT BASEFONT CSS: color, font-family, font-size CENTER CSS: text-align DIR UL FONT CSS: color, font-family, font-size ISINDEX INPUT MENU UL S CSS: text-decoration STRIKE CSS: text-decoration U CSS: text-decoration Wykaz atrybutów zdeprecjonowanych Atrybut Zastosowanie Zamiennik align APPLET, IFRAME, IMG, INPUT, OBJECT CSS: float, vertical-align align CAPTION...
- Aktualizacja / System newsów
...poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines wewnątrz */ border-width: 1px; /* grubość obramowania */ border-style: solid; /* styl obramowania: solid, dashed, dotted, double, groove, ridge, inset, outset */ border-color: gray; /* kolor obramowania */ font-weight: bold; } .news dt...