HTML Część I - Wprowadzenie Beata Pańczyk 1 Rys historyczny Tim Berners-Lee (1989) - twórca koncepcji hipertekstu, związany ze szwajcarskim CERN (Organisation Européenne pour la Recherche Nucléaire) - opracował pierwszą składnię języka HTML, zaimplementował pierwszy serwer WWW (httpd) i pierwszą przeglądarkę WWW (WorldWideWeb - z edytorem HTML) pierwszy serwer WWW - uruchomiony 6 sierpnia 1991 roku pod adresem http://info.cern.ch/. w 1994 Tim Berners-Lee załoŝył przy MIT (Massachusetts Institute of Technology) organizację World Wide Web Consortium (W3C) - do dziś zajmuje się koordynacją rozwoju technologii WWW 2 Składniki architektury WWW Klient HTTP (przeglądarka WWW) Serwer HTTP (serwer WWW) Protokół HTTP (Hyper Text Transfer Protocol) śródło: http://wazniak.mimuw.edu.pl/index.php?title=aplikacje_www 3 4 Zadania klienta HTTP (przeglądarki WWW - Web Browser) Inicjowanie połączenia HTTP Pobieranie interfejsu uŝytkownika Prezentacja interfejsu uŝytkownika Interakcja z uŝytkownikiem Buforowanie odpowiedzi (zapisywanie w lokalnym systemie plików, a następnie wykorzystanie do obsługi identycznych, powtórzonych Ŝądań w przyszłości - skrócenia czasu odpowiedzi) Kryptografia (podniesienia bezpieczeństwa komunikacji - moŝliwe szyfrowanie połączeń sieciowych z serwerami HTTP) Zadania serwera HTTP (serwera WWW) Obsługa Ŝądań HTTP Rejestracja Ŝądań Uwierzytelnianie i kontrola dostępu Kryptografia Wybór wersji językowej wysyłanych plików 5 6 1
Protokół HTTP Oparty na TCP Komendy tekstowe Transmisja 8-bitowa Bezstanowy, bezsesyjny Adres URL Wskaźnik do zasobu w sieci Internet http://www.pollub.pl/plany/inf.html 7 8 Adres URI URI, URL, URN URI, czyli Uniform Resource Identifier URL, czyli Uniform Resource Locator URN, czyli Uniform Resource Name Spojrzenie Klasyczne (URI = [URL lub URN]) Obecne (URI = URL) Protokół HTTP Składnia URI <scheme>://<authority><path>?<query> Przykłady typowych schematów http://localhost:80/index.php?z1=w1&z2=w2 ftp://user:pass@serwer.pl:21/dokument.txt mailto:beatap@pluton.pol.lublin.pl news://pl.comp.os.linux/ telnet://156.17.4.4/ 9 10 Protokół HTTP - przykład Przykład schematu http http://my.host.pl:8080/index.php?z1=w1&z2=w2 http: schemat, rodzaj protokołu //my.host.pl autoryzacja, nazwa hosta 8080 nr portu /index.php ścieŝka do zasobu z1=w1&z2=w2 zapytanie Dokumenty statyczne i dynamiczne Dokument statyczny - gotowy do pobrania plik w systemie plików serwera HTTP Dokument dynamiczny - dokument generowany na Ŝądanie przez program po stronie serwera HTTP Aplikacje WWW 11 12 2
Język HTML najwaŝniejszy język definicji dokumentów dla klientów HTTP - umoŝliwia zapis treści dokumentu i równocześnie opis jego układu opracowany przez Tima Bernersa-Lee w 1990, częściowo w oparciu o język SGMLguid (lokalna odmiana języka SGML stosowana w CERN prawdopodobnie najstarszy dokument HTML dostępny w Internecie - utworzony 13 listopada 1990 roku: http://www.w3.org/history/19921103- hypertext/hypertext/www/link.html (http://infomesh.net/html/history/early/). HTML zalety i wady Zalety prostota składni dostępność przeglądarek Wady brak szablonów/wzorców brak separacji formy i treści ubogi graficznie 13 14 Główne etapy rozwoju HTML SGML (1986) - fundamentalny pomysł na komputeryzację tekstu w epoce, w której mógł znaleźć zastosowanie w lokalnych systemach, obsługiwanych przez grono profesjonalistów (dokumentacja techniczna, bazy prawne, encyklopedie, itp). wersje HTML 2.0, 3.2, 4.0 i 4.01 (1995-1999), oparte formalnie na SGML, realizowały pomysł na nowe medium publikacji - odniosło wielki sukces, lecz w praktyce nastąpiło zepsucie koncepcji dokumentów elektronicznych i brak perspektyw rozwoju. XML (1998) - przemyślana adaptacja SGML do warunków sieciowego medium, z naciskiem na automatyzację tworzenia dokumentów, z myślą o złoŝonych transformacjach treści czy wręcz transakcjach zawieranych przez maszyny w Sieci. 15 Główne etapy rozwoju XHTML XHTML 1.0 (2000) - XML-owa wersja HTML 4.01, zachowuje ciągłość znaczeń i interpretacji języka przez przeglądarki, ale spełnia juŝ wymogi przetwarzania dokumentów dobrze uformowanych. XHTML 1.1 (2001), standard, który kontynuuje juŝ tylko wersję ścisłą (strict) języka HTML, zrywając z kompatybilnością języka wobec wcześniejszych wersji. Jego istotą jest stworzenie wspólnych ram dla modularnych języków rodziny XHTML. XHTML 2.0 jest w trakcie procesu standaryzacji - ma być pełną realizacją koncepcji modularyzacji, obejmującą cały wachlarz od nowa zdefiniowanych funkcjonalności dokumentów XHTML 16 Ewolucja standardu języka HTML śródło: http://www.wszpwn.com.pl/i10/html/html04.htm HTML - sfera metajęzyka SGML XHTML - oparty na metajęzyku XML Pomocnicze języki arkuszy stylów (DSSSL, CSS) nie są oparte na SGML/XML. Zielona kreska - obszar norm W3C 17 HTML język tworzenia stron WWW Dokument HTML plik tekstowy (ASCII) z opisem przy pomocy znaczników DuŜa zaleŝność wyglądu strony od przeglądarki (Mozilla Firefox, Internet Explorer, Lynx) i narzędzi wspomagających (odtwarzanie dźwięków, animacji, obrazów) Problemy: techniczne, wersja (standard HTML), rozszerzenia specyficzne dla określonych przeglądarek, ustawienia przeglądarki, znaki narodowe Edytory HTML (np. Ked, Front Page, Pajączek, Zajączek), edytory wbudowane do przeglądarek (np. Netscape Navigator), edytory tekstu z moŝliwością zapisu w formacie HTML nie polecane (np. Microsoft Word) 18 3
Znaczniki HTML Znaczniki (tagi) - opis sposobu formatowania strony i jej struktury (wstawienie dodatkowych elementów generowanych lub teŝ z pliku); Zasada ignorowania nieznanych znaczników Rodzaje znaczników: Parzyste: <znacznik>...</znacznik> Nieparzyste: <znacznik>... Parametry (atrybuty, własności) znacznika: wpisywane po nazwie, wartość parametru: po znaku = (ujęta w prosty cudzysłów "..." lub pojedynczy apostrof '...' ) <znacznik par1="wart_par1" par2="wart_par2"...> 19 Kodowanie polskich liter najbardziej polecana norma ISO-8859-2 (ewentualnie strona kodowa Windows 1250) zaleŝność od ustawień przeglądarki polecenie informujące przeglądarkę o zastosowanym zestawie (w nagłówku dokumentu): <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> 20 Struktura dokumentu HTML Tekst ASCII zawarty pomiędzy znacznikami: <html>... </html> Nagłówek nie wyświetlana część informacyjna o dokumencie: <head>...</head> Ciało dokumentu, część właściwa: <body>... Ignorowanie: wielokrotnych spacji, przejścia do nowego wiersza (ENTER) => jawność określania końca akapitów, wcięcia w celu wydzielenia struktury dokumentu 21 Struktura dokumentu HTML <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <title>tytul w naglowku </title> <meta > </head> <body> <p>akapit1 <br> akapit1 akapit1... <p>akapit2 akapit2 akapit2 akapit2... </html> - Prolog dokumentu (od wersji HTML 4.01) - początek dokumentu HTML - początek nagłówka - napis w nagłówku strony - informacje dla przeglądarki - koniec nagłówka - początek właściwej treści dokumentu - początek akapitu1 i podział wiersza - koniec akapitu 1 - koniec treści - koniec dokumentu HTML 22 Znaczniki w sekcji HEAD Tytuł dokumentu wyświetlany w pasku tytułowym przeglądarki: <title> </title> Dodatkowe informacje dla przeglądarki, dla wyszukiwarek (atrybut NAME stosowany jest wymiennie z atrybutem HTTP-EQUIV) <meta name="keywords" content="slowa kluczowe"> <meta name="description" content="opis strony"> <meta name="generator" content="edytor"> <meta name="autor" content="autor"> <meta name="copyright" content=" "> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> podstawowy adres URL dla wszystkich adresów względnych Przykład dokument p1.html <html> <body> <p>html - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu </html> <base href="http://www.mojserwer.pl" > 23 24 4
Przykład znacznik head <html> <head> <meta http-equiv= " content-type" content="text/html;charset=iso-8859-2"> <meta name="author" content="beatap"> <title>przykład 1</title> </head> <body> <p>html - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu Parametry znacznika body background - tło dokumentu w postaci pliku graficznego (.gif lub.jpg) bgcolor - kolor tła dokumentu text - kolor tekstu link - kolor połączeń początkowych alink - kolor połączeń aktywnych vlink - kolor połączeń wykorzystanych Np. <body bgcolor="blue" text="yellow" link="red"> </html> 25 26 Parametry znacznika body <html><head...,/head> <body text="#000099" bgcolor="lightyellow"> <p>html - Lekcja 1 <br>1. Podstawowe znaczniki <br>2. Struktura dokumentu </html> Znaki specjalne Znaki nie naleŝące do standardowego zestawu znaków alfanumerycznych (np. ), niektóre znaki specjalne (np. &) czy teŝ twardą spację naleŝy określać w dokumentach HTML za pomocą kodów. Kody znaków mogą być definiowane poprzez: nazwę (encję): &nazwa; wartość liczbową: &#nnn; 27 28 Tabela wybranych kodów znaków Formatowanie czcionki Wartość " & ²³¹ ¼½¾ " & Encja ² ³ ¹ ¼½¾ & Symbol " (cudzysłów prosty) twarda spacja (znak paragrafu) (symbol copyright) (zastrzeŝony znak towarowy) 2 3 1 (2, 3, 1 w indeksie górnym) ¼ ½ ¾ ułamki 29 <i> tekst </i> <b> tekst </b> <u> tekst </u> <tt> tekst </tt> <em> tekst </em> <strong> tekst </strong> <blink> tekst </blink> <sup>... </sup> <sub>... </sub> <font...>... </font> pochylenie pogrubienie podkreślenie maszyna do pisania wyróŝnienie zwykle kursywą wyróŝnienie zwykle pogrubieniem migotanie indeks górny indeks dolny parametry czcionki: color, size, face np. <font size=+1 face="arial" 30 color="red"> tekst </font> 5
Formatowanie tekstu, akapity, nagłówki, komentarze Wyrówanie tekstu parametr align o wartościach: left (domyślnie), center, right np. <p align= "center" > tekst akapitu <br> - łamanie wiersza <hr> - pozioma linia <h1>,<h2>,... - nagłówki (7 poziomów) Komentarz: <!-- komentarz w html --> Przykład formatowanie tekstu <html> <head>... </head> <body text="#000099" bgcolor="lightyellow"> <h3 align= "center" > HTML - Lekcja 1 </h3> <p align= "left" > 1. Podstawowe <b>znaczniki</b> <br> 2. Struktura <i>dokumentu</i> </html> 31 32 Lista numerowana <ol>, wypunktowana <ul> i lista definicji <dl> <ol> <li>element numerowany 1 </li> <li>element numerowany 2 </li> </ol> <ul> <li>element punktowany 1 </li> <li>element punktowany 2 </li> </ul> <dl> <dt> termin 1 </dt> <dd>objaśnienie terminu 1</dd> <dt> termin 2 </dt> <dd>objaśnienie terminu 2</dd> Przykład - listy <ul> <li>podstawowe znaczniki</li> <li>struktura dokumentu</li> </ul> <ol> <li>podstawowe znaczniki</li> <li>struktura dokumentu</li> </ol> <dl> <dt>html</dt> <dd>hyper Text Markup Language język do tworzenia hipertekstu </dd> <dt>http</dt> <dd>hyper Text Transfer Protocol protokół wykorzystywany w WWW </dd> </dl> </dl> 33 34 Listy zagnieŝdŝone <ul> <!--lista punktowana zewnętrzna --> <li>podstawowe znaczniki <ol> <!--lista numerowana wewnętrzna --> <li>p</li> <li>hr</li> <li>br</li> </ol> </li> <li>struktura dokumentu <ul> <!--lista punktowana wewnętrzna --> <li>html</li> <li>head</li> <li>body</li> </ul> </li> </ul> 35 <img > src="plik luburl" align="połoŝenie" alt="tekst" ismap border height width Dodawanie grafiki nazwa URLa lub pliku graficznego w formacie.gif lub.jpg określa połoŝenie obrazka na stronie WWW: top, middle lub centre, bottom, right, left pokazuje tekst w miejscu elementów graficznych uŝytkownikom, którzy nie mogą oglądać grafiki; obrazek w formacie mapy Linia wokół obrazu (=0 brak) Wysokość i szerokość 36 6
Przykład wstawianie obrazka <html> <body> <h2>html - Lekcja 1</h2> <ol> <li>podstawowe znaczniki</li> <li>struktura dokumentu</li> </ol> <img src="duke.gif" alt="tu jest obrazek"> Przykład parametry obrazka <html><body> <h2>html - Lekcja 1</h2> <ol> <li>podstawowe znaczniki</li> <li>struktura dokumentu</li> </ol> <p align= "center" > <img src="duke.gif" border= "2" alt="tu jest obrazek" height= "100" width= "90" > </html> 37 38 </html> Odwołania hipertekstowe (linki) <a href="plik lub url"> tekst odnośnika </a> np. <a href="rys.htm"> zobacz rys.1 </a> <a href= "http://www.google.pl" > wyszukaj </a> <a name="r1"> rozdział 1 </a> <a href="#r1"> przeczytaj roz. 1 </a> kotwica (anchor) odwołanie hipertekstowe do pliku na serwerze lokalnym lub URL (łącznie z protokołem http) do serwera odległego odwołanie do miejsca (zaznaczonego wcześniej) wewnątrz aktualnego dokumentu 39 Przykład wstawianie linków <html><body> <h2>html - Lekcja 1</h2> <ol> <li><a href= "http://webmaster.helion.pl/kurshtml"> Podstawowe znaczniki</a></li> <li><a href="w1.html"> Struktura dokumentu</a></li> </ol> <a href="http://java.sun.com"> <img SRC="duke.gif" border= "0" ALT="Tu jest obrazek" </a> </html> 40 Definiowanie tabeli HTML Część II - Tabele <table>... znacznik tabeli <caption>...</caption> nagłówek tabeli... wiersz <td>... </td> pojedyncza komórka <th>... </th> komórka w postaci nagłówka Przykładowa tabela 2 x 2: <table> <td>... </td> <td>... </td> <td>... </td> <td>... </td> 41 42 7
Przykład prosta tabela <html><body> <h3>tworzenie tabel</h3> <table> <td>ania</td> <td>ola</td> <td>ela</td> <td>adam</td> <td>piotr</td> <td>stanisław</td> </html> 43 Parametry znacznika <table> border - szerokość krawędzi np. border= "0" ukrywa krawędzie, border= "3" cellspacing - szerokość odstępów między komórkami cellpadding - szerokość odstępu pomiędzy wewnętrzną krawędzią komórek a umieszczonych w nich tekstem width - szerokość tabeli (w % lub punktach) np. width="100% " width= "50" height - wysokość tabeli (wartości jak wyŝej) 44 Parametry <td> i width - szerokość komórki (w % lub punktach) np. <td width= " 30% " > height - wysokość wiersza (wartości jak wyŝej) np. <tr height= " 100 " > align - wyrównanie tekstu w komórce w poziomie (wartości: left, center, right) np. <td align="right"> valign - wyrównanie tekstu w komórce w pionie (wartości: top, middle, bottom) np. <tr valign="top"> colspan - połączenie komórek (kolumn) np. <td colspan= " 3 " > rowspan - połączenie komórek (wierszy) np. <td rowspan= " 2 " > 45 Przykład parametry table <html><body> <h3>tworzenie tabel</h3> <table border="1"> <caption> Imiona</caption> <td>ania</td> <td>ola</td> <td>ela</td> <td>adam</td> <td>piotr</td> <td>stanisław</td> </html> 46 Przykład wysokość, szerokość tabeli <table border="10" width="100%" height="60%"> Przykład cellpadding i cellspacing <table border="10" width="150" height="75" cellspacing="6" cellpadding="10"> 47 48 8
Przykład wyrównanie tekstu w wierszach i komórkach <table border="5" width="250" height="200" cellpadding="3"> <caption> Imiona</caption> <td align="left" valign="top">ania</td> <td align="center" valign="middle">ola</td> <td align="right" valign="bottom">ela</td> <tr align="center" valign="top" > <! dalej zawartość komórek bez zmian --> 49 Przykład kolory tła <table border="5" bordercolor="navy"width="250" height="200" cellspacing="10"cellpadding="10" bgcolor="lightyellow"> <caption> Imiona</caption> <tr bgcolor="yellow" > <td bgcolor="red" > Ania</td> <td>ola</td><td>ela</td> <td>adam</td> <td>piotr</td> <td>stanisław</td> 50 Mozilla a IE 51 Przykład scalanie komórek <table border="5" width="100%" height="60%"> <caption> Imiona</caption> <td rowspan="2" >Ania</td> <td>ola</td> <td>ela</td> <td colspan= "2" >Adam</td> <td>piotr</td> <td>stanisław</td> 52 Przykład scalanie komórek <table border="5" width="100%" height="60%"> <caption> Imiona</caption> <td rowspan="2" >Ania</td> <td>ola</td> <td>ela</td> <td colspan="2" >Adam</td> Inne znaczniki Umieszczanie dźwięku na stronie: <a href="http://www.mojserwer.pl/plik.wav"> posłuchaj </a> <embed src="melodia.mid" autostart= " false " loop= " true " width= " 145 " height= " 55 " align= " center " > </embed> - osadzenie obiektu (pliku dźwiękowego), w specyfikacji HTML zastąpiony znacznikiem <object> Znacznik <applet>: <applet code="test.class" codebase="folder" height= " 40 " width= " 400 " > </applet> Uniwersalny znacznik <OBJECT> - wstawia obiekt (np. obrazek, aplet, plik multimedialny.avi,.mov,.mpg ) na stronę WWW, podobny do <embed> <object data="obrazek.gif" type="image/gif"> </object> <object data="test.class"> </object> </html> 53 54 <object data="film.avi" type="application/avi"> </object> 9
HTML Część III - Formularze 55 Wstawianie formularza <form action="plik lub url" method="metoda"> action - określa sposób opracowywania danych pochodzących z formularza (dokąd odesłać dokument) method - określa metodę przesyłania danych do serwera: method="post"- w postaci pliku, method="get" - po dołączeniu do URL-a </form> UWAGA! Wszystkie pola formularza powinny posiadać parametr name, jednoznacznie 56 identyfikujący dane pole Dokument z formularzem <html> <head> <title> Wstęp do tworzenia formularzy </title> </head> <body> <form method= "post" action="mailto:xxx@xxx.xxx" enctype="text/plain"> <!-- w tym miejscu będą wstawiane pola formularza np. pola input, lista select itp. -> </form> </html> 57 Pole formularza <input type=...> Parametr type: <input type="text"/> pole tekstu <input type="password"/> pole tekstowe typu hasło <input type="radio"/> przycisk typu radio <input type="checkbox"/> pole wyboru (check box) <input type="submit"/> przycisk potwierdzający formularz i wysyłający go do serwera <input type="reset"/> przycisk do usuwania zawartości formularza Inne parametry pola input: name, value checked size, maxlength 58 <select name="... " size="n" multiple="multiply"> Pole formularza <select> <option value=" " >wybór1</option> <option value=" " >wybór2</option> <option value=" " selected="selected"> wybór3 </option> </select> lista rozwijana (lub przewijana jeśli określono parametr size) name - nazwa listy size - ilość elementów widocznych na liście przewijanej multiply - moŝliwość wybrania kilku elementów jednocześnie <option> - indywidualne pole wyboru selected pole zaznaczone jako wartość domyślna 59 Pole formularza <textarea> <textarea name="t1" rows="2" cols="3" > Tu moŝna podać tekst domyślny </textarea> 60 10
Pole input typu text i password <input type="text"/> <input type="text" name="adres"/> <input type="text" name="adres" value="wileńska 5"/> Wileńska 5 <input type="text" name="adres" value="wileńska" size= "10"/> Wileńska <input type= "text" name="adres" size= "30" maxlength= "10" /> input type= "password" name="hasło"> - parametry size, value i maxlength jak w polu text) 61 Pole input typu radio <input type="radio" name="ulubiona zupa /> <input type="radio" name="ulubiona zupa"/> <br/> <input type="radio" name="ulubiona zupa"/> <br/> <input type="radio" name="ulubiona zupa"/> <br/> <input type="radio" name="ulubiona zupa" value="zur"/> Ŝurek<br/> <input type="radio" name=" ulubiona zupa " value="ros"/> rosół<br/> <input type="radio" name=" ulubiona zupa " value="bar"/> barszcz<br/> Ŝurek rosół 62 barszcz Przykład pole radio <html><body><p> <form>jaka jest twoja ulubiona zupa?<br/> <input type="radio" name="ulubiona zupa" value="zur"/> Ŝurek <br/> <input type="radio" name="ulubiona zupa" value="ros"/> rosół<br/> <input type="radio" name="ulubiona zupa" value="bar" checked="checked"/> barszcz </form> Przykład pole checkbox KaŜde pole checkbox musi mieć róŝne nazwy name, natomiast wartość value="yes" jest taka sama (odwrotnie jak w przypadku radio): <form><p>jaka jest twoja ulubiona zupa?<br/> <input type="checkbox" name="zur" value="yes" checked="checked" /> Ŝurek <br/><input type="checkbox" name="ros" value="yes" checked ="checked" /> rosół <br/><input type="checkbox" name="bar" value="yes"/> barszczyk </html> 63 64 </form> Pole input typu submit i reset Standardowo: <input type="submit"/> Submit <input type="reset"/> Reset Zmiana tekstu pojawiającego się na przycisku: <input type="submit" value="wyślij" /> Wyslij <input type="reset" value="wyczyść"/> Wyczyść 65 Pole <select> lista select i opcje wyboru: <select name="zupa" > Ŝurek <option> Ŝurek </option> <option> rosół </option> <option> barszczyk </option> <option> pomidorowa </option> </select> wartości dla kaŝdej opcji: <select name="zupa" > barszczyk <option value="zur" > Ŝurek </option> <option value="rosol" > rosół </option> <option value="barszcz" selected > barszczyk </option> <option value="pomidor" > pomidorowa </option> 66 </select> 11
Przykład pole select <html><body><p><form> Jaka jest twoja ulubiona zupa?<br> <select name="zupa" size="3"> <option value="zur" > Ŝurek </option> <option value="rosol" > rosół </option> <option value="barszcz" selected="selected"> barszczyk </option> <option value="pomidor"> pomidorowa </option> <option value="ogorek"> ogórkowa </option> <option value="grzyb"> grzybowa </option> </select></form></html> 67 Pole <button> <button>treść przycisku</button> nowy element HTML 4 - podobny do klasycznego input, ale pozwala wprowadzić do przycisku znacznie więcej elementów (np. wstawiać grafikę): <button>kliknij tutaj<br/><img src="duke.gif"> </button> Atrybuty przycisku: disabled - wyłączenie przycisku (nie działa kliknięcie) name - unikatowa nazwa type - typ przycisku, submit, reset value - przypisanie przyciskowi określonej wartości Funkcjonalność przycisku moŝna rozbudowywać o skrypty 68 Przykład pole button <html><body><p><form> A teraz:<br/> <button name="p1"> kliknij tutaj </button> <br/> lub <br/> <button name="p2"> kliknij tutaj<br/> <img src="duke.gif"> </button> <br/> </form> </html> 69 Przykład formularza 70 Przykład - kod formularza <h3>formularz do składania zamówień</h3> <p><form method="post" action="mailto:xxx@xxx.xx" enctype="text/plain"> Nazwisko, imię: <input name="nazwisko" size= "30"/ ><br/> Ulica: <input name="ulica" size= "30"/ ><br/> Kod, miejscowość: <input name="miejsc" size= "30" /><br/> Adres e-mail: <input name="email" size= "30"/ ><br/> <h4>proszę zaznaczyć zamawiane produkty:</h4> <input name="tp" type="checkbox"/>turbo pascal <input name="c" type="checkbox"/>c++ <input name="java" type="checkbox"/>java <h4>sposób zapłaty:</h4> <input name="zapłata" type="radio" value="euro" />eurocard <input name="zapłata" type="radio" value= "visa" />visa <input name="zapłata" type="radio" value= "przelew" />przelew bankowy<br/> <input type="submit" value="wyślij zamówienie"/> <input type="reset" value="anuluj zamówienie"/> 71 </form> Przykład pola formularza w tabeli <table border= "1"> <td>nazwisko, imię </td> <td><input name="nazwisko" size="30" /> </td> <td>ulica </td> <td><input name="ulica" size ="30"/ ></td> <td>kod, miejscowosć </td> <td><input name="miejsc" size ="30"/ > </td> <td>adres e-mail </td> <td><input name="email" size ="30"/ ></td> 72 12
Formularz z tabelą Dodatkowe znaczniki dla formularzy fieldset - obramowanie pól formularza legend tytuł grupy elementów formularza label - etykieta pola formularza optgroup dla select - listę opcji moŝna dodatkowo grupować 73 74 Przykład <form action="..." method="get"> <fieldset> <!--Pierwsza grupa pól formularza --> <legend>pola tekstowe</legend> <!-- Opis pierwszej grupy pól--> <label for="imie">imie: </label> <!--Etykieta pola tekstowego--> <input type="text" id="imie"/><br/> <label for="nazwisko">nazwisko: </label> <input type="text" id="nazwisko"/><br/> Pole bez label: <input type="text"/><br/> </fieldset> <!-- koniec 1 grupy pól--> <p> 75 Przykład c.d. <fieldset> <!--Druga grupa pól formularza --> <legend>pola wyboru</legend> <!-- Opis drugiej grupy pól--> <select> <optgroup label="systemy operacyjne"> <!--Opcja 1 --> <!--Podopcje dla opcji 1:--> <option label="windows" value="w">system Windows</option> <option label="unix" value="u">system Unix</option> </optgroup> <!-- Koniec opcji 1 --> <optgroup label="procesor"> <!--Opcja 2 --> <!--Podopcje dla opcji 2:--> <option label="intel" value="i">procesor Intel</option> <option label="amd" value="a">procesor Amd</option> </optgroup> <!--Koniec opcji 2 --> </select> </fieldset><!-- koniec 2 grupy pól--> <p> <input type="submit" value=" wyślij dane "/> </form> 76 Przykład Wynik 77 13