Formularze
1. Dzięki formularzom, które mogą być umieszczone na stronie internetowej, można zbierać informacje od użytkowników witryny. Internauci wypełniają formularz bezpośrednio na stronie-zebrane w ten sposób informacje mogą zostać przesłane np. poczta elektroniczna.
2. Formularz może zawierać: pola tekstowe, przyciski opcji, pola wyboru, listy rozwijalne. Podstawowe elementy formularza to pola tekstowe i listy oraz przycisk powodujący wysłanie danych.
3. Znacznikiem tworzącym ramy formularza jest <form>…..</form>. Wewnątrz ramy można umieszczać różne elementy tworzące formularz. Większość z nich tworzona jest za pomocą znacznika input.
4. Najczęściej stosowanym elementem jest pole tekstowe (wiersz wprowadzania danych). Ma ono wysokość jednej linii tekstu oraz określona długość. Powstaje w wyniku zastosowania w znaczniku input typu text oraz nazwy charakteryzującej dane pole (np. skrócona treść pytania). Nazwa nie może być długa oraz musi być unikatowa dla danego formularza .
<input type=”text” name=”nazwa”>
<html>
<form>
Prosty formularz logowania: <br><br>
Login: <input type="text" name="login"><br><br>
Hasło: <input type="password" name="haslo">
</form>
</html>
5. Atrybuty znacznika <form>
a. action=”adres e-mail” –ustala adres poczty elektronicznej, na który bedzie wysłany formularz.
b. metod=”post”-określa sposób przekazania informacji do wskazanego skryptu lub pod wskazany adres. Może przyjąć jedną z dwóch wartości:
i. post
ii. getZaleca się stosowanie metody post
c. enctype= ” ”. Ustala on sposób kodowania przesyłanych danych. Wybierany bywa tylko wtedy, gdy formularz przekazywany jest metodą post.
6. Znacznik input służy do wprowadzania danych tekstowych do formularza. Może przyjmować kilka atrybutów:
a. value- treść stanowiąca odpowiedź domyślną, która zostanie dołączona do formularza przy wysyłaniu, jeżeli użytkownik nie wprowadzi własnej treści
b. size- długość pola podawana w liczbie znaków
c. maxlength- maksymalna dopuszczalna liczba znaków, jaka można wprowadzić
d. readonly- tylko do odczytu-tekst wprowadzany w tym polu jako domyślny, nie może zostać zmodyfikowany (przyjmuje wartość-readonly=” readonly”)
e. diable-blokada pola( przyjmuje wartość diable =” diable”)
f. type- określa typ pola
<form action="mailto:nauka@gmail.com" method="post">
Podaj swój adres e-mail:
<input name="adres" value =" ">
<input type="submit" value="Wyslij">
7. Typy pól. Pola mogą przyjmować następujące wartości
a. type=”text” –pole tekstowe
<b>Podaj swoje nazwisko i imie:</b>
<input type="text" name="nazwisko" value=" " size="30">
Dół formularza
b. Pole wyboru (pole typu checkbox) to mały kwadracik, który za pomocą myszki można zaznaczać i odznaczać. Pozwala to na wybranie kilku odpowiedzi z wszystkich możliwych.
<input type=”checkbox” name=”nazwa” value=”wartośc”>
Podaj swoje zainteresowania:<br><br>
<input type="checkbox" name="hobby" value= "muzyka"> muzyka <br>
<input type="checkbox" name="hobby" value= "sport"> sport <br>
<input type="checkbox" name="hobby" value= "taniec"> taniec<br>
<input type="checkbox" name="hobby" value= "film"> film<br>
Początek formularza
Podaj swoje zainteresowania:muzyka sport taniecfilm
c. Pole opcji (pole typu radio) to małe kółeczko, które można zaznaczyć. W przeciwieństwie do pola wyboru można zaznaczyć tylko jedną odpowiedz
<input type=”radio” name=”nazwa” value=”wartośc”>
Podaj swoje wykształcenie:<br><br>
<input type="radio" name="wyksz" value="podst">podstawowe<br>
<input type="radio" name="wyksz" value="sredn">średnie<br>
<input type="radio" name="wyksz" value="wyz">wyższe
Podaj swoje wykształcenie:podstawoweśredniewyższe
d. type=”password” –pole wprowadzania hasła (wprowadzane znaki nie są widoczne)
Podaj hasło:
<input type="text" name="password" name="haslo" size="10" maxlength="14">
e. type=”file” –pozwala dołączyć do formularza pli, który po zatwierdzeniu formularza zostanie przesłany na serwer. Przy tworzeniu pola typu file musi powstać pole, gdzie użytkownik może wpisać ścieżkę dostępu i nazwę pliku, oraz przycisk Przeglądaj , za pomocą którego użytkownik może wyszukać plik. Formularz zawierający pole tego typu musi być przekazywany metodą post i należy ustawić sposób kodowania danych na enctype=”multipart/form-data”.
<form enctype=”multipart/form-data” action="mailto:nauka@gmail.com" method="post">
Wyslij ten plik
<input type=" file" name="plik" size="30" >
<input type="submit" value="Przeglądaj"">
Przykład ( -twarda spacja- nie zdarzy się tak, że pierwszy wyraz znajdzie się na końcu linii, a drugi na początku następnej).
<body>
<b><font size="4">Formularz kontaktowy:</font></b><br><br>
<b>Podaj swoje nazwisko i imię:</b>
<input name="adres" value= "" size="30"><br><br>
<b><font size="4">Wykształecenie:</font><br><br>
<input type="radio" value="podstawowe" name="grupa_opcji" checked>
Podstawowe<br>
<input type="radio" value="średnie" name="grupa_opcji" checked>
średnie<br>
<input type="radio" value="wyższe" name="grupa_opcji" checked>
wyższe<br>
<input type="checkbox" name="opcje" maxlength="1">
Zgaadzam się na przetwarzanie danych osobowych. <br><br>
<input type="submit" value="Wyslij">
<input type="reset" value="Wyczyść">
</body>
8. Etykieta-to opis pola, który wyświetla się na formularzu i nie jest związany z tym polem. Wstawiamy ją używając znacznika <label>
<label> <input type=”checkbox” name=”nazwa” value=”wartość” >Etykieta pola</label>
<label> <input type=”radio” name=”grupa opcji” value=”podstawowe” checked >podstawowe</label><br>
<label> <input type=”radio” name=”grupa opcji” value=”średnie” checked >średnie</label><br>
<label> <input type=”radio” name=”grupa opcji” value=”wyższe” checked >wyższe</label><br><br><br>
<label> <input type=”checkbox” name=” opcje”maxlength="1'</label><br>
9. Grupowanie elementów formularza
Jeżeli formularz zawiera wiele elementów różnego rodzaju, można te elementy pogrupować za pomocą znacznika <fieldset>. Powinien on znaleźć się za znacznikiem <form>, ale przed znacznikami definiującymi poszczególne elementy.
Do podpisania grupy stosuje się znacznik <legend>, w którym definiujemy nagłówek grupySposób grupowania elementów;
<fieldset><legend align=”kierunek”>
</legend>Definiowanie elementów grupy
</fieldset>
<body color=#dfdfdf">
<b><font size="4">Dane:</font></b><br><br>
<fieldset>
<legend align="left">Wykształcenie:</legend><br>
<label> Pracuję: <input type=”checkbox” name=” opcje ”maxlength="1"</label><br><br>
10. Lista rozwijalna- umożliwia wybór tylko jednej odpowiedzi. Składa się ona z dwóch znaczników. Znacznik <select>…… </select> stanowi ramę każdej listy. Każda z możliwych odpowiedzi znajduje się wewnątrz znaczników <option>…</option>. Liczba odpowiedzi jest dowolna.
<select name=”nazwa”>
<option> odpowiedz 1 </option>
<option> odpowiedz 2 </option>
…………
</select>
Podaj wiek: <br><br>...
dariuszsopiarz