formularze+ramki

Formularze
Pobierają dane od użytkownika strony i wysyłają je do przetworzenia na
serwerze (gdzie potrzebne są skrypty, które dane przetworzą ‐ najczęściej
stosuje się język PHP lub JSP)
<form action=”plik” method=”get/post”>
… </form>
‐ action ‐ określa adres strony, która ma odebrać dane. Pusta wartość oznacza tę samą stronę
‐ method ‐ określa, jaką metodą dane zostaną przesłane
,j ą
ą
ąp
‐ get – dane dołączone do adresu strony, widoczne, ograniczona długość
‐ post – dane niewidoczne
Pole tekstowe
Pole tekstowe
‐ Pozwala na wprowadzenie jednej linijki tekstu
<input type=”text” name=”nazwa” value=”wartosc” maxlength=”7”/>
g
/
‐ type – określa typ pola (text ‐ tekstowe)
‐ nazwa – określa nazwę pola, pod jaką dane odczyta serwer
‐ value – wartość początkowa pola
‐ maxlength – określa ile znaków można wprowadzić
Pole typu password
Pole typu password
‐ Wpisywany tekst będzie zamaskowany
Wpisywany tekst będzie zamaskowany
<input type=
type=”password”
password name=
name=”nazwa”
nazwa value=
value=”wartosc”
wartosc maxlength=”7”/>
Pole ukryte
Pole ukryte
‐ Pole niewidoczne dla użytkownika
Pole niewidoczne dla użytkownika
<input type="text" name="nazwa1" value="wartosc" maxlength="7"/>
<input type=
type="password"
password name=
name="nazwa2"
nazwa2 value=
value="wartosc"
wartosc maxlength=
maxlength="7"/>
7 />
<input type="hidden" name="nazwa3" value="wartosc"/>
Pole wyboru
Pole wyboru
‐ Pozwala udzielić odpowiedzi „tak” lub „nie” <input type="checkbox" name="pole1" checked="checked" />
<input type="checkbox" name="pole2" />
<input type="checkbox" name="pole3" checked="checked" />
" h kb "
" l " h k d " h k d" /
‐ Wartość jest przesyłana tylko wtedy, gdy zostanie zaznaczone. ‐ Zaznaczone pole uzyskuje się poprzez dodanie atrybutu checked.
Pole opcji
Pole opcji
‐ Pozwala wybrać tylko jeden z elementów o takiej samej nazwie
<input type="radio" name="ocena" value="bdb" />5
<input type="radio" name="ocena" value="db" />4
<input type="radio"
<input type=
radio name=
name="ocena"
ocena value=
value="dst
dst„ checked=
checked=”checked”/>3
checked />3
<input type="radio" name="ocena" value="b.bdb" />6
‐ Wartość jest przesyłana tylko wtedy, gdy zostanie zaznaczone. ‐ Zaznaczone pole uzyskuje się poprzez dodanie atrybutu checked.
Listy opcji
Listy opcji
‐ Pozwala wybrać tylko element (lub elementy) z listy rozwijanej
<select name="owoce” multiple=”yes”>
l t
"
”
lti l ” ”
<option value=”1”>jabłko</option>
<option value=”2”>gruszka</option>
<option value=”3”>śliwka</option>
<option value=”4”>banan</option>
<option value=”5”>nektarynka</option>
</select>
option
o – kolejne elementy listy
o ej e e e e ty sty
‐ opt
‐ value – przesłana wartość do serwera
‐ multiple ‐ pozwala wybrać kilka elementów
pozwala wybrać kilka elementów
Listy opcji
Listy opcji
‐ Pozwala wybrać tylko element (lub elementy) z listy rozwijanej
<select name="owoce”>
l t
"
”
<optgroup label="polskie">
<option>jabłko</option>
<option>gruszka</option>
<option>śliwka</option>
</optgroup>
<optgroup label="obce">
<option>banan</option>
<option>nektarynka</option>
option nektarynka /option
</optgroup> </select>
‐ optgroup
t
– pozwala podzielić elementy na grupy
l
d i lić l
t
‐ label – etykieta grupy
Listy opcji
Listy opcji
‐ Pozwala wybrać tylko element (lub elementy) z listy rozwijanej
<select name="owoce” size=”5”>
l t
"
” i ”5”
<optgroup label="polskie">
<option>jabłko</option>
<option>gruszka</option>
<option>śliwka</option>
</optgroup>
<optgroup label="obce">
<option>banan</option>
<option>nektarynka</option>
option nektarynka /option
</optgroup> </select>
‐ size
i – ilość widocznych elementów listy
il ść id
h l
tó li t
Wysłanie formularza
Wysłanie formularza
‐ Tworzy przycisk, którego wciśnięcie spowoduje wysłanie formularza. <input type="text" value="wartość" name="nazwa1"/>
i
tt
"t t" l
"
t ść"
"
1"/
<input type="submit" value="wysyłanie" name="nazwa2"/>
‐ value – etykieta na przycisku
‐ name – jeśli istnieje to również wysyłana wartość w formularzu
Ramki
‐ umożliwiają podział ekranu przeglądarki na części (okienka), za zawartość których odpowiadają różne pliki
których odpowiadają różne pliki
<frameset cols="200px,*,200px” bordercolor=”green" >
<frame src="plik1
<frame src=
plik1.html
html"/>
/>
<frame src="plik1.html"/>
<frame src="plik1.html"/>
</frameset>
/f
t
‐ cols – określa liczbę kolumn
określa liczbę kolumn
‐ bordercolor – kolor obramowania ramek
‐ border – określa grubość ramek
<frameset rows="200px,*,200px”>
a eset o s 00p , , 00p
<frame src="plik1.html"/>
<frame src="plik1.html"/>
<frame src="plik1
<frame src=
plik1.html
html"/>
/>
</frameset>
<frameset cols="200px,*,200px“ >
<frame src="plik1.html"/>
<frameset rows="200px,*,200px”>
p , ,
p
<frame src="plik1.html"/>
<frame src="plik1.html"/>
<frame src="plik1.html"/>
<frame src
plik1.html />
</frameset>
<frame src="plik1.html"/>
</frameset>
‐ rows – określa liczbę wierszy
<frame>
‐ określa właściwości poszczególnych ramek
<frame src=“plik.html“ name="nazwa1" scrolling=”auto" noresize="noresize" marginwidth="x" marginheight="y" frameborder=”0”/>
‐ src – nazwa pliku otwieranego w ramce
‐ name – nazwa ramki
‐ scrolling (yes/no/auto) (yes/no/auto) – pozwala na przewijanie zawartości ramki
pozwala na przewijanie zawartości ramki
‐ noresize="noresize" – zabrania na „ręczną” zmianę rozmiaru ramki
‐ marginwidth, marginheight – dodatkowe marginesy
‐ frameborder – wielkość obramowania
wielkość obramowania
‐ wczytywanie strony do ramki
<a target=”nazwa
g
ramki" href=”adres strony">Opis
y
p linku</a>
<meta>
‐ służą do umieszczania informacji o samym dokumencie lub nagłówków HTTP w foramcie klucz klucz ‐ wartość
<meta name="description" content=”strona przedmiotu" />
‐ name – nazwa klucza
kl
‐ content ‐ wartość klucza
‐ description – krótki opis zawartości dokumentu
<meta name=„author" content=”Miś Colabor" />
‐ author – informacja o autorze strony
informacja o autorze strony
<meta http‐equiv="Content‐Type" content="text/html; charset=ISO‐8859‐2">
‐ określenie kodowania znaków
<meta http‐equiv="Refresh: 5">
p q
‐ określenie co ile sekund przeglądarka powinna odświeżyć zawartość strony
<link>
‐ pozwala dołączyć arkusz ze stylami
<link rel="stylesheet" href="arkusz.css" type="text/css" />
li k l " t l h t" h f " k
"t
"t t/ " /
<style>
<style type="text/css">
element { reguła: wartość}
</style>
<script>
‐ umożliwia wstawianie skryptów najczęściej napisanych w JavaScript