Obsługa informatyczna w turystyce

Temat: Źródła informacji turystycznej - formularz w dokumencie HTML

Strony internetowe tworzymy, korzystając z języka HTML. Do pisania kodu w tym języku nie będzie ci potrzebny dostawca usług internetowych ani nawet podłączenie do Internetu. Aktualnie powszechnie stosowanym standardem jest HTML5.
Dokument HTML to zwykły plik tekstowy, który możesz tworzyć i modyfikować praktycznie w każdym edytorze tekstu. Dla systemów Windows i Linux może to być wspomniany przed chwilą - Notepad++, dla systemu MacOS – Text Edit czy Sublime Text, dla systemu Android – DroidEdit.

Przydatne linki i programy:

Formularze

Każdy formularz rozpoczyna się od znacznika <form>, kończy zaś znacznikiem zamykającym </form>. Pomiędzy tymi znacznikami znajdują się pola formularza: tekstowe, wyboru, listy, przyciski, itp. Najważniejszym jest przycisk powodujący wysłanie danych.

Przykłady:

wysłanie zawartości pól formularza pod wskazany adres e-mail

<form action="mailto:informatyka@tkk.edu.pl" method="POST">
     <!-- pola formularza -->
</form>

lub wysłanie zawartości pól formularza pod wskazany adres e-mail ze wskazanym tematem wiadomości

<form action="mailto:informatyka@tkk.edu.pl?subject=temat" method="POST">
    <!-- pola formularza -->
</form>

lub przesłanie danych do skryptu przetwarzającego np. skrypt_form.php

<form action="http://localhost/skrypty/skrypt_form.php" method="POST">
    <!-- pola formularza -->
</form>

Pola INPUT

Znacznik <INPUT> powinien posiadać następujące atrybuty:

name - określa nazwę danego pola oraz nazwę zmiennej, do której zostaje podstawiona wprowadzona wartość. Każde pole powinno posiadać ten atrybut i musi on być unikalny w skali dokumentu.
id - identyfikator pola.
value - określa domyślną wartość pola.
size - określa liczbę znaków pola.
maxlength - maksymalna ilość znaków pola.
type - typ pola.

Typy pól INPUT

TEXT <input type="text" name="uzytkownik"> tworzy wejściowe pole tekstowe.

PASSWORD <input type="password"> tworzy pole hasła - wprowadzane znaki zastępowane są gwiazdkami.

BUTTON <input type="button" value="przycisk"> tworzy przycisk domyślnie nie wywołuje żadnej akcji - musi być odpowiednio zaprogramowany.

SUBMIT <input type="submit" value="wyślij"> tworzy przycisk wysyłający dane z pól formularza.

RESET <input type="reset"> kasuje zawartość pól formularza.

CHECKBOX <input type="checkbox" name="wybor"> tworzy pola wyboru wielokrotnego.

RADIO <input type="radio"> tworzy pola jednokrotnego wyboru.

FILE <input type="file"> Umożliwia wysyłanie plików na serwer.

Pole SELECT

Tworzy listę rozwijalną i zachęca do wybrania jednej lub kilku z nich.

przykład:
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>



Pole TEXTAREA

<textarea name="opis" rows="10" cols="30">
  Tu może być
  wiele
 vlinii
  tekstu.
</textarea>

Przykład 1.

Imię: Nazwisko:

Miasto:

Płeć: kobieta mężczyzna

Ulubione potrawy: barszcz łosoś inna


           
Kod źródłowy powyższego formularza form1.html 

<form action="mailto:ktos@poczta.pl" method="post">
Imię: <input type="text" name="imie">  Nazwisko: <input type="text" name="nazwisko">
Miasto: <select name="miasto">
        <option> </option>
	<option>Ruda Śląska</option>
        <option>Bytom</option>
    	<option>Piekary Śl.</option>
    	<option>Chorzów</option>
   	<option>Zabrze</option>
	<option>Tarnowskie Góry</option>
  	</select><br><br>
Płeć:
  <input type="radio" name="plec" value="k"> kobieta
  <input type="radio" name="plec" value="m"> mężczyzna
  <br><br>
Ulubione potrawy:
  <input type="checkbox" name="potrawa" value="b"> barszcz
  <input type="checkbox" name="potrawa" value="l"> łosoś
  <input type="checkbox" name="potrawa" value="i"> inna<br><br>
  <textarea name="tekst" rows="10" cols="60">
    Wpisz jakiś tekst
  </textarea><br>
  <input type="reset" name="reset" value="* resetuj *">
             
  <input type="submit" value=" wyślij dane >>">
</form>


Ćwiczenie:
Wykorzystując podstawowe znaczniki HTML stwórz i rozbuduj formularz wg wzoru poniżej. Pamiętaj, aby nazwa strony była zapisana z rozszerzeniem .html tak, aby integrowała się z domyślną przeglądarką.



Powinieneś umieć: