HTML - formularze i łącza
Podstawy HTML -
dla studentów, którzy nie mają zajęć z Projektowania i programowania serwisów internetowych
I. Formularze w HTML
Formularze służą do komunikacji z użytkownikiem. Umożliwiają umieszczanie na ekranie różnych obiektów, za pomocą których użytkownik może wskazywać swoje preferencje lub wpisywać dane.
Formularze umieszczone są między znacznikami
<FORM> </FORM>
Ponieważ dane wpisane przez użytkownika w formularzu są zwykle wykorzystywane do dalszego przetwarzania (np. na innej stronie WWW, w bazie danych, itp.), należy wskazać nazwę pliku do którego mają być przesłane dane wybrane lub wpisane w formularzu. Nazwę tę podaje się w znaczniku FORM jako atrybut parametru action:
<FORM action=”nazwapliku”>
Istnieją dwie metody wysyłania danych z formularzy:
get (ograniczenie liczby wysyłanych danych do 100 znaków, wartości wszystkich pól z danymi wyświetlane są w linii adresu przeglądarki),
post (nie ma ograniczeń, wartości nie są wyświetlane).
Wybraną metodę wskazujemy po słowie method:
<FORM method=”post” action=”nazwaPliku”>
Elementy formularzy
1. <INPUT> (bez znacznika zamykającego)
Element INPUT pozwala na wprowadzenie danych.
Każdy element INPUT powinien posiadać nazwę, którą podaje się jako parametr name.
Typ elementu INPUT podaje się jako type.
Dostępne typy elementu INPUT:
Text
Przykład:
<INPUT type=”text” name=”nazwa” size=”30” maxlength=”50”>
Użytkownik będzie mógł wpisać tekst o długości maximum 50 znaków, pasek umożliwiający wpisanie będzie miał długość 30 znaków. Element nazywa się nazwa - wpisana wartość zostanie wysłana pod tą nazwą.
W elemencie tym można podać wartość domyślną jako atrybut parametru Value.
Password
Jeśli jako atrybut parametru type zamiast text wpiszemy password, wpisywany tekst nie będzie widoczny na ekranie.
Checkbox
Tworzy pole wyboru.
Przykład:
<INPUT type=”checkbox” name=”nazwa”> Tekst wyświetlony obok przycisku
Utworzone zostanie pole wyboru, w którym użytkownik będzie mógł wstawić znak v wskazując, że wybiera tę opcję. Użycie atrybutu checked sprawi, że opcja będzie domyślnie.
Hidden
Tworzy pole ukryte.
Mechanizm ten jest wykorzystywany, gdy wartość ma zostać przekazana do kolejnego formularza bez jej wyświetlania w obecnym.
Przykład:
<INPUT type=”hidden” name=”nazwa” value=45>
Do kolejnego formularza zostanie przekazana zmienna o nazwa z wartością równą 45. W bieżącym formularzu pole to nie będzie widoczne.
Radio button
Pozwala na wybór jednej z kilku możliwości. Jeśli jedna opcja jest zaznaczona, pozostałe nie mogą być zaznaczone. W przypadku przycisków typu radio nazwa name jest jedna dla nich wszystkich, a każdy z nich posiada inną value. Po wskazaniu odpowiedzi odpowiednia value jest przypisywana do name.
Przykład:
Który kolor jest Twoim ulubionym?
<INPUT type=”RADIO” name=”kolor” value=”czerwony” checked> czerwony
<INPUT type=”RADIO” name=”kolor” value=”zielony”> zielony
<INPUT type=”RADIO” name=”kolor” value=”niebieski”> niebieski
Po wybraniu jednej z opcji kolor przyjmie wartość czerwony, niebieski lub zielony.
File
Umożliwia wybranie pliku z dysku lokalnego, który zostanie przesłany do odbiorcy. Na stronie internetowej pojawia się pole takstowe, a obok niego przycisk Przeglądaj, którego kliknięcie otwiera okno pozwalające wybrać plik.
Przykład:
<input type=”file” size=”20” name=”plik”> Wybierz plik
Submit lub Reset
Przyciski polecenia. Submit wysyła formularz do pliku wskazanego w nagłówku formularza jako action, Reset usuwa wszystkie wprowadzone w formularzu dane.
Przykład:
<INPUT type=”submit” value=”Zatwierdź”>
<INPUT type=”reset” value=”Resetuj”>
2. Listy wyboru:
Listy wyboru pozwalają na wybranie jednej (lub kilku) spośród podanych opcji. Tworzy się je za pomocą znacznika <SELECT> </SELECT>.
Parametry:
Size - lista widocznych elementów
Multiple - na liście będzie można wskazać więcej niż jeden element
Elementy listy tworzymy korzystając ze znacznika <OPTION>
Przykład:
Jaki kolor lubisz najbardziej?
<SELECT name=”lista” size=”4”>
<OPTION value=”czerwony”>czerwony
<OPTION value=”green”>zielony
<OPTION value=”0”>niebieski
<OPTION value=”b”>brązowy
<OPTION value=”czarny”>czarny
</SELECT>
Użycie parametru multiple pozwoli zaznaczyć więcej niż jedną opcję przy pomocy klawiszy Ctrl i Shift.
UWAGA!
Atrybut VALUE wskazuje, jaka wartość zostanie przekazana do dalszego przetwarzania, gdy użytkownik wybierze daną opcję. Wartość atrybutu może być identyczna z tą, którą widzi użytkownik lub być od niej różna.
Jeśli w powyższym przykładzie użytkownik wybierze kolor zielony, do dalszego przetwarzania zostanie przesłana zmienna o nazwie lista z wartością green (lista=”green”).
3. Pola tekstowe
W polu tekstowym użytkownik może wpisać dłuższy tekst, np. jakiś komentarz.
<TEXTAREA> </TEXTAREA>
Do wskazania obszaru wpisu korzystamy z parametrów cols i rows.
Przykład:
<TEXTAREA name=”komentarz” rows=”4” cols=”30”>Wpisz komentarz </TEXTAREA>
Tekst „Wpisz komentarz” pojawi się w polu wpisu jako wartość początkowa.
4. Łączenie tekstu z kontrolką (uwaga, nie we wszystkich przeglądarkach działa)
Umożliwia połączenie tekstu z kontrolką, tak, aby użytkownik mógł dokonać wyboru klikając kontrolkę lub połączony z nią tekst.
Element <LABEL> </LABEL>
Sposób postępowania:
1. W kontrolce użyj parametru id przypisując mu dowolną nazwę.
2. W elemencie <LABEL> użyj parametru for z nazwą przypisaną parametrowi id kontrolki.
3. W elemencie LABEL umieść tekst, który chcesz połączyć z kontrolką.
Przykład:
<INPUT type=”checkbox” name=”nazwa” id=”x”> <LABEL for=”x”>Tekst poł. z kontrolką</LABEL>
II. Odnośniki (łącza)
1. Do strony internetowej
a) odnośniki wewnętrzne:
Na stronie występuje łącze, którego kliknięcie powoduje wyświetlenie innego fragmentu tej samej strony.
Odnośnik taki składa się z dwóch części:
• łącza, które należy kliknąć, aby wyświetlić inną część strony,
• wskaźnika umieszczonego w miejscu, do którego przenoszone jest wyświetlanie po kliknięciu łącza.
Tworzenie:
Łącze, które należy kliknąć:
<A HREF="#nazwa"> Tekst </A>
Uwaga: Przed nazwą musi być #.
Tekst będzie podkreślony. Po kliknięciu tekstu wyświetlanie zostanie przemieszczone do miejsca docelowego (wskaźnika).
Wskaźnik, od którego wyświetlana będzie zawartość strony po kliknięciu łącza:
<A NAME = "nazwa">
Łącze i wskaźnik muszą mieć taką samą nazwę.
b) odnośniki zewnętrzne:
Na stronie występuje łącze, którego kliknięcie otwiera inną stronę o adresie wskazanym w łączu.
Tworzenie:
<A HREF="http://Adres Strony Która Ma Zostać Wyświetlona"> Tekst, który będzie podkreślony </A>
Aby strona była otwierana w nowym oknie przeglądarki, należy użyć parametru target z atrybutem _blank:
<A HREF="http://adresStrony" target="_blank"> Tekst, który będzie podkreślony </A>
2. Odnośniki do pliku
Pod takim odnośnikiem ukryty jest plik, który zostanie zapisany na dysku lokalnym, jeżeli użytkownik kliknie odnośnik.
Tworzenie:
Zamiast adresu strony www należy podać nazwę pliku:
<A href = "folder/nazwaPliku"> Tekst, który będzie podkreślony </A>
UWAGA:
Plik musi mieć ustawione prawo do czytania dla wszystkich użytkowników. Jeśli plik znajduje się w tym samym katalogu, co plik zawierający opis strony internetowej (np. w katalogu public_html), nie trzeba podawać nazwy foldera.
3. Odnośniki do adresu mailowego
Jeżeli osoba przeglądająca stronę internetową kliknie takiego rodzaju odnośnik, uruchomiony zostanie program pocztowy (np. Outlook Express) i będzie można zredagować i wysłać list na adres podany w odnośniku.
Tworzenie:
<A href="mailto:adres e-mail"> Tekst </A>
4. Odnośniki graficzne
W tego rodzaju odnośnikach elementem, który należy kliknąć jest nie tekst, a rysunek.
Tworzenie:
<A href="Łącze"> <IMG src="nazwaPliku.gif"> </A>
W miejsce Łącze należy wstawić adres strony internetowej, odnośnik do pliku, który ma być ściągnięty lub odnośnik do adresu e-mailowego.
Przykład:
<A href = "mailto:aaa@xxx.pl" <IMG src="rysunek.gif"> </A>
Po kliknięciu rysunku otwarty zostanie adres pocztowy a zredagowany list zostanie wysłany na adres aaa@xxx.pl.
Plik rysunek.gif musi być w katalogu public_html i musi mieć ustawione prawo do czytania dla wszystkich.
1