czwartek, 3 kwietnia 2014

HTML - Własny system powiadamiania o zamówieniu ? Nic prostszego!

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
  1. <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
  2. <select></select> - lista rozwijana (pole kombi / combobox)
    1. Atrybut name - nazwa pola (pozwala na identyfikację)
    2. 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ść
  3. <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)
Wymienione powyżej to tylko niektóre (właściwie większość). Każdy z nich zaprezentuję w poniższym listingu.

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"
Idea jest taka, że metody GET używamy wtedy gdy pobieramy jakieś dane ze strony, a metody POST w wypadku wysyłania danych do strony (na maila itp). Nas będzie dotyczył tylko ten pierwszy przypadek. 

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:

  1. 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).
  2. 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
  3.  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!