Najprostszy sposób tworzenia formularzy

Dzięki formularzom można zdobywać potrzebne nam informacje od odwiedzających naszą stronę WWW, ale tylko wtedy jeśli odwiedzający zechcą nam ich udzielić.

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na sposób tworzenia prostego formularza w dokumencie HTML.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">

<title>Formularze</title>
</head>

<hr>

Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML umożliwiającego utworzenie formularza, dzięki któremu można uzyskać potrzebne informacje od przeglądającego nasz dokument. Poniższy przykład przedstawia najprostszy z możliwych sposób tworzenia formularzy. Dane wpisywane przez użytkownika zostaną wysłane pocztą elektroniczną na adres wskazany jako wartość atrybutu ACTION znacznika FORM.
<font color="#00FF00" size="5"> wyraź swoją opinię na temat ..........</font>
 <form action="mailto:??????????@poczta.onet.pl?subject=Opinie o dzisiejszej młodzieży" method="POST" enctype="text/plain">

Nie wnikając w szczegóły, w tym wypadku atrybuty znacznika form tak definiują akcję, jaka nastąpi po naciśnięciu przycisku submit (wyślij), że formularz zostanie przesłany na adres poczty elektronicznej podany jako wartość atrybutu MAILTO, a wiadomość będzie miała nagłówek taki, jak tekst podany jako wartość atrybutu SUBJECT.

 
<font color="#FFFFFF" size="1"> tu wpisz swoje imię i nazwisko<br> </font>

<input type="text" size="44" maxlength="100" name="Im_i_Nazw" value="imię i nazwisko">
<br>

Znacznik INPUT w tym wypadku powoduje umieszczenie w dokumencie pola tekstowego o szerokości mieszczącej 44 znaki (SIZE="44"), w polu można wpisać maksymalnie 100 znaków. Polu nadana jest etykieta (wartość atrybutu NAME). Pojawi się ona w poczcie otrzymanej. Wartość atrybutu VALUE informuje przeglądarkę, jaki tekst domyślny ma być wyświetlany w tym polu po otwarciu dokumentu.

<font color="#FFFFFF" size="1"> tu wpisz swój adres poczty elektronicznej </font>
<br>
<input type="text" size="40" name="mail" value="@"></p>

Tu nie podano ograniczenia liczby znaków wpisywanych w to pole.

Inne pola w formularzu:

Pole wyboru :

<input type="checkbox" name="Siatkówka" value="on">  Czy trenujesz siatkówkę   (pole - prostokącik) Można zaznaczyć kilka pól)


Przycisk opcji:

<input type="radio" value="p1" checked name="R1">

<input type="radio" value="p1" checked name="R1">

(przycisk okrągły -Można wybrać tylko jedno z podanych pól - np test wyboru

 

<textarea name="Opinia" rows="9" cols="73"> Twoja wypowiedź </textarea> </p>

Znacznik TEXTAREA powoduje wstawienie do dokumentu wielowierszowego pola tekstowego, a wartości atrybutów ROWS i COLS określają rozmiar okna tego bloku, odpowiednio definiując liczby wierszy i kolumn (jeden wiersz - jedna linijka tekstu, jedna kolumna - jeden znak). Między znacznikami TEXTAREA otwierającym i zamykającym umieszcza się tekst, który będzie wyświetlany w tym polu po załadowaniu dokumentu.

 <input type="submit" name="Wysyłanie" value="Wyślij do autora">

Wartość SUBMIT atrybutu TYPE znacznika INPUT powoduje, że w dokumencie pojawi się specjalny przycisk służący do wywołania akcji (wysłanie formularza). Wartość atrybutu NAME jest etykietą tego przycisku. Wartością atrybutu VALUE jest tekst, którym opatrzony zostanie przycisk.

<input type="reset" name="Reset" value="Wyczyść pola">

Tu definiowany jest specjalny przycisk RESET, którego naciśnięcie powoduje wyczyszczenie pól i wprowadzenie do nich ewentualnych tekstów domyślnych; klawisz zostanie oznakowany zgodnie z wartością atrybutu VALUE.

</form>

Koniec definiowania formularza.

 

UWAGA:

Tworzenie formularzy jest dość trudne i skomplikowane, ponieważ wymaga to szerszej wiedzy wykraczającej poza samą znajomość języka HTML. Z tego też powodu zastosowano tu przykład możliwie najprostszy. Prostota powyższego formularza polega przede wszystkim na tym, że obsługiwany jest on przez pocztę elektroniczną, a nie skrypty CGI.

Tekst napisany czerwoną czcionką w powyższym przykładzie nie należy do kodu źródłowego dokumentu HTML.

 

Poniżej możesz poćwiczyć.

W oknie edytora możesz wprowadzić zmiany w tekście kodu HTML, a po naciśnięciu przycisku "Pokaż wygląd strony" zobaczysz efekt działania zmodyfikowanego kodu, który sam dokonałeś pozmieniaj w ramce dane i obejrzyj je.