Formularze i ramki w HTML - Jolanta Bachan

Formularze i ramki w HTML
Jolanta Bachan
[email protected]
http://www.bachan.speechlabs.pl/
Informatyka
2010-03-05
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:
●
2010-03-05
księga gości, sklepy internetowe
Formularze i ramki w HTML
Jolanta Bachan
2
Elementy formularza HTML
●
zwykły tekst
●
pole tekstowe
●
pole opcji
●
pole wyboru
●
rozwijana lista
●
przewijana lista
●
obszar tekstowy
●
przyciski, np. “Submit”, “Reset”
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
3
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)
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
4
Wysyłanie danych na adres email
●
Kiedy formularz jest już wypełniony, klikamy na
przycisk “Wyślij” i przeglądarka wysyła dane na
adres email. 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.
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
5
Wysyłanie danych na adres email
<form
action="MAILTO:[email protected]"
method="post" enctype="text/plain">
<h3>This form sends an e-mail to
Jola Bachan's email 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>
Formularze i ramki w HTML
2010-03-05
Jolanta Bachan
6
Wysyłanie danych na adres email
<form
action="MAILTO:[email protected]"
method="post" enctype="text/plain">
<h3>This form sends an e-mail to
Jola Bachan's email 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>
Formularze i ramki w HTML
2010-03-05
Jolanta Bachan
7
Pole tekstowe
<p>This is a text field:
<input type="textfield" name="text"
size="50" value="The text comes
here...">
</p>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
8
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>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
9
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>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
10
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>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
11
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>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
12
Obszar tekstowy
<p><textarea name="comments"
rows="5" cols="100">Comments:
</textarea></p>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
13
Przycisk
<p>This is a button:
<input type="button" onClick =
"location.href='http://www.bachan.spe
echlabs.pl/'" value = "My homepage">
</p>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
14
Zadanie
●
Dodaj formularz do swojej strony internetowej.
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
15
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:
●
●
2010-03-05
webmaster musi pracować z więcej niż jednym
dokumentem HTML
problemy z wydrukowaniem całej strony
Formularze i ramki w HTML
Jolanta Bachan
16
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>
●
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
17
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
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
18
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
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
19
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>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
20
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>
2010-03-05
Frame A
Frame
Frame C
B
Formularze i ramki w HTML
Jolanta Bachan
21
Ramka nawigacyjna, cz. 1
<html>
<frameset cols="120,*">
<frame src="menu.html">
<frame src="frame_a.html" name="showframe">
</frameset>
</html>
2010-03-05
Frame A
Frame B
Frame C
Formularze i ramki w HTML
Jolanta Bachan
Frame A
22
Ramka nawigacyjna, cz. 1
<html>
<frameset cols="120,*">
<frame src="menu.html">
<frame src="home.html" name="showframe">
</frameset>
</html>
2010-03-05
menu.html
home.html
Strona
główna
Porfrolio
Kontakt
Witajcie
na mojej
domowej
stronie
internetowej
(Frame A)
Formularze i ramki w HTML
Jolanta Bachan
23
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>
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
24
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
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
25
Do zobaczenia za tydzień!
2010-03-05
Formularze i ramki w HTML
Jolanta Bachan
26