xhtml, css i javascript. pierwsza pomoc helion.pdf

(44504 KB) Pobierz

890157680.145.png

XHTML, CSS i JavaScript

24. Jak zdeiniować tabelę w XHTML? / 62

25. Jak wykorzystać tabelę do budowy strony WWW? / 65

26. Jak stworzyć układ strony o postaci tabeli z wykorzystaniem

wyłącznie CSS? / 68

27. Jak umieścić na stronie WWW formularz? / 75

28. Jak wyświetlić na ekranie komunikat z wykorzystaniem

JavaScript? / 81

29. Jak wyświetlić element w oknie pop-up za pomocą

JavaScript? / 85

30. Jak przygotować galerię obrazów? / 87

31. Jak zdeiniować menu rozwijane za pomocą JavaScript? / 90

Spis treści

890157680.151.png

890157680.155.png

890157680.164.png

890157680.001.png

890157680.012.png

890157680.023.png

890157680.034.png

890157680.045.png

890157680.056.png

890157680.064.png

890157680.070.png

890157680.077.png

890157680.080.png

890157680.090.png

890157680.101.png

890157680.112.png

890157680.115.png

890157680.116.png

890157680.117.png

890157680.118.png

890157680.119.png

890157680.120.png

890157680.121.png

890157680.122.png

890157680.123.png

890157680.124.png

890157680.125.png

XHTML, CSS i JavaScript

F ormularze pozwalają autorowi strony zbierać dane od osób

27. Jak umieścić

na stronie WWW

formularz?

odwiedzających jego serwis WWW i automatyzować kon-

takty. Mają postać elektronicznej ankiety, którą wypełnia się

wprost na stronie.

Formularz deiniujemy za pomocą elementu form z odpo-

wiednimi atrybutami, w którym umieszczamy pola formu-

larza:

<form action=" plik_docelowy " method="post">

zawartość formularza

</form>

Pamiętaj, aby wszelkie zdania w formularzu, pola, zestawy

opcji itp. obejmować jakimiś pojemnikami, na przykład znacz-

nikami akapitu <p> czy bloku <div> .

W tym przykładzie przygotujemy formularz, który pozwoli

na wysyłanie za pomocą poczty elektronicznej wprowadzanych

przez użytkownika informacji. W związku z tym w deinicji

formularza powinniśmy umieścić specjalne polecenie wysyłania

formularza na wskazany adres:

action=="mailto:autor_strony@adres.pl".

Należy również określić sposób komunikowania się prze-

glądarki użytkownika z serwerem, a więc wskazać w kodzie,

czy przesyła ona jakieś informacje, czy też je pobiera. Do wybo-

ru mamy dwie metody — post lub get — zastosujemy metodę

post .

Aby zebrane z formularza dane były w czytelnej postaci,

powinniśmy zastosować parametr enctype="text/plain" . Tak

więc znacznik <form> ma teraz postać:

<form enctype="text/plain" action="mailto:autor_strony@adres.

pl?subject=Ankieta" method="post">

Formularz może zawierać różnego typu pola, w które będą

wprowadzane dane — na przykład takie jak imię i nazwi-

sko, nazwa produktu, informacje o użytkowniku itp. Pola te

są podzielone na kilka podstawowych grup:

Pole input , z dodatkowymi parametrami type , name

i value , służy do tworzenia pól, w których czytelnik

strony może wpisać informację lub wybrać jakąś opcję.

75

890157680.126.png

890157680.127.png

890157680.128.png

890157680.129.png

890157680.130.png

890157680.131.png

890157680.132.png

890157680.133.png

890157680.134.png

890157680.135.png

890157680.136.png

890157680.137.png

890157680.138.png

890157680.139.png

890157680.140.png

890157680.141.png

890157680.142.png

890157680.143.png

890157680.144.png

890157680.146.png

890157680.147.png

890157680.148.png

890157680.149.png

890157680.150.png

890157680.152.png

890157680.153.png

890157680.154.png

890157680.156.png

890157680.157.png

890157680.158.png

890157680.159.png

890157680.160.png

890157680.161.png

890157680.162.png

890157680.163.png

890157680.165.png

890157680.166.png

890157680.167.png

890157680.168.png

890157680.169.png

890157680.170.png

890157680.171.png

890157680.172.png

890157680.173.png

890157680.174.png

890157680.002.png

890157680.003.png

890157680.004.png

890157680.005.png

890157680.006.png

890157680.007.png

890157680.008.png

890157680.009.png

890157680.010.png

890157680.011.png

890157680.013.png

890157680.014.png

890157680.015.png

XHTML, CSS i JavaScript

Oto przykład:

<input type="text" name="nazwa_pola" value="wartość początkowa"

size="rozmiar pola w znakach" maxlength="maksymalny rozmiar

pola">

lub

<p><input type="checkbox" name="wybor" value="tak"> Tak</p>

Pole select służy do tworzenia rozwijalnych list z opcja-

mi, spośród których czytelnik wybiera interesujące

go pozycje:

<p><strong>Wybierz produkt:</strong></p>

<div>

<select name="warzywa" size="3">

<option> Avocado

<option> Cebula

<option> Ogórek

<option> Marchew

<option> Seler

</select>

</div>

textarea jest poleceniem pozwalającym tworzyć większe

pole tekstowe z przeznaczeniem na dłuższy komentarz

czytelnika:

<form action="mailto:autor_strony@adres.pl">

<p><b>Wpisz swoje uwagi:</b></p>

<p><textarea name="Uwagi" rows="5" cols="55"></textarea></p>

</form>

76 27. Jak umieścić na stronie WWW formularz?

890157680.016.png

890157680.017.png

890157680.018.png

890157680.019.png

890157680.020.png

890157680.021.png

890157680.022.png

890157680.024.png

890157680.025.png

890157680.026.png

890157680.027.png

890157680.028.png

890157680.029.png

890157680.030.png

890157680.031.png

890157680.032.png

890157680.033.png

890157680.035.png

890157680.036.png

890157680.037.png

890157680.038.png

890157680.039.png

890157680.040.png

890157680.041.png

890157680.042.png

890157680.043.png

890157680.044.png

890157680.046.png

890157680.047.png

890157680.048.png

890157680.049.png

890157680.050.png

XHTML, CSS i JavaScript

Dodatkowo możemy wydzielić określone pola poprzez

zastosowanie do nich grupującego obramowania. Służy do tego

element ieldset :

<form>

<ieldset>

zawartość

</ieldset>

<ieldset>

zawartość

</ieldset>

</form>

Przydatny będzie także opis grupy pól — wprowadza go ele-

ment legend , na przykład:

<legend>Formularz - stosowane przeglądarki</legend>

Do formularza trzeba jeszcze dodać przycisk, który pozwoli

wysłać informacje podane przez czytelnika strony do jej autora.

Służy do tego polecenie input z atrybutem type="submit" . Gdy

użytkownik kliknie ten przycisk, wszystkie podane przez niego

informacje (ciągle zakładamy, że posługujemy się tu funkcją

poczty elektronicznej), jak zaznaczone opcje, wypełnione pola

tekstowe czy wybrane pozycje na liście, zostaną przesłane

w liście do autora:

<input type="submit" value="Wyślij do nas informacje">

Teraz czas na zastosowanie podanych tu informacji w prak-

tyce.

77

27. Jak umieścić na stronie WWW formularz?

890157680.051.png

890157680.052.png

890157680.053.png

890157680.054.png

890157680.055.png

890157680.057.png

890157680.058.png

890157680.059.png

890157680.060.png

890157680.061.png

890157680.062.png

890157680.063.png

890157680.065.png

890157680.066.png

890157680.067.png

890157680.068.png

890157680.069.png

890157680.071.png

890157680.072.png

890157680.073.png

890157680.074.png

890157680.075.png

890157680.076.png

890157680.078.png

890157680.079.png

890157680.081.png

890157680.082.png

890157680.083.png

890157680.084.png

890157680.085.png

890157680.086.png

890157680.087.png

890157680.088.png

890157680.089.png

890157680.091.png

890157680.092.png

890157680.093.png

890157680.094.png

890157680.095.png

890157680.096.png

890157680.097.png

890157680.098.png

890157680.099.png

890157680.100.png

890157680.102.png

890157680.103.png

890157680.104.png

890157680.105.png

890157680.106.png

890157680.107.png

890157680.108.png

890157680.109.png

890157680.110.png

890157680.111.png

890157680.113.png

890157680.114.png

Plik z chomika:

Inne pliki z tego folderu:

autocad 2005 i 2005 pl full.pdf (22413 KB)
intensywny kurs przywództwa. szybki program rozwoju zdolności przywódczych full.pdf (9732 KB)
płytki umysł. jak internet wpływa na nasz mózg helion.pdf (34503 KB)
analiza statystyczna. microsoft excel 2010 pl cała książka.pdf (27781 KB)
matematyczne-szkielko-i-oko.-mniej-i-bardziej-powazne-zastosowania-matmy full scan.pdf (28897 KB)

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin