O formularzach słów kilka.
Odwiedzając różne strony internetowe często spotykamy się z różnego rodzaju formularzami. Formularze mają specyficzne pola - do wprowadzania tekstu, wyboru, zaznaczenia wielokrotnego (kwadrat) oraz jednokrotnego (kółko), a także listy (rozwijanej czy też przewijanej). Każdy z tych elementów może okazać się przydatny w innym momencie. Standardowym sposobem wykorzystania formularzy są formularze kontaktowe lub formularze z zamówieniem i tym i ostatnimi dziś się zajmiemy.
Wprowadzenie - praktyczne zastosowanie.
Najczęściej spotykanym zastosowaniem formularzy jest formularz kontaktowy lub formularz logowania. Formularz taki można zobaczyć choćby tutaj: http://gs-web.pl/contact . W dzisiejszym tutorialu postaramy się stworzyć stronę internetową (opartą na tabeli) z formularzem zamówień, lecz najpierw trochę teorii:Typy pól formularzy
- <input /> - pole ogólne posiadające atrybuty jak poniżej:
- type - typ pola. Może posiadać następujące wartości
- radio - przycisk opcji (okrągły)
- checkbox - pole wyboru (kwadracik który możesz zaznaczyć)
- text - pole tekstowe
- password - j/w lecz zakropkowane
- submit - przycisk odpowiadający za zatwierdzenie formularza
- name - nazwa pola (dostępna dla każdego typu formularza)
- maxLength - maksymalna długość wpisanych znaków (text/password)
- size - liczba znaków widocznych w polu (raczej text/password)
- value - wartość pola (dla tekstowych - tekst wpisany, dla radio/checkbox wartość jaka zostanie przekazana po zaznaczeniu, dla submit - tekst wyświetlony)
- checked - atrybut który przyjmuje wartość "checked". Oznacza, że standardowo zaznaczony będzie właśnie ten element. (radio/checkbox)
- id - identyfikator. Na tym etapie nie ma większego zastosowania
- <select></select> - lista rozwijana (pole kombi / combobox)
- Atrybut name - nazwa pola (pozwala na identyfikację)
- Znacznik <option></option>, umieszcza się dla każdej pozycji z listy rozwijanej. Musi zostać umieszczony między znacznikami <select></select>. Posiada atrybut value odpowiadający za wartość
- <textarea></textarea> - pole do wpisywania większej ilości tekstu. Atrybuty to:
- name - nazwa (do identyfikacji)
- id
- rows - ilość linii tekstu (widocznych)
- cols - ilość znaków w linii (widocznych)
Formularz oznacza się przy pomocy tagu <form></form> który posiada atrybuty:
- action - będący jaką mają zostać wysłane dane ( zazwyczaj adres mailowy lub URL)
- method - metoda przesłania danych:
- GET - w adresie przeglądarki
- POST - w tzw. sesji (niejawnie).
- name
- id
- enctype - nas na razie będzie interesowała tylko wartość :"text/plain"
Poniżej obiecany listing pokazujący wysyłanie danych na adres email w postaci czystej (bez obróbki).
<!-- przyklad_8_1.html --> <html> <head> <title>Szablon zawierający formularz</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <center> <!-- Formularz--> <form method="post" action="mailto:twoj.mail@gmail.com?subject=Zamówienie" enctype="text/plain"> <fieldset> <legend>Dane główne</legend> Imię: <input type="text" name="imie" value="" size="32" maxLength="32" /><br /> Nazwisko: <input type="text" name="password" value="" size="32" maxLength="32" /><br /> Tajne hasło: <input type="password" name="haslo" value="" size="32" maxLength="32" /><br /> Płeć: Kobieta <input type="radio" name="plec" value="K" /> Mężczyzna <input type="radio" name="plec" value="M" /><br /> </fieldset> <fieldset> <legend>Dane teleadresowe</legend> Kraj pochodzenia: <select name="kraj"> <option value="PL">Polska</option> <option value="EN">Anglia</option> <option value="GB">Niemcy</option> <option value="CZ">Czechy</option> <option value="UA">Ukraina</option> <option value="FR">Federacja rosyjska</option> </select><br /> Numer telefonu: <input type="text" name="numer_telefonu" value="" size="32" maxLength="32" /><br /> </fieldset> <fieldset> <legend>Krótki komentarz tekstowy</legend> <textarea name="Komentarz" rows="16" cols="64"></textarea> </fieldset> <fieldset> <legend>Warunki/postanowienia</legend> <p><input type="checkbox" name="zgoda" value="" size="32" maxLength="32" /> Wyrażam zgodę, na przetwarzanie danych osobowych, itd.</p> </fieldset> <input type="submit" name="submit" value="Wyślij" /><br /> </form> </center> </body> </html>
Kompletny materiał na temat formularzy można znaleźć pod adresem: http://www.kurshtml.edu.pl/html/formularze.html.
Praca domowa:
- Stwórz powyższy formularz podając swój adres email. Porównaj wartości z pól value oraz te z pomiędzy znaczników. Czy widzisz różnice (między wartościami z maila a widocznymi dla klienta strony).
- Posiadając dotychczasową wiedzę stwórz stronę internetową która będzie miała 5 zakładek:
- O mnie
- O firmie
- Oferta
- Galeria zdjęć
- Kontakt
- Każdą z podstron uzupełnij o adekwatną zawartość. Galeria zdjęć to strona na której są osadzone zdjęcia, Kontakt - to formularz kontaktowy dostosowany do profilu Twojej prawdziwej (lub zmyślonej) firmy.
Powodzenia!