Formularze i ramki w HTML

Transkrypt

1 Jolanta Bachan Informatyka

2 Formularz HTML Formularze HTLM, które są umieszczane bezpośrednio na stronie WWW, służą do uzyskiwania informacji o użytkownikach odwiedzających tę właśnie stronę internetową. Formularz ma formę elektronicznej ankiety, którą wypełnia się na stronie. Formularz jest oznaczany znacznikami <form> </form> w kodzie HTML. Przykłady: księga gości, sklepy internetowe Jolanta Bachan 2

3 Elementy formularza HTML zwykły tekst pole tekstowe pole opcji pole wyboru rozwijana lista przewijana lista obszar tekstowy przyciski, np. Submit, Reset Jolanta Bachan 3

4 Elementy formularza HTML Każdy element formularza HTML, oprócz zwykłego tekstu, jest definiowany przez typ (ang. type) nazwę (ang. name) wartość (ang. value) Jolanta Bachan 4

5 Wysyłanie danych na adres Kiedy formularz jest już wypełniony, klikamy na przycisk Wyślij i przeglądarka wysyła dane na adres . Przedtem jednak przeszukuje cały obecny adres URL w poszukiwaniu par name=value. Każda nazwa (name) jest nazwą pola/elementu formularza HTML, a każda wartość (value) jest równoważna z tym, co zostało wpisane lub wybrane przez użytkownika w formularzu. Jolanta Bachan 5

6 Wysyłanie danych na adres <form method="post" enctype="text/plain"> <h3>this form sends an to Jola Bachan's box.</h3> <p>name: <input type="text" name="name" value="yourname" size="20"></p> <input type="submit" value="send"> <input type="reset" value="reset"> </form> Jolanta Bachan 6

7 Wysyłanie danych na adres <form method="post" enctype="text/plain"> <h3>this form sends an to Jola Bachan's box.</h3> <p>name: <input type="text" name="name" value="yourname" size="20"></p> <input type="submit" value="send"> <input type="reset" value="reset"> </form> Jolanta Bachan 7

8 Pole tekstowe <p>this is a text field: <input type="textfield" name="text" size="50" value="the text comes here..."> </p> Jolanta Bachan 8

9 Pole opcji <p>this is a radio button 1: <input type="radio" name="radiobutton1" value="1"> <input type="radio" name="radiobutton1" value="2" checked></p> <p>this is a radio button 2: <input type="radio" name="radiobutton2" value="1"> <input type="radio" name="radiobutton2" value="2"></p> Jolanta Bachan 9

10 Pole wyboru <p>this is a checkbox:<br /> Checkbox 1: <input type="checkbox" name="checkbox1" value="a"> a <input type="checkbox" name="checkbox1" value="b"> b <input type="checkbox" name="checkbox1" value="c"> c </p> Jolanta Bachan 10

11 Rozwijana lista <p>this is a popup menu: <select name="popup"> <option selected>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> </p> Jolanta Bachan 11

12 Przewijana lista <p>this is a scrolling list:<br /> <select name="scrolling" size="3" multiple> <option selected>option 1</option> <option>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select> </p> Jolanta Bachan 12

13 Obszar tekstowy <p><textarea name="comments" rows="5" cols="100">comments: </textarea></p> Jolanta Bachan 13

14 Przycisk <p>this is a button: <input type="button" onclick = "location.href=' echlabs.pl/'" value = "My homepage"> </p> Jolanta Bachan 14

15 Zadanie Dodaj formularz do swojej strony internetowej. Jolanta Bachan 15

16 Ramki Ramki używane są po to, aby w jednym oknie przeglądarki wyświetlić więcej niż jeden dokument HTML (stronę internetową). Każdy dokument HTML jest nazywany ramką i jest niezależny od innych dokumentów. Wady: webmaster musi pracować z więcej niż jednym dokumentem HTML problemy z wydrukowaniem całej strony Jolanta Bachan 16

17 Znaczniki <frameset> i <frame> Znacznik <frameset> definiuje podział okna przeglądarki na ramki podział na kolumny lub wiersze Znacznik <frame> definiuje dokumnety HTML, które mają pojawić się w ramkach <frameset cols="25%,75%"> <frame src="frame_a.html"> <frame src="frame_b.html"> </frameset> Jolanta Bachan 17

18 Ramki Podział okna na ramki może być definiowany w procentach lub w pikselach cols="25%,75%" cols="200,500" cols="25%,*" * - wykorzystuje pozostałą część okna noresize="noresize" atrybut ten wyłącza opcję manualnej zmiany wielkości ramek Jolanta Bachan 18

19 Ważne Nie wolno używać znaczników <body></body> razem ze znacznikami <frameset></frameset> Można zrobić to tylko w połączeniu ze znacznikiem <noframes>, który wyświetla tekst zastępczy, jeśli przeglądarka nie obsługuje ramek Jolanta Bachan 19

20 Użycie znacznika <noframes> <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> <noframes> <body>your browser does not handle frames! </body> </noframes> </frameset> </html> Jolanta Bachan 20

21 Rows & Cols <html> <frameset rows="50%,50%"> <frame src="frame_a.html"> <frameset cols="25%,75%"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </frameset> </html> Frame B Frame A Frame C Jolanta Bachan 21

22 Ramka nawigacyjna, cz. 1 <html> <frameset cols="120,*"> <frame src="menu.html"> <frame src="frame_a.html" name="showframe"> </frameset> </html> Frame A Frame B Frame C Frame A Jolanta Bachan 22

23 Ramka nawigacyjna, cz. 1 <html> <frameset cols="120,*"> <frame src="menu.html"> <frame src="home.html" name="showframe"> menu.html home.html </frameset> </html> Strona główna Porfrolio Kontakt Witajcie na mojej domowej stronie internetowej (Frame A) Jolanta Bachan 23

24 Ramka nawigacyjna, cz. 2 Plik menu.html <html> <a href="home.html" target="showframe">strona główna</a><br> <a href="frame_b.html" target="showframe">portfolio</a><br> <a href="frame_c.html" target="showframe">kontakt</a> </html> Jolanta Bachan 24

25 Zadanie Stwórz stronę internetową według własnego projektu. Strona powinna zawierać: portfolio ramki ramkę nawigacyjną formularz tabele podstronę Kontakt i inne elementy, o których była mowa na zajęciach Jolanta Bachan 25

26 Do zobaczenia za tydzień! Jolanta Bachan 26