Tworzenie formularza na stronie

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 6017 razy

Tworzenie obszaru formularza za pomocą znacznika <form>

Znacznik <form> jest znacznikiem wewnątrz którego należy wstawiać elementy reprezentujące różnego typu kontrolki. Znacznik ten może przyjmować dwa podstawowe argumenty: avtion oraz method. Są one bardzo ważne a to z tego powodu, że pierwszy określa plik, do którego zostaną wysłane dane z formularza a drugi metodę przesyłania tychże danych.

Oto przykład kodu:

Aby powyższy kod miał jakiś sens powinien zawierać on jakieś kontrolki umożliwiające użytkownikowi przekazanie jakiejś informacji oraz przycisk submit, po którego kliknięciu otworzona zostanie strona send.php, do której przesłane zostaną informacje.

Wypada tutaj opowiedzieć nieco o atrybucie method, otóż gdy parametr ten zostanie ustawiony na get dane zostaną wysłane w adresie strony np. tak: send.php/?date=2016-02-01&nr=10 - w zapisie tym dane podawane są po znaku ? w formie nazwa zmiennej = wartość zmiennej. Oczywiście z poziomu skryptu PHP dane te będą również umieszczone w globalnej tablicy asocjacyjnej $_GET, a przykładowy dostęp do nich będzie np. taki: $_GET['date'].

Możliwe jest również przesyłanie danych metodą post, wtedy to dane te nie zostaną umieszczone w adresie strony (nie będą jawnie widoczne). W takim przypadku dane te zostaną przekazane skryptowi PHP w postaci globalnej tablicy asocjacyjnej $_POST.

Wstawianie pola tekstowego w formularzu

Pole tekstowe wstawia się za pomocą znacznika <input /> z atrybutem type ustawionym na text. Ważne jest również ustawienie atrybutu name, albowiem to on stanowi nazwę klucza do elementu tablicy asocjacyjnej, pod którym zapisane zostaną dane wpisane w tym polu. Oto prosty przykład formularza z takim znacznikiem:

<form> <p>Nazwisko: <input type="text" name="surname"/> Imię: <input type="text" name="name"/></p> </form>

Wynik działania powyższego kodu:

Wstawianie pola do wpisywania hasła

Jak wiadomo wiele stron wykorzystuje mechanizm logowania, w związku z czym warto poznać pole do wpisywania hasła. W tym przypadku również wypada się posłużyć znacznikiem <input /> z atrybutem type ustawionym na password. Oto przykład wstawiania takiego pola:

<form> <p>Hasło: <input type="password" name="password" /></p> </form>

Wynik działania powyższego kodu:

Wstawianie obszaru tekstowego

Obszar tekstowy umożliwia wpisywanie tekstu wieloliniowego. Do wstawienia tego elementu służy znacznik <textarea>, który może mieć ustawione dwa atrybuty: cols - określający szerokość (mierzoną w znakach tekstu) oraz rows - liczba linii tekstu na stronie (mierzone w wysokości tekstu). Przykład kodu dla tego znacznika:

<form> <textarea name="description" cols="50" rows="5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquet justo lectus, nec rhoncus nisi consequat sed. Curabitur venenatis id tortor sed suscipit. Integer eu malesuada purus. Curabitur vel elit ac nisi lobortis congue. Quisque id dolor scelerisque, cursus mi eget, efficitur est. Duis facilisis ligula sit amet sapien lacinia mollis. In consequat sollicitudin libero id pharetra. Quisque viverra fringilla ex vitae lacinia. Mauris leo nunc, ultrices id tortor non, tincidunt faucibus diam. Pellentesque lacinia tincidunt molestie. Vestibulum eu feugiat ligula.</textarea> </form>

Rezultat działania powyższego kodu:

Wstawianie pól wielokrotnego wyboru

Pole wielokrotnego wyboru przypomina kontrolkę checkbox i zasadniczo nie różni się od niej funkcjonalnością. Do wstawiania tego pola służy znacznik input z atrybutem type ustawionym na wartość checkbox. Przy tej kontrolce należy również pamiętać o atrybucie name oraz value, która będzie wartością, jaka zostanie ustawiona w tablicy asocjacyjnej pod kluczem (indeksem) odpowiadającym wartości atrybutu name. Oto przykład zastosowania tego pola:

<form> <p>Wybierz kolory, które lubisz:</p> <p><input type="checkbox" name="color[]" value="blue"/> - niebieski</p> <p><input type="checkbox" name="color[]" value="green"/> - zielony</p> </form>

Wynik działania powyższego kodu:

W powyższym kodzie atrybut name został ustawiony na wartość color[] co oznacza, że do tablicy asocjacyjnej zostanie zwrócona tablica zawierająca wartości wybrane.

Wstawianie pól jednokrotnego wyboru

Pole to przypomina kontrolkę radiobutton i zasadniczo nią jest. Wstawia się ją za pomocą znacznika <input />, dla którego atrybut type musi być ustawiony na wartość ratio. Oto przykłądowy kod:

<form> <p>Wybierz wybierz ulubiony kolor:</p> <p><input type="radio" name="color" value="blue"/> - niebieski</p> <p><input type="radio" name="color" value="green"/> - zielony</p> </form>

Rezultat działania powyższego kodu:

Możliwe jest również ustawienie domyślnie zaznaczonego pola, wystarczy ustawić atrybut checked na wartość checked.

Wstawianie rozwijanej listy wyboru

Kolejnym elementem formularza jest rozwijana lista wyboru, do której wstawiania służy znacznik <select> oraz znacznik wstawiania opcji <option>:

<form> <select name="colors"> <option value="green">zielony</option> <option value="red">czerwony</option> <option value="blue">niebieski</option> </select> </form>

Wynik działania powyższego kodu:

Funkcjonalność tego pola można rozszerzyć ustawiając jej atrybut multiple na wartość multiple. Oto przykład:

<form> <select name="colors[]" multiple="multiple"> <option value="green">zielony</option> <option value="red">czerwony</option> <option value="blue">niebieski</option> </select> </form>

Wynik działania powyższego kodu:

W tej postaci to pole zamienia się z listy rozwijanej do postaci listy wielokrotnego wyboru. Zaznaczać kolejne opcje można z wciśniętym przyciskiem ctrl na klawiaturze.

Pole wyboru plików

Bardzo przydatnym niekiedy elementem jest pole zaznaczania plików do przesłania na serwer. Znacznikiem tego pola jest <input /> z atrybutem type ustawionym na wartości file. W przypadku użycia tego znacznika konieczne jest ustawienie atrybutu enctype na wartość multipart/form-data dla znacznika <form>. Oto przykład:

Rezultat działania:

Wstawianie pola przycisku

Do wstawiania przycisku służy znacznik <button />, a ponieważ istnieje kilka typów przycisków, więc warto się zaznajomić z tego powodu z możliwymi wartościami atrybutu rodzaj:

submit - wysyłanie danych;
reset - resetowanie pól formularza do pierwotnego stany;
button - (domyślna wartość) zwykły przycisk, pod który można podpiąć funkcję JavaScript

Przykład wstawiania przycisku na stronie:

<form> <button type="button">Przycisk</button> </form>

Wynik działania:

Dezaktywacja pól formularza

Czasami zachodzi potrzeba, aby zdezaktywować niektóre pola formularza uniemożliwiając tym samym wprowadzanie w nich zmian. Jest to możliwe za pomocą atrybutu disabled ustawionego na wartość disabled.