skrypt html

Transkrypt

skrypt html

Wykład 4
Specyfikacje XHTML, formularze
Wytyczne języka XHTML (c.d.)
Atrybut id
Zamiast atrybutu name stosuje się atrybut id. W XHTML 1.0 można go stosować
np. w znaczniku <a>. Jednak, stosując jeszcze atrybut name, warto uzupełniać go o
atrybut id o takiej samej wartości.
Atrybuty puste
W HTML stosowane są atrybuty puste (logiczne), np. <frame noresize>.
W XHTMLu muszą mieć przypisane wartości. Ponieważ nie mają wartości,
przypisuje się im własną nazwę. Po zamianie na XHTML mamy:
<frame noresize=”noresize”> .... </frame>.
Znaki specjalne
Trzeba uważać przy stosowaniu znaków < i & w skryptach i deklaracjach CSS.
Najlepiej zastępować je poprzez < i &.
Skrypty
Każdy skrypt powinien być "otoczony" przez następującą strukturę:
<script type="text/javascript">
<![CDATA[
dopiero tutaj umieść skrypt
]]>
</script>
najlepiej dodać też komentarze, dla starych przeglądarek:
<script type="text/javascript">

</script>
Zofia Kruczkiewicz, Wykład 4, HTML/XHTML
1
Formularze
1.
Formularze – elementy interaktywne stron www
Przeglądarka
Przeglądarka po
przesyła URL
uruchomieniu strony z
formularzem pobiera skryptu serwerowi
dane od użytkownika,
przesyła spakowane
dane oraz URL
serwerowi.
Serwer przesyła
Otrzymaną z powrotem
informację do
informację formatuje i
przeglądarki
wyświetla.
Serwer
wykonuje
skrypt
wskazany
przez URL
Skrypt
przetwarza dane.
Jeśli to konieczne,
korzysta z innych
programów.
Wysyła on dane
po przetworzeniu
do serwera
Inne
programy
Rys.1. Działanie formularza po stronie przeglądarki i skryptu po stronie serwera
Skrypt CGI jest dowolnym programem działającym w obszarze serwera www. Jest on podstawowym interfejsem
komunikacyjnym- zawiera zmienne oraz mechanizmy przesyłania informacji pomiędzy przeglądarką a serwerem.
Skrypt PHP współpracuje dodatkowo z parserem PHP (Hypertext Preprocessor).
2
2. Podstawy działania formularzy
Każdy formularz składa się z dwóch części, połączonych przez kod html:
• kod html formularza, wyświetlany w oknie przeglądarki
• skrypt przetwarzający zawartość formularza
Napis
podany przez
przeglądarkę
Rys.2. Prosty formularz
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Pierwszy formul</title>
</head>
<body>
<h1><font face="Garamond"> Przedstaw się</font></h1>
<form method="post"
action="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz/imie.php">
<p>Podaj swoje dane: <input type ="text" name="imie"></input></p>

<p><input type="submit"></input>

</p>
</form>
</body>
</html>
Rys. 3. Kod prostego formularza z rys.2.
Atrybuty: znacznik <form>...</form>
• method=”post” - dane są przesyłane niezależnie od skryptu, zalecany
• method=”get” – dane są spakowane i dołączone do URL w action, nie zalecany
• action – zawiera adres URL skryptu i wskazuje skryptom, aby zajęły się danymi formularza
• Znacznik <input type= „submit” > - przycisk ten informuje przeglądarkę, aby wysłała
dane z formularza do serwera, atrybut opcjonalny type oznacza typ elementu input
3
formularza. Domyślną wartością atrybutu type jest wartość text (type=”text”).
Rys. 4. Informacja przetworzona przez skrypt php i zwrócona do przeglądarki
<head>
<title>Skrypt pierwszego formularza</title>
</head>
<body>
<?php
echo '<?xml version="1.0" encoding="UTF-8"?'.">\n";
$imie=$_POST[’imie’]; // sposób definiowania zmiennych w stylu średnim, zalecanym od wersji
if (!$imie || $imie =="") //od wersji 4.1.0 PHP
{
print "Nie wiem, jakie masz nazwisko.";
}
else
{
print "Twoje nazwisko " . $imie. "!";
}
?>
<input type="button" onclick="history.back()" value="wracaj"></input>
</body>
</html>
Rys.5. Skrypt php- obsługuje dane formularza z rys. 2, przetwarza je i zwraca do
przeglądarki, która z kolei je formatuje i wyświetla (rys. 4)
4
3. Przykłady formularzy
3.1. Wstawianie kilku danych do formularzy za pomocą elementu input– łańcuchy
(type=”text”) , dane z przycisków radiowych (type=”radio ”) oraz z pól wyboru (
type=”check”)
Rys.6.1. Podstawowy formularz po
wprowadzeniu danych poprawnych
Rys.6.2. Dane niepoprawne
5
Rys.6.3.Widok po akcji z rys. 6.1
Rys.6.4. Widok po akcji z rys.6.2.
6
<head>
<title>Formularz ankiety</title>
</head>
<body>
<h1>Ankieta</h1>
<form method="post"
action="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz/ankieta.php">
<pre>
<i>Podaj nazwisko: </i><input type ="text" name="nazwisko"/>
<i>Podaj imię:
</i><input type ="text" name="imie"/>
</pre> 
<p>Płeć
<input type="radio" name="plec" value="Mężczyzna"/>Mężczyzna
<input type="radio" name="plec" value="Kobieta"/>Kobieta
</p> 
<p><i>Podaj swoje umiejętności<br/>
Zaznacz wszystkie możliwe odpowiedzi</i></p>
<p> 
<input type="checkbox" name="komputer"/>
Znajomość obsługi komputera<br/>
<input type="checkbox" name="prawo_jazdy"/>
Posiadanie prawa jazdy<br/>
<input type="checkbox" name="angielski"/>
Znajomość języka angielskiego<br/>
<input type="checkbox" name="niemiecki"/>
Znajomość języka niemieckiego<br/>
</p>
<p><input type="submit" value="Prześlij dane operacji">
</input>
</p>
</form>
</body>
</html>
Rys.7. Strona formularza z rys. 6.1 i rys. 6.2
7
<head>
<title>Skrypt ankiety1</title>
</head>
<body>
<?php
$imie=$_POST[’imie’]; // sposób definiowania zmiennych w stylu średnim, zalecanym od wersji od wersji 4.1.0 PHP
$plec=$_POST[’plec’];
$nazwisko=$_POST[’nazwisko’];
$komputer=$_POST[’komputer’];
$prawo_jazdy=$_POST[’prawo_jazdy’];
$angielski=$_POST[’angielski’];
$niemiecki=$_POST[niemiecki’];
if (!$nazwisko || $nazwisko==""||!$imie ||
$imie==""||$plec==""||!$plec)
print "Ankieta zawiera usterki";
else
{
echo "Nazwisko: " . $nazwisko;
echo ("<br/>");
echo "Imie: " . $imie;
echo ("<br/>");
echo "Typ: " . $plec;
echo ("<br/>");
if ($komputer)
echo "Pracuje na komputerze<br/>";
if ($prawo_jazdy)
echo " Posiada prawo jazdy<br/>";
if ($angielski)
echo "Zna angielski<br/>";
if ($niemiecki)
echo "Zna niemiecki<br/>";
}
?>
</body>
</html>
Rys.8. Skrypt php (rys.6.3 i rys.6.4) podstawowego formularza (rys.6.1 i rys.6.2.)
8
Domyślne dane przycisków radiowych i pól wyboru atrybutu checked
=”checked”
Rys.9.1. Dane przycisków
plec oraz pól wyboru
(komputer oraz angielski)
wybrane domyślnie przed
akcją użytkownika,
użytkownik podał jedynie
dane do pól nazwisko i imie
Rys.9.2. Widok po
przetworzeniu
9
<head>
</head>
<body>
<h1>Ankieta</h1>
<form method="post"
<pre>
<i>Podaj nazwisko:</i><input type ="text" name="nazwisko"/>
<i>Podaj imię:
</pre>
<p><i>Płeć</i>
<input type="radio" name="plec" value=" Mężczyzna"
checked="checked"/>Mężczyzna
</p>
<p><input type="checkbox" name="komputer" checked="checked"/>
Znajomość obsługi komputera<br/>
<input type="checkbox" name="prawo_jazdy"/>
Posiadanie prawa jazdy<br/>
<input type="checkbox" name="angielski" checked="checked"/>
Znajomość języka angielskiego<br/>
<input type="checkbox" name="niemiecki"/>
Znajomość języka niemieckiego<br/>
</p>
<p><input type="submit" value="Prześlij dane operacji">
</input>
</p>
</form>
</body>
</html>
Rys. 10. Strona formularza z wybranymi przyciskiem radiowym i polami wyboru
za pomocą atrybutu checked =”checked”
10
3.2. Przycisk przywracający wartości domyślne i czyszczący pozostałe pola
formularza, lista pól wyboru -<input type="reset" >
Rys.11.1. Dane ustawione przez
użytkownika
Rys.11.2. Pola danych wyczyszczone
przez przycisk ”Wyczyść dane”
11
<head>
</head>
<body>
<h2>Ankieta</h2>
<form method="post"
<pre>
<i>Podaj imię:
</pre>
<p><i>Płeć:</i>
<input type="radio" name="plec" value="Mężczyzna"
checked="checked"/>Mężczyzna
</p>
<ol>
<li><input type="checkbox" name="komputer" checked="checked"/>
Znajomość obsługi komputera</li>
<li><input type="checkbox" name="prawo_jazdy"/>
Posiadanie prawa jazdy</li>
<li><input type="checkbox" name="angielski" checked="checked"/>
Znajomość języka angielskiego</li>
<li><input type="checkbox" name="niemiecki"/>
Znajomość języka niemieckiego</li>
</ol>
<input type="submit" value="Prześlij dane operacji"/><br/>
<input type="reset" value="Wyczyść dane"/><br/>
</form>
</body>
</html>
Rys.12. Strona formularza z listą pól wyboru <ol>...</ol> oraz przyciskiem
czyszczącym pola danych formularza
<input type="reset" value="Wyczyść dane"><br>
12
3.4. Opcje wyboru w formularzu zastępujące przyciski radiowe do ustawiania
domyślnych opcji wyboru - lista wyboru <selected> oraz opcje wyboru
<option>
Rys.13.1. Opcje wyboru plec
Rys.13.2. Opcje wyboru plec po
rozwinięciu
13
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
D -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
</head>
<body>
<h2>Ankieta</h2>
<form method="post"
<pre>
<i>Podaj imię:
</pre>
<p><i>Płeć:</i>
<select name="plec" size="1">
<option>Mężczyzna</option>
<option>Kobieta</option>
</select>
</p>
<ol>
</ol>
</form>
</body>
</html>
Rys. 14. Lista wyboru <selected> oraz opcje wyboru <option>
14
3.5 Obszary tekstowe w formularzach - <textarea>
Rys. 15.1. Dane wprowadzone dodatkowo do obszaru tekstowego formularza
Rys.15.2. Dane w przeglądarce po przetworzeniu przez skrypt formularza
15
<head>
</head>
<body>
<h2>Ankieta</h2>
<form method="post"
action="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz/ankieta1.php">
<pre>
<i>Podaj imię
</pre>
<p><i>Płeć</i>
<option> Mężczyzna</option>
<option selected="selected">Kobieta</option>
</select></p>
Zaznacz wszystkie możliwe odpowiedzi</i> </p>
<ol>
</ol>
<i>Napisz o swoich dodatkowych umiejętnościach</i><br/>
<textarea name="coment" rows="5" cols="50">
</textarea>
<p>
</p>
</form>
</body>
</html>
Rys.16. Strona formularza z obszarem tekstowym
<textarea name="coment" rows="5" cols="50"> </textarea>
16
<head>
<title>Skrypt ankiety2</title>
</head>
<body>
<?php
$imie=$_POST[’imie’]; // sposób definiowania zmiennych w stylu średnim, zalecanym od wersji od wersji 4.1.0 PHP
$plec=$_POST[’plec’];
$nazwisko=$_POST[’nazwisko’];
$komputer=$_POST[’komputer’];
$prawo_jazdy=$_POST[’prawo_jazdy’];
$angielski=$_POST[’angielski’];
$niemiecki=$_POST[niemiecki’];
$coment=$_POST[’coment’];
if (!$nazwisko || $nazwisko==""||!$imie || $imie==""||$plec==""||!$plec)
print "Ankieta zawiera usterki";
else
{
echo "Nazwisko: " . $nazwisko; echo ("<br/>");
echo "Imie: " . $imie;
echo ("<br/>");
echo "Typ: " . $plec;
echo ("<br/>");
if ($komputer)
echo " Pracuje na komputerze<br/>";
if ($prawo_jazdy)
echo " Posiadanie prawa jazdy<br/>";
if ($angielski)
echo " Zna angielski<br/>";
if ($niemiecki)
echo " Zna niemiecki<br/>";
if ($coment && $coment!="")
echo"$coment<br/>";
}
?>
</body>
</html>
Rys.17. Skrypt php formularza z uwzględnieniem obsługi obszaru tekstowego
17
3.6. Przesyłanie zawartości formularza pocztą elektroniczną – np.
<form method="post" action="mailto:[email protected]"
enctype="text/plain">
Rys.18. Formularz generujący listy przesyłane pocztą elektroniczną
Rys.19. Zawartość formularza przesyłana pocztą elektroniczną
18
<head>
</head>
<body>
<h2>Ankieta</h2>
<form method="post"
action="mailto:[email protected]" enctype="text/plain">

<pre>
<i>Podaj imię
</pre>
<p><i>Płeć</i>
<option> Mężczyzna</option>
<option selected="selected">Kobieta</option>
</select></p>
Zaznacz wszystkie możliwe odpowiedzi</i> </p>
<ol>
</ol>
<i>Napisz o swoich dodatkowych umiejętnościach</i><br/>
<textarea name="coment" rows="5" cols="50">
</textarea>
<p>
</p>
</form>
</body>
</html>
Rys.20. Kod html formularza, którego dane są przesyłane pocztą elektroniczną
19
3.7. Pole typu input z atrybutem password
Rys. 21. Wprowadzone hasło ukryte jedynie przez zamaskowanie znaków
Rys.22. Hasło jest już widoczne podczas przesyłania np. pocztą elektroniczną
<head>
<title>Formularz z hasłem</title>
</head>
<body>
<h1>Proba pola tekstowego input z atrybutem type="password".</h1>
<form method="post"
action="mailto:[email protected]" enctype="text/plain">
<p>Hasło: <input type="password" name="haslo"/></p>
<p> <input type="submit"></input> </p>
</form>
</body>
</html>
Rys. 23. Kod html strony zawierającej hasło maskowane na formularzu
20

skrypt html

Transkrypt

Podobne dokumenty

Ćw.1. Przykładowa walidacja formularza PoniŜsza strona wyświetla

Formularze w PHP dla początkujących Zaawansowane

Największy wspólny dzielnik

Instrukcja instalacji modułu płatności Transferuj.pl