Formularze – wstęp
Formularze służą do przesyłania danych wejściowych przez użytkowników danej witryny. Powinny być zawsze rozpoczęte od znacznika <form> i zakończone </form>. W zależności, między innymi od atrybutu action, może on służyć do komunikowania się z pocztą, skryptem JS czy PHP.
Atrybut action może przyjąć wartości, takie jak adres pliku .html lub .php czy też wysłać wiadomość pocztą za pomocą wartości mailto:adres@email, chociaż jest ona rzadko używana.
Głównym elementem składowym formularza jest pole <input>. Można do niego zdefiniować etykietę za pośrednictwem znacznika <label>. Pole odpowiada za komunikację pomiędzy klientem a przeglądarką i serwerem. Do grupowania wejść <input> służy <fieldset>, wraz z jego znacznikiem tytułu <legend>.
Podstawowy formularz obsłużony przez JavaScript Comodo Dragon (Chrome) – plik formularz.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"><title>Formularze</title> </head> <body> <form name="form" action="formularz.html" method="post" onsubmit="alertInput()"> <fieldset> <legend>Simple form</legend> <input type="text" name="form_input" value="Say something!"> <input type="submit" name="" value="Send Me!"> </fieldset> <script type="text/javascript"> function alertInput(){ var formIn = document.forms["form"]["form_input"].value; alert(formIn); } </script> </form> </body> </html>
Formularze – komunikacja
Wejścia formularzy mogą służyć do komunikacji zarówno pocztowej, ze skryptami wykonywanymi po stronie serwera, jak i również ze skryptami wykonywanymi po stronie klienta.
Zarówno język PHP jak i JavaScript do komunikacji z formularzami używają wartości atrybutu name, stosowanego dla <form> oraz <input>. Określa on nazwę, pod którą będzie widoczny dany formularz lub element formularza.
Poniżej skupimy się na rodzajach i zasadach tworzeniu formularzy oraz uzdatnianiu ich do komunikacji. Pierwszym zasadniczym zagadnieniem będzie atrybut method, który definiuje sposób, w jakim zostanie wysłany formularz.
Istnieją dwie wartości metody wysyłania danych: method=”get”, metoda jawna, która wysyła dane z formularza, łącząc go do adresu strony po pytajniku; oraz method=”post”, metoda niejawna, bezpośrednio przekazujące dane z formularza do skryptu.
Aby zainicjować wysłanie formularza, musimy zdefiniować przycisk odpowiadający za wysłanie formularza, może to być <input> z wartością type=”submit” lub przycisk odwołujący się do skryptu JavaScript w formularzu.
Formularz z method=”get”, przed i po wysłaniu w Comodo Dragon (Chrome) – formularz_get.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"><title>Formularze</title> </head> <body> <form action="formularz_get.html" method="get" id="formularz"> <input type="search" name="looking-for" value=""> <input type="submit" name="" value="Wyślij"> </form> </body> </html>
Formularz z method=”post”, przed i po wykonaniu funkcji readForm() w Comodo Dragon (Chrome) – formularz_post.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Formularze</title> </head> <body> <form action="formularz_post.html" method="get" name="formularz"> <table> <tr> <td>WEJŚCIE:</td> <td>Imię: </td> <td><input type="text" name="infn" value="imię" id="infn"></td> <td>Nazwisko: </td> <td><input type="text" name="inln" value="nazwisko" id="inln"></td> </tr> <tr> <td>WYJŚCIE:</td><td>Imię: </td> <td><input type="text" readonly name="outfn"></input></td> <td>Nazwisko: </td> <td><input type="text" readonly name="outln"></input></td> </tr> </table> <button onclick="return readForm()">Przeczytaj wejście!</button> </form> <script type="text/javascript"> function readForm(){ //definicja zmiennych string z wejścia var firstname = document.forms["formularz"]["infn"].value; var lastname = document.forms["formularz"]["inln"].value; //przesłanie danych z wejścia do wyjścia document.forms["formularz"]["outfn"].value=firstname; document.forms["formularz"]["outln"].value=lastname; /* powrócenie komunikatu fałszu w celu zablokowania ponownego wczytania strony, dlatego też w znaczniku button onclick="return readform()" a nie "readform()"; */ return false; } </script> </body> </html>
Autor tekstu: Jacek Woźniak